HTML Heading Elements: Understanding h1 to h6 with Examples

The heading elements define a content structure in HTML. Use <h1> to <h6> to show levels. <h1> means the main heading. While the <h6> means the lowest subheading.

The search engines read them to find topic levels, and users scan them to find key ideas.

Understand the HTML Headings

Heading elements appear bold and large in HTML. Browsers apply default styles. Use only one <h1> on each page and lower level to break content into parts.

Search engines use headings to understand the page. <h1> shows the main topic. Include the keyword in it. While the lower headings group related points. That helps crawlers scan faster. A clear structure helps index each section.

Do not skip levels. That confuses the parsers. Write tags in order to show clear relationships.

Here is the syntax:

<h1>Main Title</h1>
<h2>Subsection</h2>
<h3>Detail under subsection</h3>

You write it like this to avoid nested errors. Use proper tags from top to bottom.

Use CSS for visual changes and don’t use heading elements to make bold text in HTML.

Here is the right use case:

• Use only one <h1> tag.
• Place it before other content.
• Define the topic clearly.
• Follow the order from <h1> to <h6>.
• Do not jump levels. Keep the structure flat and readable.
• Keep text short.
• Use words that match the section.
• Do not add style to the tag.

Use CSS for spaces and fonts. Use headings to show topic flow.

Headings are semantic. They show structure and use it to mark sections. While paragraphs hold text and they do not define a level. Use them to write content.

The div element groups items. Use them with classes. So, only headings affect SEO and show the content structure.

Here is the accessibility of headings:

• Screen readers follow heading order.
• They use it to skip or scan.
• Correct use supports users with low vision.
• It gives clear document flow.
• Use the order from <h1> to <h6> with no gaps.
• Do not jump levels.
• Add aria-level if the content uses generated HTML.

Styles of HTML Headings Tags with CSS

Style headings with CSS. Do not change HTML for style only. Use selectors to apply font or size.

Here is an example:

h2 {
  font-size: 1.5rem;
  color: #333;
}

Apply the same pattern to each level. This keeps the design consistent. Use IDs or classes for custom cases.

Examples of HTML Headings in HTML

Basic Heading Structure:

<article>
  <h1>Article Title</h1>
  <section>
    <h1>Section Title</h1>
  </section>
</article>

It’s valid to use multiple <h1> tags within different semantic containers like <article> or <section>. Each represents the top heading within its own scope.

Multiple <h1> Tags in HTML5:

<div class="heading-style">My Custom Heading</div>

Here, a <div> is styled with CSS to look like a heading. While this affects appearance, it doesn’t provide semantic meaning like <h1>–<h6> do (which matters for SEO and accessibility).

Styles of Non-Heading Elements:

<div class="heading-style">My Custom Heading</div>

Here, a <div> is styled with CSS to look like a heading. While this affects appearance, it doesn’t provide semantic meaning like <h1>–<h6> do (which matters for SEO and accessibility).

Skip Heading Levels (Not Recommended):

<h1>Main Title</h1>
<h4>Too Small Subsection</h4>

Jump heading levels (like from <h1> to <h4>) is technically allowed but discouraged. It can confuse users and screen readers. Always try to follow a logical order (e.g., <h2> after <h1>).

Wrapping Up

In this article, you learned what HTML heading tags do and how they define structure.

Here is a quick recap:

• Use <h1> to <h6> to create a content hierarchy.
• Apply only one <h1> tag per page.
• Follow the order of levels with no skips.
• Don’t use headings for styles.
• Style headings with CSS only.
• Use semantic structure to improve SEO and readability.
• Help assistive technologies with correct heading flow.

Similar Reads