Explanation of HTML5 Boilerplate.

GenitGenit
3 min read

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">
<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>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <!-- script file -->
  <script src="script.js"></script>
</body>
</html>

    DOCTYPE in HTML:-

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

    <title>Document</title>
  • 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.

2
Subscribe to my newsletter

Read articles from Genit directly inside your inbox. Subscribe to the newsletter, and don't miss out.

html5 boilerplatehtml templateHTML5#html-interviewHTML

Written by

Genit
Genit