HTML h1 to h6 Tag

HTML heading tags, ranging from <h1> to <h6>, are used to define the structure and hierarchy of content on a web page. These tags help organize information clearly and improve both readability and accessibility.

<h1> represents the main heading, while <h6> represents the least important heading.
Heading tags help search engines and screen readers understand page structure.
They improve content organization and enhance the overall user experience.

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: Here, 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>

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.

HTML h1 to h6 Tag Example

Importance and Usage

Explore