An h3 element marks a third-level heading: a subsection title nested within a larger page or article structure. It commonly follows an h2 heading and introduces a section containing one or more paragraphs. section 3.2.7 section 12.2.2
Use an h3 element to:
- Label subsections inside an article, such as separate sections of a travel guide or essay. section 12.3
- Keep the heading hierarchy clear: an h1 usually names the page, an h2 names a major article or section, and an h3 names a subsection. section 3.2.7
- Adjust its visual size with CSS when the default size of about 18.2 pixels does not fit the design; 20 or 24 pixels may work better. section 3.2.7
Article subsection
Place the h3 element inside a section, after the article's h2 title and introductory paragraph: <section> <h3>Planning Your Journey</h3> <p>Choose a route and prepare your travel plans.</p> </section> An h3 can also label related content in an aside, such as <h3>Related Guides</h3>. section 12.2.2 section 12.3
<main>
<article>
<h2>Article Title</h2>
<p>Introductory paragraph</p>
<section>
<h3>Section 1 heading</h3>
<p>
Section 1 paragraph 1
</p>
<p>
Section 1 paragraph 2
</p>
<p>
etc.
</p>
</section>
<section>
<h3>Section 2 heading</h3>
<p>
Section 2 paragraph 1
</p>
<p>
Section 2 paragraph 2
</p>
<p>
etc.
</p>
</section>
<section>
<h3>Section 3 heading</h3>
<p>
Section 3 paragraph 1
</p>
<p>
Section 3 paragraph 2
</p>
<p>
etc.
</p>
</section>
</article>
</main>
Browse a complete article layout showing h2, section, h3, and paragraph elements working together. section 12.2.2
