Let's deep dive into HTML boiler plate.

HTML boilerplate code is used as a template for writing HTML code and majorly ignored what's inside it? and why is it being written?

In this blog, I will be mentioning a line-to-line explanation of the HTML boilerplate code so you could have a good insight into why it's included and why it's used as a preferred template to write HTML code.

VSCODE HTML BOILERPLATE CODE

html boiler plate.png

Let's deep dive into why VSCode specifies the above 12 lines as a starter template of HTML document via emmet.

<!DOCTYPE HTML>

To specify the file type to the OS we use extensions and the most popularly used HTML extension is .html. On specifying the extension we declare our file type as HTML to our OS but how to specify the file type and the version to the browser?

To instruct the browser on what version of the HTML is being used in the file we use <!DOCTYPE HTML>. On telling this at the start of the document we specify to the browser that the file is written in HTML version 5 or simply HTML5.

<html lang="en">

This is the root element of any HTML file. It provides the content information to the browser. lang specifies which language is used to write the content of the document. lang="en" tells the browser that the language in which the document written is English.

<head> & <meta >

It is the webpage information provider to the browser. Since it is of no use to the end user the content is not displayed on the webpage.
It contains the meta [ Information about the data ] information.
It is specified for machine-readable purposes to provide information for browsers and search engines.
Meta tags do not have closing tags.

<meta charset="UTF-8">

charset stands for character_set, character encoding type of the document.
Character encoding is of many types such as UTF-8, UTF-16, and so on.
UTF stands for Unicode transformation format.
HTML5 by defaults specifies UTF-8.
UTF-8 encoding is ASCII compatible and is supported by the majority of browsers.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

http-equiv is used to pass on additional information to the server using the HTTP header.
X-UA-Compatible specifies what version of internet explorer the page should use while rendering.
IE=edge specifies the webpage to be rendered as supporting to EDGE engine.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Viewport is the visible area of the webpage to the user.
Not all the devices as screen size, to standardize the initial width and zoom of the content we use content="width=device-width, initial-scale=1.0"

Document</title>

Title specified is shown in the browser's title bar or in the page's tab.
By providing a name it's not just useful for the user to navigate to the page but also helps in finding the page on the web easily.

<body>

This marks the start of the document's body that can be shown to the user.
It is the container of all the visible content of the document.
It is recommended to have body as the last child of the HTML document.

Mithun 's Blog