Chapter 3: Headings

HTML provides not only plain paragraph tags, but six separate header tags to indicate headings of various sizes and thicknesses. Heading 1 is the largest and thickest, while Heading 6 is the smallest and thinnest. This topic details proper usage of these tags.

Section 3.1: Using Headings

Headings describe the topic they precede and are defined with the <h1> to <h6> tags. All heading tags support global attributes.

• <h1> defines the most important heading.
• <h6> defines the least important heading.

Defining a Heading

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

Correct Structure Matters

Search engines and other user agents usually index page content based on heading elements, for example to create a table of contents. Using the correct heading structure is important for accessibility and SEO.

In general, an article should have one h1 element for the main title, followed by h2 subtitles and deeper layers as needed. Lower-level content should not use higher-level headings.

Example Document

    <h1>Main title</h1>
    <p>Introduction</p>
    <h2>Reasons</h2>
    <h3>Reason 1</h3>
    <p>Paragraph</p>
    <h3>Reason 2</h3>
    <p>Paragraph</p>
    <h2>In conclusion</h2>
    <p>Paragraph</p>