Html5:A Simple Guide to Understanding the Boilerplate for any project

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

Here, the above code looks overwhelming, right?

You might be thinking why there is <!DOCTYPE> and what is the <meta> tag and why are we using it? and what is its use?

so, here, I'm breaking it down for you in simple words.

Html tag

 <html lang="en">
<!--html tag is the root of the element-->

Here, the lang attribute is specifying the language of the element's content.

for example: 'en' for English,' es' for Spanish, and so on.

Now moving on to the next element head, it is used to contain the metadata of the HTML page .

what is metaData ?

metadata is the information of the data

Meta tags

 <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Now, what is Charset attribute and what is the use of the value UTF-8?

Charset attribute specifies the characte encoding for the HTML document whereas the value UTF-8 is used because it almost contains all characters and symbols

moving on to the next attribute,

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

http-equiv provides the information to the header of the content attribute

and due to it, internet explorer Uses the highest IE version. if it is 8 then it uses IE8 version if 9 the IE9 version.

now, move on to the next attribute

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

the viewport meta tag tells the browser that the width of the screen must be considered full-width irrespective of the width of the device.

Now,

 <title>Document</title>

<title> tag is used to give the title to the HTML page.

Body

<body>
<h1>heading tag</h1>
<p>paragraph tag</p>
</body>

It holds the content of the HTML document.

DOCTYPE

<!DOCTYPE html>

Firstly, it is not the tag. It is the information to the browser as to what document type to expect. it tells the version of Html. The document must start from Doctype.