Heading Tags

In HTML, heading tags ranging from <h1> to <h6> are used to define the structure and hierarchy of text on a web page. These tags help organize content so that both users and search engines can understand the relationship between different sections.

The <h1> tag is generally used for the main title of a page, while <h2> to <h6> can be used for progressively deeper levels of headings. Proper use of heading tags improves readability and can also contribute to better page structure for search engines. For additional SEO-focused reading, see Search Engine Journal's guide to heading tags.

<h1> Tag: First-Level Heading

The <h1> tag defines the first-level heading and is typically the main title of a page.

<h1>
    <!-- Heading content -->
</h1>

Example:

<h1>Learn HTML</h1>

<h2> Tag: Second-Level Heading

The <h2> tag is used for second-level headings and is commonly used for major sections within the page.

<h2>
    <!-- Heading content -->
</h2>

Example:

<h2>HTML Basics</h2>

<h3> Tag: Third-Level Heading

The <h3> tag is used for subsections within an <h2> section.

<h3>
    <!-- Heading content -->
</h3>

Example:

<h3>HTML Elements</h3>

<h4> Tag: Fourth-Level Heading

The <h4> tag defines a fourth-level heading. It can be used for further subsections within an <h3> section.

<h4>
    <!-- Heading content -->
</h4>

Example:

<h4>Inline Elements</h4>

<h5> Tag: Fifth-Level Heading

The <h5> tag is used for fifth-level headings. These headings are uncommon but can be useful when a document contains deeply nested sections.

<h5>
    <!-- Heading content -->
</h5>

Example:

<h5>Inline Formatting</h5>

<h6> Tag: Sixth-Level Heading

The <h6> tag defines the sixth and deepest standard heading level. It is rarely needed in simple webpages but can be useful for very detailed content structures.

<h6>
    <!-- Heading content -->
</h6>

Example:

<h6>Minor Detail</h6>

Heading Hierarchy

The six heading levels form a hierarchy. A simple structure might look like this:

<h1>Web Development</h1>

<h2>HTML</h2>
<h3>HTML Basics</h3>
<h4>Heading Tags</h4>

<h2>CSS</h2>
<h3>CSS Basics</h3>

Summary

• <h1>: Used for the main title of the page and represents the highest heading level.
• <h2>: Used for major section headings.
• <h3>: Used for subsections within an <h2> section.
• <h4>: Useful for further breaking down an <h3> section.
• <h5>: Used for deeply nested or less prominent sections.
• <h6>: The deepest standard heading level and is used for very specific or minor sections.