Table of contents
No headings in the article.
An HTML Boilerplate is a pre-prepared library of code that can be copied and is meant to be used as a starting point to start building web projects. It is sometimes referred to as an HTML skeleton on VS Code if you hit (! and enter) you get the boilerplate.
which somewhat looks like this
<!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>
Now in this blog, I will guide you through line by line and what every line is supposed to mean.
<!DOCTYPE html>
The declaration is not an HTML tag
This line here just tells the browser what document type to expect.
here it is currently expecting HTML5
<html lang="en">
first, tag that from where the HTML page start
The lang attribute specifies the language of the element's content.
Common examples are "en" for English, "es" for Spanish, "fr" for French and so on.
but generally, we use "en" for English
<head>
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
Metadata is data about the HTML document. Metadata is not displayed on our page
Metadata typically defines the document title, character set, CSS styles, javascript etc.
<meta charset="UTF-8">
UTF-8 (U from Universal Character Set + Transformation Format—8-bit) is a character encoding capable of encoding all possible characters in Unicode. The encoding is variable-length and uses 8-bit code units.
In other words: UTF-8 is just one of the encoding methods. It lets you write text in all kinds of languages, English, French accents will appear perfectly fine.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
This line here tells us that this is Internet Explorer compatible, we do not need this bcoz IE has been deprecated by Microsoft.
Edge mode tells Internet Explorer to display content in the highest mode available.
If a future release of Internet Explorer supported a higher compatibility mode, our web pages set to edge mode would appear in the highest mode supported by that version.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This here tells the viewpoint of the website (the length , height , width) when it was first rendered in our browser.
<title>Document</title>
Nothing to Explain here, just the tag suggests it is used to give our page tittle.
</head>
Head tag closed
<body>
</body>
Body tag, here we design our web page
Here whatever we write shows on the page this is where the main thing happens here we structure our website line by line where should our heading will fit what about paragraph etc
</html>
closing of HTML tag , this is where our html page ends
I hope you liked the blog
Feedback appriciated
Thank you for Reading