Compatibility:

WebSite X5 Evo and Pro from v.2025.1

A well-known and effective practice for improving readability is to organize text into paragraphs, accompanied by headings and subheadings that divide content into well-defined sections. This approach prevents the page from appearing as a solid block of text that discourages readers and, as a result, helps enhance usability, making information easier to scan. The strategic use of headings is also crucial for both accessibility and search engine optimization (SEO), as it improves comprehension for users who rely on screen readers and for search engine indexing algorithms.


In this guide, we will explore how to use headings effectively. Specifically, we will cover:


What are headings

Headings are HTML elements used to define titles and subtitles within a web page, organizing content into a clearly structured hierarchy. They range from the highest level, represented by the <h1> tag, to the lowest, <h6>. As we will see later, each level serves a specific function and must be used consistently to reflect the relationship between different sections of the page.


This hierarchy is not just a visual convention but also a semantic structure that is fundamental to the web. Headings not only enhance content presentation but also communicate the logical organization of a page to search engines and assistive tools (such as screen readers). For example, a screen reader allows users to quickly jump from one heading to another to explore the content, making headings an essential tool for accessibility.


WCAG guidelines

The Web Content Accessibility Guidelines (WCAG), the international standard for web accessibility, place significant emphasis on the correct use of headings to ensure that content is accessible to all users, including those with disabilities. Among the WCAG principles, the most relevant guidelines for the use of headings fall under the “Perceivable” and “Understandable” principles, which require a clear and logical semantic structure.


The main WCAG success criteria related to the use of headings are:

  • Criterion 1.3.1 - Info and relationships (Level A)

States that information must be organized in such a way that the relationships between different content parts can be understood by tools like screen readers. This is why headings should not be used for aesthetic reasons but consistently, so as to correctly represent the hierarchy of content.

  • Criterion 2.4.1 - Bypass blocks (Level A)

Requires that users should be able to navigate content quickly and smoothly. Headings are essential for this, as they allow navigation by sections using screen readers or quick jump functions (e.g., "Go to section"). However, for this to work effectively, titles and subtitles must divide the page’s information into meaningful blocks.

  • Criterion 2.4.6 - Headings and labels (Level AA)

Requires that headings and labels be descriptive, providing a clear and specific indication of the content they refer to. This means that headings must clearly explain the content of the section they represent, avoiding ambiguity or generic descriptions.

  • Criterion 2.4.10 - Section headings (Level AAA)

Emphasizes the importance of a consistent page structure that facilitates understanding and navigation.


How many and what types of headings are there?

As previously mentioned, headings are defined by six distinct HTML tags ranging from the most important <h1> to the least relevant <h6>, each serving a specific function within the hierarchical structure of a webpage. These tags are used to divide content into sections and subsections, making the page more scannable and easier to understand. Let’s examine them in detail:

  • <h1>: This is the main title of the page. Each page should have only one <h1>, which represents the main topic or theme of the content. An example of an <h1> could be an article title, such as "Guide to Web Accessibility".
  • <h2>: Used for the main section headings under the primary topic. Each <h2> introduces a new section that explores a specific aspect of the subject. Examples of <h2> could be sections like "Why Accessibility is Important" and "WCAG Guidelines".
  • <h3>: Used for subtitles within a section defined by an <h2>. It helps further break down content into subtopics. For example, within the "Why Accessibility is Important" section, a subsection could be "Benefits for Users".
  • <h4>, <h5>, and <h6>: These tags are used for additional subdivisions of content, though they are less common than the first three. They can be used for detailed subsection titles or for complex content requiring a deeper structure.


How to use headings correctly

Using headings correctly is essential to ensure that the page is well-structured, accessible, and easy to navigate. By following a few simple guidelines, it is possible to create a hierarchical structure that enhances the user experience and makes content accessible for those using assistive technologies. Here are the main rules to follow:

  1. Follow logical hierarchy:

    Use headings in a logical order. Do not skip levels: for example, do not jump directly from an <h1> to an <h3> without an intermediate <h2>. Each level should represent a logical relationship: <h2> is subordinate to <h1>, <h3> to <h2>, and so on.

  2. Only one <h1> per page:

    Each page should have a single <h1> to ensure semantic clarity. However, in some cases, using multiple <h1> elements can be correct, such as in one-page websites. In a single-page site, different sections coexist, each covering a specific topic, so having multiple <h1> elements may be appropriate. From an SEO perspective, Google has clarified that if multiple <h1> elements make sense within the structure of the page, they are acceptable.

  3. Be descriptive:

    Each heading should accurately reflect the content of the section. For example, an <h2> titled "Benefits of SEO" should introduce a section that discusses those benefits.

  4. Avoid empty or unnecessary headings:

    Do not use heading tags purely for styling purposes (e.g., to enlarge or style text). For visual styling, use CSS instead.

  5. Headings for easy navigation:

    Design headings with screen reader users in mind, as they often navigate by jumping between headings to move quickly between sections.


