Search code examples
htmlw3c-validation

w3c html validation error - Section lacks heading: where h2 available in nested element


Am trying to write valid html by following w3c standards. But getting warning on below code as Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. But I have used <h2> in my section, then why am I getting this and how can I overcome?

<section id="section1">
  <article class="container">
    <h2>Some heading</h2>
  </article>
</section>

Solution

  • Your <article> contains a heading, but your <section> does not, because your <h2> is associated with your <article>, not your <section>.

    If your <section> is just a generic container and not an actual distinct section of articles in your page, it should be a <div> instead, or a <main> if it's the only container in your page (but judging by the section ID it's probably safe to assume it isn't). Alternatively, your <article> should be a <div> instead as "container" is a rather oddly generic class name for such an element.

    Note that sections missing headers is not an error but a warning; you are free to leave your <section> without a heading, it will just look strange in the document outline. Nevertheless, the warning is there to indicate that you may have either left out a heading, or you may be misusing sectioning elements.