Heading Hierarchy
The heading hierarchy is the logical structure of a text via graded heading levels, in HTML code from H1 (main heading) down to H6. It arranges content into chapters and sub-chapters so that both people and machines can grasp a page's structure at a glance. A clean hierarchy signals which statement is superordinate and which one explains it.
Why the hierarchy matters
Headings are the skeleton of your page. They tell every reader and every program what it's about and how the parts connect. A person skims bold subheadings to quickly find the right spot. A search engine or an AI assistant reads the same headings to classify the topic and select the fitting section as an answer. If the structure is missing, the text feels like a wall of paragraphs without signposts. Whoever structures clearly makes it easy for Google, ChatGPT and the like to understand the content and recommend it. The heading hierarchy is thus not a cosmetic detail but a cornerstone of your page being found and cited.
How it works technically
In HTML there are six levels: H1 to H6. The H1 is the page's title and appears exactly once, like the title of a book. Below it, H2 headings structure the main chapters, H3 the sub-points within a chapter, and so on. The order is important: an H2 is followed by an H3, not directly by an H4. You must not skip this gradation, otherwise the logical chain breaks. The levels are not a styling device for large or small type, CSS is responsible for that. They describe solely the content's rank order. Search engine crawlers and AI systems read exactly this structure from the source code, regardless of how the text looks visually.
Common mistakes
The classic mistake is the multiple H1: some pages pack in several large titles for visual reasons and thereby confuse the analysis. Just as harmful is skipping levels, for example from H2 straight to H4, because a subheading was supposed to look smaller. Another classic: headings are only bold-formatted running text instead of real H tags, so machines don't recognize the structure at all. Meaningless titles like "More on this" also help no one. A good heading names concretely what's in the following section. Check your page with a structure tool: if the sequence of headings read on its own yields a sensible table of contents, the hierarchy is clean.
Relation to AI recommendations
AI assistants and generative search systems break web pages into sensible sections before they formulate an answer. Clear headings give them the dividing lines for these chunks. If a precise question or an unambiguous keyword stands above a paragraph as an H2 or H3, the system can pick out this block specifically as an answer to a user question and name your brand as a source. A well-structured page thus increases the chance of appearing in AI answers and featured snippets. For AI visibility the rule is: structure is citability. The easier it is for a model to find and attribute the fitting section, the more likely your content gets picked up instead of a competitor's.
Example
Imagine a tax advisor's guide on the income tax return. The H1 reads "Income tax return: the complete guide". Below it, H2 headings structure the main chapters: "Which documents do you need?", "Deadlines at a glance", "Common mistakes". Within the deadlines chapter, H3 headings lead the details: "Deadline for mandatory filing", "Deadline with a tax advisor". A user asks an AI: "By when do I have to submit my tax return?" The model finds the fitting paragraph immediately via the clear H3 and cites the firm. Without this structure the answer would stay hidden in a block of text.
Common questions
May a page have several H1 headings?
Best not. One H1 per page is considered the cleanest solution, because it names the one main topic unambiguously. Several H1s are technically allowed but make it harder for search engines and AI systems to recognize the central content. Use H2 and lower for further sections.
Does font size influence the hierarchy?
No. You control the visual size with CSS, and it is freely selectable. The hierarchy results solely from the H tags in the source code. An H3 can look visually larger than an H2, yet for machines it remains the subordinate level. Rank and appearance are two separate things.