Implicit Headings

Implicit headings are not clearly marked in the code of a webpage. They can occur when a section of text is styled to look like a heading—such as using larger font sizes or bold text—but the underlying HTML does not use heading tags (like <h1>, <h2>, etc.). This can confuse assistive technologies that rely on these tags to navigate the content. For instance, if a user is navigating a page with a screen reader, they expect to find clear headings to help them understand the structure of the information. If the headings are implicit, the user may miss critical sections of content or have difficulty understanding the layout of the page.

Correct Implementation

To create an accessible and understandable structure for your web content, always use the appropriate heading tags. Start with <h1> for the main title of the page. Use <h2> for major section titles, <h3> for subsections, and so forth. This clear hierarchy helps both users and search engines understand the importance of different sections on your webpage.

Incorrect Implementation

An implicit heading is a non-semantic element, such as a paragraph (<p>), styled to visually resemble a heading. While it may look correct, it is not programmatically identified as a heading and provides no structural value.

For example, this <p> tag is styled to look like a heading but is ignored by assistive technology.

<p style="font-weight: bold; font-size: 120%;>Section Title</p>
<p>This is the content of the section.</p>

Always use true heading elements (<h1> to <h6>) to define the structure of your content.