When launching a new website, it is essential to have a strong foundation. In this article, I’ll define an HTML5 boilerplate and show you how to make a basic template for usage in your projects.
What is an HTML5 Boilerplate?
A boilerplate in HTML is a template that you will include at the beginning of your project. This boilerplate should be added to all of your HTML pages.
Example HTML5 Boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
What is a DOCTYPE in HTML?
Doctype HTML is a declaration that informs the browser of the HTML version in which the document is written. In an HTML file, this declaration appears as the first line.
Every HTML document must begin with a <!DOCTYPE> declaration.
The declaration does not contain an HTML tag. It is “information” to the browser about the type of document to expect.
The declaration in HTML5 is straightforward:
<!DOCTYPE html>
What is the HTML element?
The <html> element is the top-level element of an HTML document, and is referred to as the root element.
Here you will nest the <head> and <body> tags inside of it.
<html lang="en">
<head></head>
<body></body>
</html>
The lang attribute specifies the language of the element’s content. Always use a language attribute on the html tag to declare the default language of the text in the page. This is inherited by all other elements.
What are head tags in HTML?
The <head> element, which is positioned between the <html> and <body> tags, is a container for metadata (info about data). Metadata is information about an HTML document. Metadata is not shown. The document title, character set, styles, scripts, and other meta information are often defined via metadata.
What is UTF-8 character encoding?
The UTF-8 character encoding system. It allows you to display characters as ASCII text while still supporting international characters like Chinese characters.
<meta charset="UTF-8">
What does X-UA-Compatible mean?
X-UA-Compatible is a document mode meta tag that allows web authors to choose what version of Internet Explorer the page should be rendered as. It is used by Internet Explorer 8 to specify whether a page should be rendered as IE 7 (compatibility view) or IE 8 (standards view). “IE=7” “IE=EmulateIE8” “IE=8”
In the example below, it supports the latest browser “IE=edge”. This is the highest supported document mode of the browser.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
What is the viewport meta tag in HTML?
The viewport is the visible area of a web page to the user. It varies depending on the device; on a mobile phone, it will be smaller than on a computer screen. This provides guidance to the browser on how to control the page’s scale and dimensions.
You should include the following <meta> element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0"
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
What are HTML title tags?
The title of the web page is specified by the <title> tag. This text appears in the title bar of the browser.
What are body tags in HTML?
The body of the document is defined by the <body> tag. The <body> element holds all of an HTML document’s contents, such as headings, paragraphs, graphics, hyperlinks, tables, lists, and so on.
How to quickly add a boilerplate in VSCode?
To create an instant HTML boilerplate in VSCode create an empty index.html document.
Type the following into your text editor and then hit tab to see the results.
!
Should reveal the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
Useful Resources
If you are looking for a professional HTML5 Boilerplate then definitely check out HTML5 Boilerplate: The web’s most popular front-end template
HTML5 Boilerplate allows you to create web apps or sites that are quick, powerful, and customisable. Start your project with the collective knowledge and labour of hundreds of developers, all in one small package.
Conclusion
Each of your HTML pages should have an HTML 5 boilerplate. The doctype, html, metadata, head and body tags are all included in the initial code. Additionally you can go further and add your own external stylesheets, and script tags.
Learn more about HTML by reading the following articles on my website:
How to write “Hello World” in HTML
What is an HTML Document’s Basic Structure?
What is an HTML Element? How do you create one?
Top comments (0)