The HTML <h5> tag
The HTML <h5> element is a fifth-level heading, the next step down from <h4>. Use it inside an h4 section, as in <h5>Hinges</h5> under an h4 called Doors. At 0.83em by default, about 13.28px next to 16px text, it is smaller than the text around it.
Overview
The HTML <h5> element is the fifth heading level, the first one smaller than body text by default. It belongs inside an <h4> section in documents with at least five layers of headings, such as a long manual or a technical specification, and only <h6> ranks below it.
An h5 can follow an h4, another h5 or an h6, but not an h3, h2 or h1. An h3 directly before an h5 would leave level 4 empty.
An h5's 0.83em default is about 13.28px beside 16px text, with 1.67em margins. Bold weight keeps it readable as a heading at that size.
The size is relative to the parent element, not fixed. Inside a box whose text is 20px, the same h5 grows to about 16.6px. A size set in rem or px instead makes every h5 on a site look the same, wherever it sits.
Syntax
<h4>Doors</h4>
<h5>Hinges</h5>
<p>Each door hangs on three steel hinges.</p>Example
<label for="size">Parent text size</label>
<input type="range" id="size" min="12" max="24" value="16">
<p id="out"></p>
<div id="box">
<h4>Doors</h4>
<h5>Hinges</h5>
<p>Each door hangs on three steel hinges.</p>
</div>
<script>
const box = document.getElementById('box');
const size = document.getElementById('size');
function show() {
box.style.fontSize = size.value + 'px';
const h5 = getComputedStyle(box.querySelector('h5')).fontSize;
document.getElementById('out').textContent = 'Parent ' + size.value + 'px, h5 ' + h5;
}
size.addEventListener('input', show);
show();
</script>Best practices
- Put an h4 above every h5.
- Size h5 in CSS when it shouldn't look smaller than your body text.
- Set that size in rem rather than em when every h5 should match, since an em size follows each parent's font size.
- Avoid choosing h5 because its small bold text matches a design. Style a paragraph instead when the text isn't a heading, and keep <strong> for text of strong importance, seriousness or urgency.
Accessibility
An h5 used for a small bold label puts a false entry in the page's list of headings. Most screen readers can generate that list, and anyone scanning it then finds labels mixed in with real section titles.
