<h1>-to-<h6>

The <h1> to <h6> tags are used to define headings, with <h1> being the most important and <h6> the least.

h1 – h6 Tags

The <h1> to <h6> elements define headings in HTML, with <h1> as the most significant and <h6> as the least. These block-level elements naturally start on a new line and extend across the full width of their container.

h1-to-h6 Demo

Beetles

External morphology

Head

Mouthparts

Thorax

Prothorax

index.html

<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h5>Thorax</h5>
<h6>Prothorax</h6>

Definition and Usage

The <h1> to <h6> tags create headings in HTML.

<h1> is the primary heading, while <h6> represents the least important.

Use a single <h1> per page to define the main topic. Maintain a logical sequence without skipping heading levels, starting from <h1> and proceeding downward.

Accessibility

Navigation
Structured Headings

Navigation

Screen readers rely on headings for content structure. Skipping levels can disrupt the reading flow, making navigation harder for users. Maintaining a logical sequence improves accessibility.

Heading level 1

Heading level 2

Heading level 3

index.html

  <h1>Heading level 1</h1>
  <h2>Heading level 2</h2>
  <h3>Heading level 3</h3>

Structured Headings

The example below demonstrates the usage of all heading levels.

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

index.html

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Conclusion

The <h1> to <h6> elements establish a structured hierarchy for headings, improving content clarity and navigation. Using headings in sequential order enhances accessibility and user experience. Proper implementation ensures logical organization, benefiting both users and search engines.

<font>

The HTML <font> element, which is now obsolete, was previously utilized to set the font size, color, and type for text. CSS is now recommended for more versatile and consistent text styling.

The HTML <hgroup> element, now obsolete, was intended to combine several heading elements into a unified heading structure; current practices recommend using CSS or semantic HTML for this purpose.