HTML Headings: Build a Useful Article Structure

Separate document meaning from visual size

Heading elements describe relationships within the content. Their font size, colour and box treatment come from styling. A primary article heading can remain the main heading while appearing smaller on a phone; a bold card label does not automatically need to become a major heading. W3C guidance recommends a logically nested structure. Review the meaning first, then choose visual emphasis, so a boxy design does not turn every badge and sidebar label into a competing section.

Inventory the labels in an existing article. Classify each as the page subject, a main section, a subordinate explanation or decoration. An article about indexing might contain main sections for access and canonical selection, with response codes discussed under access. A numbered badge can accompany that section without adding another heading. This classification gives a developer specific markup decisions rather than a vague instruction to make the SEO headings proper.

Draft an outline before editing markup

Write the proposed heading sequence in plain text. Each line should identify the question or decision answered underneath it. Avoid repeated labels such as our expertise or final review when the article is actually explaining different procedures. An indexing outline could progress through confirming the URL, inspecting access, reviewing exclusions and checking the preferred destination. The structure should help someone choose the relevant part without reading every paragraph.

Compare the outline with the body. A section called verification must contain observable checks, not another introduction or sales invitation. If two headings contain the same advice, consolidate the explanation. If one heading contains several unrelated problems, divide it into meaningful subtopics. This editorial review can remove padding as well as improve markup. Do not add extra sections merely to create more places for a target phrase.

Keep supporting components in their place

A contact panel, related-reading list and contents navigation can remain recognisable components without interrupting the article reasoning. Their heading treatment should reflect their actual position and purpose. Avoid wrapping whole promotional paragraphs in heading tags to obtain large typography. Conversely, do not make a substantive heading an image whose text is unavailable as ordinary page content. Decide whether a callout supplements the current section or introduces a genuinely new subject.

Example: six boxes, four real sections

Imagine a guide with six visual boxes. Two boxes are implementation notes supporting the first major topic, while the other four contain separate decisions. Assigning an identical heading level to all six misrepresents the intended relationship. Group the supporting notes under the appropriate section and preserve their visual distinction with CSS. The resulting page can retain the same bold appearance while the outline becomes a more accurate account of the explanation.

Preserve complete titles on narrow screens

A two-line visual preference must not remove meaningful words. Check long real headlines, not just a short sample. Adjust font size, width and spacing where appropriate, and allow additional wrapping when the full title cannot fit readably. A fixed-height box or line-clamp can hide the final qualifier and change what the article appears to promise. Keeping the complete heading available is more important than making every title occupy identical physical space.

Validate structure and navigation

Read only the headings and ask whether they form a coherent progression. Then inspect the associated paragraphs for matching answers. Test contents links if the page provides them; each should target the intended section rather than an adjacent decorative label. Review the page with keyboard navigation and narrow-screen text presentation. Where assistive-technology testing is available, use heading navigation to check the result. A visual screenshot is useful, but it cannot by itself establish that the document hierarchy is meaningful.

Practical checklist

• Classify real headings and decorative labels.
• Review the plain-text outline.
• Consolidate overlapping sections.
• Test full titles and section anchors.

Frequently asked questions

Related Articles