HTML h1 to h6 Tag
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
Contact Us