HTML is a Markup language which means it has plenty of markups(tags) that you can use to make a webpage. I wondered what the essential tags are to create a web page structure.
HTML has four required tags <html>, <title>, <head> and <body> and a doctype declartion <!DOCTYPE html>. These tags are the base of every webpage on the internet and the parent tags of all other HTML tags on a webpage. Without using these tags, you could not create a webpage or a website.
If you have just begun learning HTML, You need to understand the four essential tags you will need while making web pages.
<!DOCTYPE html>
The very first line of HTML code is <!DOCTYPE html> which is not a tag but used for document type declaration. The document type declaration tells the browser what version of HTML you use to make the webpage. Moreover, <!DOCTYPE html> declaration is case-insensitive in the HTML syntax.
The <!DOCTYPE html> declaration will also tell the browser to render the page in a standard mode. If you are not using the declaration, the browser renders the web page in a quirks mode.
You can read this article which explains more about <!DOCTYPE html>
The document declaration was different for the old version of HTML language
Some of the examples of doctype are:
HTML5 :-
<!DOCTYPE html>
HTML4.01 strict: –
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML1.0 strict mode:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
The first tag you will use while writing the HTML is <html>. The <html> tag is known as the root element on the HTML webpage. It is a parent element for all other HTML elements,, and it works like a container.
Moreover, the <html> element tells the browser that the webpage starts from here.
Example of <html> element
<!DOCTYPE html> <html> </html>
<head>
The <head> element is the first child element of the <html> element. The <head> element provides the information of the webpage. The user could not see what you have written in the <head> element.
The <head> element contains the information with the help of other tags such as:-
<meta> tag:- The <meta>; tag is used to tell the browser what sort of character set is used to make the website or used to make the website responsive.
<link> tag:- The <link> tag is used to link other resources with the webpage whether they are on the same server or the other website.
<script> tag:- The <script> tag connects the javascript files with the webpage.
You can see in the following example i have created a <head> element and use the <meta>, <link> and <script> tags.
Example of <html> element
<!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">
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="javascript-file.js"></script>
</head>
</html>
<title>
The <title> tag provides information about the webpage. You can see the page’s title when you open a webpage in the browser tab.
Example of <title> tag
<title> This is the website title </title>
In the below example, you can see I took a screenshot image of my website title when I opened it in the browser, and the title is visible in the tab.
We can use the <title> tag only inside the <head> element of the website.
Moreover, the <title> tag is also essential to write correctly to optimize your webpage for search engines.
<body>
The <body> element represents the body of the HTML webpage. The <body> element contains all the content of the website. The content you write inside the <body> element is visible to the user.
All other HTML elements such as <header>, <footer> and <section> will become the child element of the <body> element.
You can see in the below example I have written other elements such as <p>, <h1> and <button> inside the <body> element.
The example of <body> element
<body> <h1>Heading of the document</h1> <p>Paragraph of the page</p> <button>Read More</button> </body>
Output
This is how the content inside the <body> element render by the browser.
Example of a webpage after using the required tags
<!DOCTYPE html> <html> <head> <title> This is the website title </title> </head> <body> <h1>Heading of the document</h1> <p>Paragraph of the page</p> <button>Read More</button> </body> </html>
