p-as-heading

Use proper heading elements (<h1> to <h6>) instead of <p> elements for headings.

Description

Always use proper heading elements (<h1> to <h6>) instead of <p> elements styled to look like headings. Heading elements help define the structure and hierarchy of content on a webpage. Using <p> elements with bold, italics, or larger fonts to mimic headings does not provide the correct meaning to assistive technologies.

Example

The following example code uses <p> elements to make content look like a heading. Such practice break the p-as-heading rule. these Assistive technologies like screen readers don’t recognize such content as headings even with these styling elements.

<!-- Visually looks like a heading but lacks semantic meaning -->
<p class="heading" style="font-size: 2em; font-weight: bold;">Main Title</p>
<p class="subheading" style="font-size: 1.5em; font-weight: bold;">Subsection</p>

The following sample code corrects the issue in the earlier example by using proper <h1> and <h2> tags.

<!-- Proper semantic structure with actual heading elements -->
<h1>Main Title</h1>
<h2>Subsection</h2>

How to fix?

Replace <p> elements used as headings with appropriate heading tags:

• Use <h1>, <h2>, <h3>, etc., according to the content’s hierarchy.
• Style your headings with CSS instead of misusing <p> elements to maintain both style and accessibility.

Reference

• Info and Relationships (Level A)
• Technique G141: Organizing a page using headings