Explanation of HTML5 Boilerplate.


3 min read

Explanation of HTML5 Boilerplate.

What is Boilerplate.

  • Boilerplate code, are sections of code that are repeated in many places with little or no alteration.

    HTML5 boilerplate

    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <h1>This is a heading</h1>
      <p>This is a paragraph</p>
      <!-- script file -->
      <script src="script.js"></script>


  • A doctype is information about what version of HTML the page is written in.
    <!DOCTYPE html>

    The <html lang="en"> tag in HTML5 boilerplate:-

  • The <html> tag is the root element of the HTML page.
  • In <html> tag, lang attribute specifies the language of the document.
  • In this document, there is lang="en", which means it specifies that the document is in English.
    <html lang="en">
  • In between <html lang="en"></html> tag there is two section, one is head section and another is body section
  • The head tag contains the Metadata of the document.
  • Metadata means, it contains the character encoding, page description, viewport setting, and link to the CSS files and also JavaScript files.

    In side head tag:-

  • Inside head tag there are many Metadata present, which contains information about the document.
  • 1st line inside head tag defines the character encoding for the document.

    <meta charset="UTF-8">
  • character encoding means, it is the process of assigning numbers to graphical characters or characters of human language.
  • There are three types of character encoding are there, such as UTF-8, UTF-16, UTF-32. Here we use UTF-8 for encoding. UTF-8 is used for Web content.
  • 2nd line inside head tag defines what version of Internet Explorer the page should be rendered as.

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  • "IE=Edge" means IE (Internet Explorer) should use the latest version of its rendering engine, which is Microsoft Edge.
  • 3rd line inside head tag renders the width of the page to the width of the device's screen size.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • viewport means the area of the window in which web content can be seen.
  • Basically, it is used for responsive web design.
  • "width=device-width" means the device width or screen resolution.
  • initial-scale means the initial zoom when visiting the page. Here we use "initial-scale=1.0" means doesn't zoom.
  • initial-scale value is between 0.1 to 10, and the default value is 1.
  • We also use other Metadata like,
    <meta name="description" content="A HTML5 Template for web projects.">
  • The above Metadata represents the description of the web page.
    <meta name="author" content="mycode">
  • The above Meta data represents the author of the web page.
  • 4th line inside head tag represent the title of the web page.

  • Here the default title of the web page is Document.

    Inside body tag:-

  • The <body></body> tag defines the document's of body.
  • Inside body tag all the contents of an HTML document are present. Such as heading, paragraphs, images, hyperlinks, tables, list, etc.

  • This HTML boilerplate is used in every HTML document as a starter template.