Table of Contents
In this tutorial, we may use some HTML tags that you haven’t learned yet. Don’t be afraid about that. We will discuss all tags step by step in the next tutorials.
HTML Documents
HTML documents must start with a document-type declaration <!DOCTYPE html>
. This declaration helps the browsers to show the HTML documents correctly. This declaration is not case-sensitive and this should be declared once at the top of the document before all other tags.
The document itself begins with <html>
tag and ends with </html>
tag.
We use all other tags inside these <html>
and </html>
tags.
Head Tag
Head (<head>
and </head>
) tag contains meta information about the page. This tag can include a title for the document, scripts, styles, meta information and more.
Body Tag
The visible part of an HTML document is between the <body>
and </body>
tags. All visible contents should go inside of this tag. For example headings, texts, hyperlinks, images, videos, input fields etc.
Title Tag
Title (<title>
and </title>
) tag contains a title of the page. It displays a title at the top of the browser tab and also on the search results (important for SEO). We must include a title tag inside <head>
and </head>
tags.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page</p>
</body>
</html>
View HTML Page Source
You can see the HTML code of a page when you visit a page. Just right-click on an HTML page and click on “View Page Source” (in Chrome) or “View Source” (in Edge) or Similar to other browsers. Then you will able to see the codes they used to design the webpage.
Inspect Element
You can also see the HTML code as well as the CSS codes of an HTML element by inspecting it. Just right-click on an HTML element. Right-click on it and then click on “Inspect” or “Inspect Element”. Then you will see the HTML codes and CSS codes used for that Element as shown in the below picture.