An example of a properly structured heading hierarchy:

<h1>Guide to Web Accessibility</h1>
  <h2>Why Accessibility is Important</h2>
    <h3>Benefits for Users</h3>
    <h3>Impact on SEO</h3>
  <h2>WCAG Guidelines</h2>
    <h3>Fundamental Principles</h3>
    <h3>Compliance Criteria</h3>
  <h2>Conclusion</h2>

<h1> and <title>: differences and uses

It often happens that the <h1> heading and the <title> tag are misunderstood and used interchangeably. In reality, although both play an important role in the structure and comprehension of a page, they have distinct functions and uses.


The <h1> tag represents the main title of the page within the visible content. It serves to identify the main topic of the page. It is a reference point for users and those using screen readers, as it provides a clear indication of what the page is about.


The <title> tag, on the other hand, is used in the <head> section to define the page title that appears in the browser’s title bar, in open tabs, and in search engine results. It is not visible within the page content but plays a fundamental role in SEO optimization and user orientation. It should be unique for each page and provide a brief but clear description of the content.


Both tags work together to enhance the clarity and organization of the page: the <h1> helps users and assistive technologies quickly understand the page's content, while the <title> improves the page’s visibility in browsers and search results.


Headings and SEO

Headings are not only a valuable tool for improving accessibility and usability, but while they do not serve as a direct ranking factor, they play an important role in SEO optimization by enhancing the structure and comprehension of content for search engines. In fact, Google no longer assigns a direct "weight" to heading tags as it did in the past, but it uses the information within headings to interpret the context and organization of a page.


According to Google, headings significantly contribute to:

  • Improving user experience, a crucial factor considered by Google. By helping users quickly find the information they need, headings encourage longer page visits and reduce bounce rates.
  • Facilitating search engine comprehension of the page’s content.
  • Optimizing content. Headings can include relevant keywords and be used to build featured snippets and other advanced search results (e.g., highlighted results).


In summary, a strategic and correct use of headings helps create more readable, well-structured, and optimized pages, leading to positive effects on SEO and indirect ranking improvements in search results.


Managing headings in WebSite X5

WebSite X5 integrates all the necessary tools to allow you to correctly manage headings while also generating semantic code, as required by accessibility standards.


In particular, while working on your project, you can define the styles for titles and texts and use them to correctly set up headings. To do this, you can follow the guides How to define and apply a style to website texts? and How to manage heading tags?


By following the best practices discussed in this guide, you can structure your pages effectively, improving their readability and accessibility.


All your choices will be automatically interpreted and translated by WebSite X5 into semantic HTML code, in compliance with international standards. For example, Criterion 1.3.1 - Information and Relationships (Level A) and Criterion 2.4.1 - Bypass Blocks (Level A), mentioned earlier, are handled directly by the software, without requiring manual intervention (see: Accessibility criteria implemented in WebSite X5).


By correctly using headings and taking advantage of WebSite X5's integrated functionalities, you can create accessible, well-structured, and easily navigable web pages for both users and search engines.


Tools for evaluating headings

There are numerous tools available to assess the accessibility of headings on a web page. These tools help verify whether the heading structure is consistent, adheres to semantic hierarchy, and ensures accessibility for all users, including those who rely on screen readers. Here are some of the most useful ones:

  • WAVE (Web Accessibility Evaluation Tool): Provides a detailed analysis of page elements, including headings. It is available as a browser extension for Chrome and Firefox.
  • Axe Accessibility Checker: A Chrome and Firefox extension that evaluates page accessibility, including headings. It identifies semantic structure issues and provides improvement suggestions.
  • Lighthouse: A tool integrated into Chrome DevTools that analyzes a page’s accessibility and SEO. It checks whether headings are used correctly and contribute to a well-structured page.
  • HeadingsMap: A Firefox extension that provides a visual map of the page’s headings. It allows users to quickly see the heading hierarchy and identify any inconsistencies.