# Article lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all articles.

> Canonical HTML version: https://rocketvalidator.com/html-validation/article-lacks-heading-consider-using-h2-h6-elements-to-add-identifying-headings-to-all-articles
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `<article>` element is meant to wrap independent, self-contained content such as blog posts, news stories, forum posts, product cards, or user comments. The W3C validator raises this warning because an `<article>` without a heading has no programmatic label, making it harder for users—especially those relying on screen readers—to understand what the article is about and to navigate between multiple articles on a page.

Screen readers often present a list of landmarks and headings to help users jump through a page's structure. When an `<article>` has no heading, it appears as an unlabeled region, which is confusing and defeats the purpose of using semantic HTML. A heading inside the `<article>` acts as its identifying title, giving both sighted users and assistive technology a clear summary of the content that follows.

This is a warning rather than a hard validation error, but it signals a real accessibility and usability concern. In nearly all cases, every `<article>` should contain a heading. The heading level you choose should fit logically within the document's heading hierarchy—typically `<h2>` if the `<article>` sits directly under the page's main `<h1>`, or `<h3>` if it's nested inside a section that already uses `<h2>`.

## How to fix it

1. **Add a heading element** (`<h2>`–`<h6>`) as one of the first children inside each `<article>`.
2. **Choose the correct heading level** based on the document outline. Don't skip levels (e.g., jumping from `<h1>` to `<h4>`).
3. **Make the heading descriptive.** It should clearly summarize the article's content.

If your design doesn't visually display a heading, you can use CSS to visually hide it while keeping it accessible to screen readers (see the examples below).

## Examples

### ❌ Article without a heading (triggers the warning)

```html
<h1>Latest news</h1>
<article>
  <p>Our new product launched today with great success.</p>
</article>
<article>
  <p>We are hiring frontend developers. Apply now!</p>
</article>
```

Each `<article>` here has no heading, so assistive technologies cannot identify them, and the validator raises a warning.

### ✅ Articles with proper headings

```html
<h1>Latest news</h1>
<article>
  <h2>Product launch a success</h2>
  <p>Our new product launched today with great success.</p>
</article>
<article>
  <h2>We're hiring frontend developers</h2>
  <p>We are hiring frontend developers. Apply now!</p>
</article>
```

### ✅ Nested articles with correct heading hierarchy

```html
<h1>Our blog</h1>
<article>
  <h2>How to validate accessibility</h2>
  <p>Use automated tools for an in-depth scan of your site.</p>
  <section>
    <h3>Comments</h3>
    <article>
      <h4>Comment by Alex</h4>
      <p>Great article, very helpful!</p>
    </article>
  </section>
</article>
```

When articles are nested (e.g., comments inside a blog post), each level gets the next heading level to maintain a logical outline.

### ✅ Visually hidden heading for design flexibility

If your design doesn't call for a visible heading but you still need one for accessibility, use a CSS utility class to hide it visually while keeping it in the accessibility tree:

```html
<style>
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>

<article>
  <h2 class="visually-hidden">Featured promotion</h2>
  <p>Save 20% on all items this weekend only!</p>
</article>
```

This approach satisfies both the validator and assistive technologies without affecting your visual layout. Avoid using `display: none` or `visibility: hidden`, as those also hide the heading from screen readers.