What is a header tag?
A header tag is one of the six heading elements in HTML. H1 is the main heading of the page, H2 marks its major sections, H3 marks subsections within those, and so on down to H6, which almost nobody needs. Together they form an outline, the same way chapter titles and section headings do in a book. Browsers style them by default in descending sizes, but the structure is in the tags, not the font, and it is the structure that screen readers, crawlers and summarizing tools use.
Header tags are also called heading tags or H tags. They are not the same as the HTML head element or the HTTP headers a server sends, which confuses people new to the vocabulary.
Why it matters
Why header tags matter
They matter because nobody reads a web page from top to bottom. People scan for the heading that answers their question, then read the paragraph beneath it. A page with clear headers is read; a page without them is skimmed and abandoned, and dwell time shows it. Search engines use the same outline to understand what each part of a page covers, which is how a single page can rank for several related questions and how a specific section can be pulled into a featured snippet or a People Also Ask box.
They are also an accessibility requirement. Screen reader users navigate by headings, jumping from one to the next the way a sighted reader's eye does. A page whose headings are just bold text gives those users no map at all.
In practice
How header tags work in practice
- 01
Write the outline first. One H1 for the subject, then H2s for each major part of the answer, phrased as the questions people ask, then H3s only where a section genuinely needs dividing. Each heading should make sense on its own, because that is how a snippet or a table of contents will show it. Keep the order logical: an H3 belongs under an H2, not directly under an H1, and the levels should never skip.
- 02
In practice this is mostly a template and a habit. Set the styles for each level once so writers never have to choose a heading for its look, use the headings for structure and CSS for size, and check pages with a heading outline tool before they go live. The outline should read like a sensible summary of the page; if it does not, the page is not organized yet.
At RIOT
Header tags at RIOT
This glossary runs on a fixed heading structure. Each term's page has one H1 and a set of H2s that ask what the term is, why it matters, how it works and what people get wrong about it. The structure is the same on every entry, so a reader who has used one page can navigate all of them, and a search engine gets the same clear outline every time.
Watch out
What people get wrong about header tags
Choosing them for appearance. When a designer wants smaller text they reach for an H4, and the outline ends up skipping from H1 to H4 with nothing between. The other mistake is treating headings as keyword slots and writing six variations of the same phrase, which reads badly and signals nothing extra. The third is the opposite: a long page with no headings at all because the design is minimal. Minimal is a style; it does not require throwing away the structure that makes the page usable.
