HTML headings give a page an understandable structure. A main heading introduces the topic, second-level headings divide it into major sections, and lower levels introduce nested subsections. Readers can scan that structure visually, while people using assistive technology can often navigate directly between headings.
Headings can help search engines understand a page, but no tag sequence guarantees ranking. Choose levels for meaning, not because one browser style looks larger or smaller.
What H1 through H6 mean
HTML provides six heading elements, from h1 to h6. Think of a page as a document outline: the main topic, major sections, and subsections within those sections. Not every page needs six levels. A straightforward article may only need H1, H2, and H3.
For example:
<h1>How to choose a bicycle helmet</h1>
<h2>Find your size</h2>
<h3>Measure your head</h3>
<h3>Check the fit</h3>
<h2>Compare useful features</h2>
<h3>Ventilation and weight</h3>
<h3>Adjustment and straps</h3>
Both H2 headings introduce major sections. Each H3 belongs within the preceding H2 section. Returning from an H3 to the next H2 is normal: it closes the subsection and starts another major section.
Avoid skipping downward from H2 to H4 without a reason. For detailed accessibility guidance, see the W3C page structure tutorial.
One H1 is a useful convention
For many articles and product pages, one visible H1 expressing the main topic is a clear editorial convention. Multiple H1 elements do not automatically mean that a search engine will penalize a page. The important question is whether the structure makes sense to readers and assistive technology. Check templates for accidental repeated H1 elements, for example when a logo is marked as a top-level heading on every page.
Do not hide a keyword-filled heading from visitors just to influence search results. The main heading should accurately describe the page people can actually read.
H1, title, and meta description are different
The HTML title element identifies the document in metadata. Browsers and search engines can use it in different contexts. H1 is a visible part of the page content. They may be similar but do not need to be identical word for word; both should describe the same subject accurately.
A meta description is separate metadata that may inform a search snippet. Search engines can instead select other page content. Google explains its approach to title links. Treat each element as having its own job instead of placing the same keyword list everywhere.
Choose headings for the reader’s task
For a tutorial, make the H1 state the problem or outcome. Use H2 headings for meaningful stages and H3 headings when a stage has distinct subsections. For a service page, major sections might explain the work, the process, and common questions. For a product category, the main heading identifies the category and supporting sections can explain selection or care.
A heading should describe the section that follows. “How to measure head size” is more helpful than “Features” when that is what the paragraph actually explains. Avoid promising a comparison or result the section does not contain.
Read the headings as a list, without the paragraphs. Can someone infer the page’s structure? Are two neighboring headings indistinguishable? Do titles such as “Delivery times” remain understandable outside the immediate visual context?
Separate semantics from presentation
A common mistake is selecting H4 because it has the desired font size. The level represents the role in the document, while CSS controls size, spacing, and color. Use the appropriate semantic level and style it to match the design.
The reverse mistake is making a large bold paragraph look like a heading while leaving it as a paragraph in HTML. If it introduces a genuine section, use a heading element so the structure is available to navigation tools. Decorative labels and every piece of emphasized text do not need heading tags.
Repeated components deserve attention. Sidebars, navigation, footers, and cards can introduce headings into the final document. Evaluate their roles in the whole page instead of automatically removing useful semantics or treating every label as an H2.
A practical inspection workflow
- View the published page and confirm that the main topic is visible and accurate.
- Inspect the final HTML with browser developer tools, including changes made by templates or client-side code.
- List H1–H6 in document order and check the nesting of major sections and subsections.
- Review headings without their surrounding paragraphs to identify vague or duplicated wording.
- Test at mobile sizes and increased zoom; where possible, navigate with a screen reader.
- After changing a shared template, repeat the inspection on an article, a service page, and a category.
Automated checks can flag surprising levels, but they cannot decide whether a section delivers on its heading. Combine code inspection with editorial review.
Common errors to avoid
- Repeating a target search phrase in every heading instead of naming distinct sections.
- Choosing levels based on appearance rather than the relationship between topics.
- Using a heading for a price, icon, or decorative element merely to get a style.
- Creating many empty subsections with no useful content.
- Letting shared widgets add unexpected top-level headings to every page.
- Assuming a change to H1 alone guarantees improved rankings.
Start with the reader’s question, outline the answer, and mark the final structure with the appropriate elements. Then inspect the rendered page rather than relying solely on editor settings.
Russian source: https://morlix.ru/blog/zagolovki-h1-h6-kak-vystroit-strukturu-stranitsy
Top comments (0)