Table of contents
By the end of this blog, you will be able to understand the above code.
What is HTML
HTML stands for HyperText Markup Language, with the help of a markup language we can give meaning and structure to our content. It is developed by Tim Berners-Lee
Think of it as the process of building a house or the drawing in the above picture, in that case, the structure represents the HTML.
Okay, enough of theory let's go coding, open visual studio code or any online code editors like codepen, codesandbox, stackblitz and create a file called index.html
! + Tab
The above shortcut is an Emmet snippet that generates an HTML boilerplate which is used by most developers when starting a new web project.
- Every HTML element can have one or more attributes. Here attribute means key="value" pairs which help us to customize the element.
- We can have one or multiple attributes and they are placed only in the opening tag.Tags are keywords used by browsers to render the HTML document. <> This is an opening tag and </> this is an closing tag. Ex:
<body> </body>
Here html element is having an attribute called lang which is having value as "en".
- key = lang
- value = en
doctype
<!DOCTYPE html>
As we have different versions of HTML available, and browsers are required to support older content on the web, this specifies version of latest HTML specification that the browser renders the page.
html
<html> </html> is the root element of the document, i.e the highest element. It has 2 child elements head and body. The html element is added immediately after doctype
` denotes the lang attribute which specifies the language of the element's content. Depending on the language, it can change. For instance, "es" stands for Spanish.
head
The head element contains information and data that are meant to be processed by machines such as web browsers, search engines, crawlers, etc. The content of the head is not visible on the page.
metaThis element is used to provide additional data and details about the current web page. It has so many attributes which make it meaningful.<meta charset="UTF-8">it is recommended to have this as the first element inside the head element. charset stands for character set and the value "UTF-8" will allow to display the characters beyond A-Z like French, English, and Spanish.<meta name="viewport" content="width=device-width, initial-scale=1.0">
This asks the browser to represent the web page according to the current device. Before 2010, we were following Desktop first approach(so, they were not so responsive for mobile devices and appeared zoomed out) but now we follow a mobile-first design approach, making it represent according to the mobile width.title: The title is shown in the browser's tab bar.
This is the title of the Google page. The title is extremely useful for SEO. The page's title should be unique per page.
body
This is where the actual content is shown by the browser. From headers, paragraphs, etc it contains all the content of our HTML page.
Conclusion
The Bird Who Dares to Fall, Is the Bird Who Learns to Fly. Fall in love with HTML which helps in getting started on your Journey. This article covered the boilerplate / structure of the HTML.