Heading Misuse

Headings play an important role in organizing content on a webpage. They help make information easier to understand and navigate. When creating web content, it is essential to use headings correctly, as this improves accessibility for all users, including those with disabilities.

Empty Headings

Empty headings can confuse users, especially those who rely on assistive technologies like screen readers. Screen readers announce headings to help users understand the structure of the page. When there is an empty heading, users may hear a pause or an announcement indicating a heading with no content. This can lead to frustration and disorientation, as they expect to find relevant information associated with that heading.

Furthermore, empty headings disrupt the logical flow of content. When users navigate a webpage, whether through sight or audio, they rely on headings to understand what information is available and where to find it. If there are several empty headings, it can create a misleading structure, making it difficult for users to locate the content they need.

An empty heading could look like this:

<h2></h2>

Similarly, if a heading contains only a single element, such as an image, the alt text or another text equivalent must not be empty. In such cases, the heading would also be considered empty. However, if you have an alt text on the image, that becomes the text of the heading.

<h2>
  <img src="contact.png" alt="">
</h2>

<h2>
  <img src="contact.png" alt="Contact Us">
</h2>

Headings for Emphasis

Do not use heading tags solely for visual emphasis. Headings must define the document's structural outline, not just style text. Using a heading for emphasis creates a misleading and non-semantic page structure.

For highlighting content, use appropriate tags like <strong> or <em>, or apply styling with CSS. For example. an <h3> element is incorrectly used here to emphasize an announcement, creating a false structural level. As a contrast, a correct implantation would place the announcement in a paragraph, and wrapped with a <strong> element to convey importance without disrupting the document's heading hierarchy.

<h4>Office Hours</h4>
<h5>The Office of Undergraduate Admission will close early on July 3rd in observance of the 4th of July holiday.</h5>

<h4>Office Hours</4>
<p><strong>The Office of Undergraduate Admission will close early on July 3rd in observance of the 4th of July holiday.</strong></p>

As you can see, these two implementations look very similar, but structurally they are very different.