|
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
|
HTML Canvas Shapes
HTML Canvas Drawing
HTML Canvas Curves
SVG Line
HTML Canvas Images