HTML Basic tags
There are some tags which are specified in every HTML document. We will see which are absolutely necessary and which are not.
First, let’s have a look at absolute necessary tags
1) HTML tag (<html> tag)
- It indicates that it is a web page.
- It is the root element of HTML document.
- It acts as a container for entire HTML document.
- Every HTML document should begin with starting <html> tag and should end with a closing </html> tag.
- <head> and <body> can appear as direct child elements of <html> tag
2) HEAD tag (<head> tag)
- It is the first thing to appear after starting <html> tag, though it is optional.
- This tag can contain information about the title of the document, meta information, path of style sheets and so on.
- Tags like <title>, <style>, <link>, <script>, <base>, <meta> and so on can be specified within this tag
EXAMPLE
<head><title> First page </title>
<link rel=”stylesheet” type=”text/css” href=”mystylesheet.css”>
</head>
3) TITLE tag (<title> tag)
- It defines the title of the page, which is displayed in the upper left corner of the browser when a page is viewed.
- It provides a title for the page when it is added to favorites or bookmarked.
- It displays a title for the page in search engine results.
EXAMPLE
<head>
<title>HTML Basic tags </title>
</head>
4) BODY tag (<body> tag)
- It appears after <head> tag (if <head> tag is used).
- It contains the part of the web page that is actually seen by the user in the browser’s window.
- It can contain anything from paragraphs under a heading to more complicated layouts containing forms and tables. In short, it can contain anything like text, images, lists, hyperlinks, videos etc)
EXAMPLE
<body>
<h1> Welcome to HTML </h1>
<p> This is first paragraph </p>
</body>
Entire Program</span>
<!DOCTYPE html>
<html>
<head>Library Management System </head>
<title> Student Information </title>
<body>
<h1> Student Details </h1>
<p> This page contains information about the student </p>
</body>
</html>
Let’s have a look at common but not absolutely necessary tags used in HTML document.
5) Heading tags (<h1> to </h6> tags)
- Any document can start with a heading. Headings are of different sizes.
- They are defined with the <h1> to <h6> tags.
- They define text in bold and automatically adds extra blank lines before and after a heading.
- You can use it to define the most important heading of the document. It also plays an important in SEO (Search Engine Optimization)
- <h1> is the biggest size. (24 point type or font size = 6).
- <h2> (18 point type or font size = 5)
- <h3> (14 point type or font size = 4)
- <h4> (12 point type or font size = 3)
- <h5> (10 point type or font size = 2)
- <h6> (8 point type or font size = 1)
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
<F/head>
<body>
<h1> This is heading 1 </h1>
<h2> This is heading 2 </h2>
<h3> This is heading 3 </h3>
<h4> This is heading 4 </h4>
<h5> This is heading 5 </h5>
<h6> This is heading 6 </h6>
</body>
</html>
6) Paragraph Tag (<p>)
- It indicates a new paragraph that allows structuring the content, especially text into different paragraphs.
- Each paragraph with begin with <p> and end with </p>
- It automatically adds extra blank lines before and after a paragraph.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>This is first paragraph of text</p>
<p>This is second paragraph of text</p>
<p>This is third paragraph of text</p>
</body>
</html>
7) Line Break Tag (<br/> tag)
- It is an empty tag.
- It is used to end the line. i.e anything that follows <br/> tag starts from next line.
- Note: There is space before the forward slash <br />. If space is not specified than older browsers may not display the content following it on next line.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Importance Notice.<br />
The exam will be held tomorrow.<br />
Take note of it.<br />
Thanks </p>
</body>
</html>
8) Center Tag (<center> tag)
- It is used to place any content in the center of the page.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Center Example</title>
</head>
<body>
<center>
<h1> Text in center of page </h1>
</center>
<p> Text not in center of page </p>
</body>
</html>
9) Horizontal Rules Tag (<hr> tag)
- It is an empty element.
- It specifies horizontal rule (line) across the web page.
- It is used to visually separate the content of the web page
- Note: There is space before the forward slash <hr />. If space is not specified than older browsers may not display the line correctly.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<h1> Chapter - HTML Basic Tags</h1>
<hr />
<p>This chapter contains information about basic tags of HTML</p>
</body>
</html>
Conclusion
Understanding and mastering these basic HTML tags is the foundation of web development. HTML provides a robust and versatile set of tools for structuring content and creating interactive user interfaces.
