HTML h1 to h6 Tag
Last Updated :
11 Mar, 2024
HTML heading tags (<h1> to <h6>) define the importance and hierarchy of headings. They range from highest (<h1>) to lowest (<h6>) importance, used for structuring and organizing content in web pages and supporting event attributes.
Syntax
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Global Attributes: Apply to all HTML elements, enhancing functionality and styling.
Event Attributes: Trigger JavaScript functions based on user actions, enhancing interactivity.
The six different HTML headings:
| Tag |
Description |
Size |
<h1> |
Defines the most important heading. |
2em (32px) |
<h2> |
Defines a level 2 heading. |
1.5em (24px) |
<h3> |
Defines a level 3 heading. |
1.17em (18.72px) |
<h4> |
Defines a level 4 heading. |
1em (16px) |
<h5> |
Defines a level 5 heading. |
0.83em (13.28px) |
<h6> |
Defines the least important heading. |
0.67em (10.72px) |
HTML h1 to h6 Tag Example
Example: In this example we displays headings from <h1> to <h6>, each representing different levels of importance in a webpage’s structure.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0"
/>
<title>Heading Example</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
|
Output:
HTML h1 to h6 Tag Example Output
Importance and Usage
- It is a good practice to use only one h1 tag on a single web page. <h1> element has the highest importance in heading levels the content inside this tag shows the main and important title of the web page.
- If using more than one heading tag, do not skip the levels of the heading. Starting must be from <h1> element to define the title of the web page and then use <h2> element then <h3> and so on.
- Always use heading elements to define headings or the sub-headings of the web page do not use them for any style like font size or font weight.
- If the web page has proper use of headings then it would be easy to rank the website which improves the visibility to the web page.
Supported Browsers
Share your thoughts in the comments
Please Login to comment...