HTML stands for HyperText Markup Language. It is used to describe the structure of the webpage. If a webpage is like a human body, then you can consider HTML as being its skeleton.
Let’s create a basic webpage using HTML.
<!DOCTYPE html>
<html>
<head>
<title> Hello! </title>
</head>
<body>
Hello World!
</body>
</html>
The elements enclosed in angle brackets (<, >) are called as HTML tags. As you can see, we have used various HTML tags in above page such as <html>, <head>, <body>, etc. Another thing that you might have noticed that each tag has a closing tag such as <html> and </html>
<html> is the beginning tag and </html> is the closing tag.
<body> is the beginning tag and </body> is the closing tag.
Closing tags are just like beginning tags except that they have a forward slash (/) just after the opening angle bracket (<)
Each HTML tag has to have a closing tag (though there are some exceptions to this)
The content for the HTML tag has to be between the opening and the closing tag. For example, in the above case, Hello, World! is the content of the <body> tag above.
<body> Hello, World! </body>
With this information, let’s now try to understand what each line in the above webpage means.
<!DOCTYPE html>
This line tells the browser that this is actually the HTML and you need to parse this as per the standard rules of HTML. This line has to be present for every webpage. Without this, a browser won’t know what the page is about and how is it supposed to deal with it.
<html> </html>
This is tag where all of our HTML code lives. Whatever HTML we are writing, it has to be in this tag only.
All the HTML goes between <html> and </html>
All of our other HTML tags are within <html> tag and that’s why they are called as children of <html>.
Here the children of <html> are <head> and <body>
<head> </head>
Within these tags, we put the information about the page such as the title. Whatever goes inside the <head> is not visible to the user looking at the webpage. However, the information inside the <head> is used by the browsers and search engines.
<body></body>
This is the tag where the visible part of the webpage goes. All the content, images, videos, and forms that we want visible to the user has to be inside the <body> tag.
Right now, we have Hello, World! text inside the <body> and it will be visible to the user in the browser.
You can think of HTML webpage as a series of HTML elements. Some elements might be nested inside other HTML elements. For example, <title> is nested inside <head> and <head> itself is nested inside <html>
To understand how each element in the HTML is related to another element, we form a tree-like diagram or structure to help us visualise various relations between HTML elements. We call such tree-like structure as DOM – Document Object Model.
Also, note that we have used indentation to increase the readability of the code. The browser, however, does not care about the indentation. If indentation was missing, the browser would still be able to render the page correctly.
Search Engine Code Team is comprised of SEO experts and strategists having more than 20 years of combined experience. We keep testing and delivering knowledge of SEO for the community of SEO.
Leave a Reply