The HTML <h3> tag
The HTML <h3> element is the heading for a subsection inside an <h2> section. Under an h2 called Shipping, for example, <h3>Returns</h3> starts one part of it. Default styles make it bold and 1.17em, slightly larger than body text.
Overview
The HTML <h3> element heads a sub-subsection, which nests inside an <h2> section. In the scale from <h1> to <h6>, it sits two levels below the page's main heading and splits an h2 section into smaller, named parts.
That order is a rule, not a style choice. An h1 followed straight by an h3 is non-conforming, because a heading may sit at most one level below the heading before it. Changing that h3 to an h2 fixes it.
An h3 is only a little larger than body text by default, at 1.17em, or about 18.72px next to 16px paragraphs. Its 1em margins come out the same size as its text.
Syntax
<h2>Shipping</h2>
<h3>Delivery times</h3>
<h3>Returns</h3>Example
<h2>Shipping</h2>
<h3>Delivery times</h3>
<p>Orders leave the warehouse within two days.</p>
<h3>Returns</h3>
<p>Send items back within 30 days.</p>
<p id="sizes" style="margin-bottom: 0"></p>
<script>
const sizes = [...document.querySelectorAll('h2, h3')].map(h => h.tagName + ' ' + getComputedStyle(h).fontSize);
document.getElementById('sizes').textContent = 'Sizes: ' + sizes.join(', ');
</script>Best practices
- Use h3 only under an h2, never straight after the page's h1.
- Keep sibling h3 headings parallel in wording, such as "Delivery times", "Returns" and "Exchanges", so a list of headings reads as one matched set.
- Pick h3 for its position in the outline, not its default size. A CSS font-size rule resizes an h3 but leaves it at level 3.
- Check the order with a heading list after you rearrange sections.
Accessibility
In a screen reader's list of headings in document order, each h3 follows the h2 before it. A misplaced h3 therefore shows up after the wrong h2 in that list.
