Use HTML headings to organize a page into a clear hierarchy, starting with an <h1> for its main subject and using <h2> through <h6> for progressively nested sections. Choose each heading for the structure and meaning of the content that follows, not merely to make text look larger or bolder.
What HTML headings do
HTML heading elements identify the titles of a page and its sections. They give browsers, assistive technologies, search engines, and people scanning the page information about how its content is organized. A heading is therefore more than a visual label: it expresses a relationship between a section and the material beneath it.
Browsers usually display headings in bold text at different sizes by default, but those appearances come from browser styling. The HTML element supplies the structure; CSS controls its presentation. You can make an <h2> look smaller than an <h3> without changing the underlying order, though matching their visual appearance to their structural roles can make the page easier to follow.
Headings are useful in many kinds of content, including articles, reports, instructions, and course materials. A reader may scan them to decide where to begin, while a screen-reader user may navigate from heading to heading rather than listen to every paragraph. Clear, descriptive headings help both readers understand what the page covers.
How the heading hierarchy works
HTML provides six heading levels, from <h1>, the highest level, to <h6>, the lowest. These levels are not a ranking of importance in a general sense, nor are they a set of font sizes. They describe the nesting of topics: a section heading introduces a topic, and a lower-level heading can introduce a subsection within it.
For example, an article about preparing for an exam might use one <h1> for the article title, <h2> headings for major subjects such as “Plan a study schedule” and “Review course materials,” and an <h3> for a smaller topic within one of those sections, such as “Break the material into sessions.” The subsection belongs under the relevant <h2>, rather than sitting beside unrelated major sections.
Think of the outline as a tree. A heading introduces a branch; headings at a lower level divide that branch into smaller parts. You can use more than one heading at a given level when there are several sections at the same depth. The goal is a coherent outline, not a rigid sequence in which every level must appear.
How to choose the right level
Choose a heading level based on where the section belongs in the page outline. Ask whether it starts a major section, a subsection of that section, or a more deeply nested topic. Then select the corresponding level, regardless of the size you want the text to appear.
- Use
<h1>for the page’s main subject. In a typical article, it is the article title. - Use
<h2>for major sections that sit directly beneath the page’s main subject. - Use
<h3>for a section within an<h2>section. - Use
<h4>through<h6>only when the content genuinely needs further levels of subdivision.
Do not pick a level just because its default appearance suits your design. If a section title needs a different size, use CSS to adjust it while keeping the correct HTML heading level. Conversely, styling ordinary text to resemble a heading does not give it the same structural meaning as an actual heading element.
Writing useful heading text
A good heading tells readers what the following section is about. Prefer specific, concise wording over vague labels. “Compare the available study methods” gives a reader more information than “More information,” while “Common causes of formatting problems” is more informative than “Problems.” A heading should set an accurate expectation for the content below it.
Headings can also make a page easier to scan. A reader looking for instructions, a definition, or a particular comparison can use the wording to find the relevant section. Keep the labels understandable on their own, since readers may encounter a heading through a navigation feature or a page outline without first reading the preceding paragraphs.
Use natural language rather than forcing keywords into every heading. If the page is about HTML headings, a section called “How the heading hierarchy works” is clear and relevant. Repeating the same search phrase in every section makes the outline less helpful and can make the writing feel awkward. Headings should describe the actual content, not promise material the section does not provide.
Headings, accessibility, and navigation
Correct heading structure helps people using assistive technology understand and navigate a page. Screen readers commonly provide ways to move through headings or display them as an outline. When headings are nested logically and use meaningful labels, that outline can help a reader understand where they are and jump to a useful section.
Visual formatting alone is not a dependable substitute. A paragraph made large and bold with CSS may look like a title, but it remains a paragraph in the document structure. Use a heading element when the text actually introduces a section. Likewise, do not use a heading simply to make a sentence stand out; reserve headings for section titles and use suitable styling for emphasis elsewhere.
Headings are one part of accessible content, not a guarantee that a page is accessible by themselves. Clear writing, readable contrast, sensible page structure, and other accessibility practices also matter. A well-organized heading outline supports navigation, but it cannot compensate for unclear content or unrelated structural problems.
Headings and visual design
HTML and CSS have separate jobs: HTML communicates what content is, while CSS controls how it looks. This separation lets a designer change the typography, spacing, or color of headings without changing their role in the outline. A smaller-looking heading can be structurally higher than a larger-looking heading if the page design calls for it.
For instance, a site may style all major section headings with the same typeface and color, while giving subsection headings a more compact appearance. That is fine if the HTML still reflects the content hierarchy. Avoid selecting heading tags as a shortcut for a particular visual style and then using them in an order that makes the outline confusing.
Headings may also need to fit within a content-management system or page template. Some templates provide a visible page title automatically, while others expect the author to supply one. Check the actual page structure rather than assuming what the system generates. The important aim is a useful hierarchy for the rendered page, not simply a preferred tag count.
Common heading mistakes
Several habits make heading structure less clear. They are easy to correct once you separate semantic structure from styling:
- Choosing tags for size: Do not use an
<h4>merely because it looks like the size you want. Keep the right level and style it with CSS. - Skipping levels without a reason: Moving directly from an
<h2>to an<h4>can make the outline appear to omit a level. Use a nested level when the content has a genuine subsection, and keep the structure easy to understand. - Using headings for decoration: A bold introduction, callout, or emphasized phrase is not automatically a section title. Use an appropriate element for its purpose.
- Writing vague labels: Headings such as “Overview,” “Details,” or “Other” may be appropriate in context, but several vague labels in a row make it harder to scan.
- Putting unrelated content under a heading: A heading should describe the section that follows. If the topic changes, add a new heading at the appropriate level.
- Assuming there must be only one heading element of each level: Multiple
<h2>or<h3>elements are normal when they introduce separate sections at the same depth.
A common misconception is that every web page must have exactly one <h1> as a universal technical rule. A single main heading is a clear and practical choice for many pages, but document structures can vary, including pages with separate sections. Follow the design system and the page’s actual structure, and make sure the main subject and section relationships remain understandable.
A practical way to check a page
Before publishing, review the page as an outline rather than only looking at its visual design. You can do this by reading each heading in order and asking whether the sequence describes the page’s topics accurately.
- Identify the page’s main subject and confirm that its title is represented appropriately.
- List the major sections beneath it, then place subsections under the major section they belong to.
- Check that the level of each heading matches its place in the outline.
- Read each heading by itself and see whether it clearly signals the content that follows.
- Inspect the rendered page to confirm the visual design still makes the hierarchy easy to perceive.
- If possible, test heading navigation with accessibility tools or a screen reader, and review the page against your organization’s accessibility guidance.
This check often reveals problems that are hard to notice when reading the page straight through. For example, a heading may look attractive but belong in a different part of the outline, or a section may contain several distinct topics that deserve separate labels.
Frequently Asked Questions
Do HTML headings have to go in order?
Use levels that reflect the nesting of the content. A clear outline usually proceeds from a higher-level section to its nested subsections without skipping levels arbitrarily. You do not need to use every heading level on a page.
Can I have more than one h1?
HTML allows documents to contain multiple headings at the highest level, but many page designs use one clear main heading because it makes the page outline straightforward. Follow the structure of the page and the conventions of its publishing system.
Can I use an h3 just because it looks the right size?
No. Choose the element according to the section’s position in the outline, then use CSS to get the appearance you want. A heading’s visual size does not determine its structural level.
Are headings important for screen readers?
Yes. Screen readers can use heading structure to help people navigate and understand a page. Meaningful labels and a logical hierarchy make that navigation more useful, though headings alone do not make a page fully accessible.
Should every section have a heading?
Not necessarily. Give a section a heading when it introduces a distinct topic or helps readers navigate the content. A short transition or a brief related paragraph may not need its own heading.
In brief
Use HTML headings to express the real structure of your content: a main subject, major sections, and any nested subsections. Write clear labels, choose levels by hierarchy rather than appearance, and use CSS for visual changes. A page with a coherent heading outline is easier to scan, understand, and navigate.