HTML5 Boilerplate: Explained
Pramod Singh
When writing HTML pages in modern code editors, we use plugins like emmet to type shortcuts like ! or html:5 and press Tab to populate some lines of code which define the basic structure of the webpage. Some developers keep these sets of lines in a txt file and whenever they write an HTML page, first they begin by copy-pasting boilerplate code into the editor.
If you want to understand what these lines mean then this article is for you. I try to explain what is the HTML5 Boilerplate and each of the components.
What is the HTML5 boilerplate?
In short, the below code snippet is an example of an HTML5 boilerplate. It is a template having a few set of code lines that defines the basic structure of an HTML page and is part of every HTML page. Instead of typing again and again, the boilerplate template help to get started quickly saving a developer's time.
<!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>
</body>
</html>
Components of the HTML5 Boilerplate
Now, let's see what each of the lines in the template means.
<!DOCTYPE html>This is known as a declaration. This ensures that the browser tries to meet industry-wide specifications. All pages should begin with the declaration.
<html lang="en"> ... </html>The entire contents of the page are nested within the
htmlelement. All other elements are children of thishtmlelement.The
langattribute with the value ofenspecifies that the language of this page is English.<head> ... </head>The metadata related to the page is nested within the
headelement. These provide extra information that is not visible on the web page but is useful for search engines or how the page gets displayed in the browser.<meta>element is used to set the browser behavior. These are nested within theheadelement.<meta charset="UTF-8">
This tells the browser to parse the markup into multiple languages.<meta http-equiv="X-UA-Compatible" content="IE=edge">
This defines the version of Internet Explorer the page should be rendered as. TheIE=edgetells Internet Explorer to display content in the highest mode available.edgemode represents the highest support for modern standards available to the browser.<meta name="viewport" content="width=device-width, initial-scale=1.0">
This makes the styling of the page look similar on mobile as it does on a desktop or a laptop.
<title>Document</title>The
titleelement determines what browser show in the title bar or tab for the page. This element is placed within theheadelement.<body> ... </body>
The actual content that is to be displayed in the web browser is nested inside the body tag.
That's all. I hope this help is answering the question if you have ever wondered what components of the boilerplate template mean.
Also, note that this is not the only boilerplate in existence. There are many variations available on the internet. Some developers also make their boilerplate based on what elements are frequently used in their projects or defined by their workplace.
Let me know if I missed something in the comments. Suggestions are welcome.
Let's connect. I will be sharing my Web development learnings with the community.
I like learning new technologies and upgrading my skills. I also like watching Anime.
Subscribe to my newsletter
Read articles from Pramod Singh directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by