HTML Headings (H1–H6)

HTML headings (H1–H6) are the six tags — from <h1> to <h6> — that create a hierarchical structure for the content of a web page. H1 marks the most important, top-level title of the document, while lower levels (H2, H3 …) define progressively more detailed subsections. Crucially, they are not just visual formatting: headings carry semantic meaning that describes what a given part of the page is about.

How HTML headings work

Headings act like a table of contents woven into the HTML code. Browsers render them at decreasing font sizes by default, but their structural role matters far more. Search engine crawlers analyze the order and nesting of headings to understand the topical hierarchy. A correct structure means H1 is followed by H2 and only then H3 — you should never skip levels downward (for example jumping from H2 to H4) merely to obtain a smaller font; that is what CSS is for.

Headings are also fundamental to digital accessibility. People using screen readers navigate a page precisely through its headings, jumping between sections with a keyboard shortcut. A chaotic or empty hierarchy makes this navigation impossible, which violates the WCAG guidelines.

Practical application

When building a page or blog post, the H1 should contain the primary keyword and clearly communicate the topic — most often it is the article title. H2 subheadings split the content into logical blocks (for example "How it works", "Use cases"), and H3 refines them where needed. This structure makes the text easy to scan and improves the chance of earning featured snippets in Google.

In content management systems such as WordPress, the editor often assigns the H1 automatically to the post title — it is worth verifying this to avoid two competing H1s on a single page. A good practice is to audit heading hierarchy with on-page analysis tools, which flag missing H1s, skipped levels and empty headings before they cause problems.