Make sure bold, italic text and font-size is not used to style <p> elements as a heading

The p-as-heading rule checks that <p> elements are not misused as headings by applying visual styles like bold, italic, or large font sizes. Headings should always be marked using h1 through h6 tags to provide meaningful structure for assistive technologies.

What is being tested?

This rule checks whether:

• <p> tags are being used purely for styling headings.
• Proper semantic heading tags (h1–h6) are used to mark sections of the page.

Why it matters

Sighted users can visually scan pages using font size and styling, but screen reader users rely on semantic headings to navigate content efficiently. Proper headings:

• Improve navigation for screen reader users.
• Provide an outline of the page’s structure.
• Help search engines understand and rank content better.

How to fix the problem

• Replace styled <p> elements with appropriate heading elements (<h1>–<h6>).
• Use CSS to style headings instead of misusing paragraphs for visual effects.
• Follow a clear hierarchy: h1 for main titles, h2 for subsections, h3 and lower for nested sections.

Correct example

<h1>Welcome to Our Site</h1>
<h2>About Us</h2>
<p>We offer great services.</p>

Incorrect example

<p style="font-size: 24px; font-weight: bold;">Welcome to Our Site</p>
<p style="font-size: 20px; font-weight: bold;">About Us</p>

Best practices

• Start the main content with an <h1>.
• Use subheadings (<h2>, <h3>, etc.) in order of hierarchy.
• Reserve <p> only for paragraphs, not for section titles.