English translation of a Persian article from the WebTarget archive. The date above is the original publication date. Some advice, especially technical details, may be outdated.
Why h1, h2, h3, h4, h5, and h6 matter
Many web designers think that following standards is simply a matter of writing valid HTML and CSS. But good page design also depends on how we organise the information those languages present.
Designers are familiar with the role of headings in search optimisation. Their role in laying out information and guiding readers deserves just as much attention.
HTML provides six heading levels, from h1 through
h6. These levels describe the hierarchy of the
content, with h1 at the top.
Every page can have a clear outline based on its main topic and its sections. Headings express that outline. Used properly, they help readers and search engines understand the relationships between parts of the page.
Newspapers and magazines offer familiar examples. Headlines, subheadings, font weights, colours, and columns guide readers through material with different levels of importance. You have probably scanned just the headlines of a page, or chosen to read the passages that stood out visually.
Organising content by its hierarchy makes a page easier and more enjoyable to read. An earlier article discussed the HTML document tree (in Persian). Here we look at the corresponding tree of heading levels within a page.
The diagrams illustrate this hierarchy. The tree shows the relationship between heading levels, while the second image shows how sections of a sample page can be organised using those levels.
Think of the outline as a series of nested sections. The main
heading introduces the page, and lower-level headings introduce
its subdivisions. Sections at the same level use the same
heading level, and each can have its own subsections. The
original article recommends one
h1 as the page’s overall heading; the key is to
keep the resulting structure understandable.
Mistakes to avoid when using headings
CSS gives us many ways to change an element’s appearance, but appearance should not replace meaning. Styling a paragraph to look like a heading does not make it a heading. If the stylesheet is unavailable, or content is read through a text-based interface, that visual distinction can disappear.
A styled p also does not provide the same
structural information as a heading element. Choose the
appropriate HTML element first, then use CSS to control how it
looks.
An inconsistent heading hierarchy can confuse readers and obscure the main subject of the page. Keep sections and subsections in a logical order, so a topic of minor importance is not presented as the page’s central subject.
Use heading styles consistently throughout a site. The main heading should be clearly distinguishable from subsection headings. Giving every level exactly the same appearance can make the structure harder to scan. Editorial clarification: the original article’s suggestion that heading styling alone causes search penalties should not be treated as a current ranking rule. Focus on meaningful structure and readable presentation.
After reading this article, review your own website’s content structure and heading hierarchy.