Pramod's Notes

HTML5 Boilerplate: Explained

HTML5 Boilerplate: Explained

Learn about the HTML5 boilerplate and the meaning of each line in the template.

Pramod Singh's photo
Pramod Singh
·

3 min read

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.

  1. <!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.

  2. <html lang="en"> ... </html>

    The entire contents of the page are nested within the html element. All other elements are children of this html element.

    The lang attribute with the value of en specifies that the language of this page is English.

  3. <head> ... </head>

    The metadata related to the page is nested within the head element. 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.

  4. <meta> element is used to set the browser behavior. These are nested within the head element.

    • <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. The IE=edge tells Internet Explorer to display content in the highest mode available. edge mode 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.

  5. <title>Document</title>

    The title element determines what browser show in the title bar or tab for the page. This element is placed within the head element.

  6. <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.

Connect on LinkedIn

Follow on Twitter

HTML5HTML#html-interviewFrontend DevelopmentBeginner Developers