W3C HTML Validation Error - Section Lacks Heading. Consider Using H2-H6 Elements to Add Identifying Headings to All Sections

w3c html validation error - Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections

Either:

1. Add a heading (h1, ..., h6) tag to your section element.
2. Replace your section element with a div element.
3. Ignore the warning. The message you're seeing is a non-normative usage recommendation, as per the HTML5 spec (highlighting mine):

   The theme of each section should be identified, typically by
   including a heading (h1-h6 element) as a child of the section
   element.

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

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.

W3C validation generating error

The answer is in your question. I will quote you: "I want to build my template on HTML5 tags and the code has no scope of putting up the headings because thats not required."

This is one of the biggest problems in the software industry. It's called Scope Creep.
Basically, if something is not within the scope of requirements, you should avoid dealing with it unless absolutely necessary. Sometimes it's hard to bite the bullet though I know.

nav element with no heading -- document outline

This is because the nav element is defined within the Sections section of the HTML5 specification and sections are expected to have headings.

As for the document outline:

The outline for a sectioning content element or a sectioning root element consists of a list of one or more potentially nested sections. A section is a container that corresponds to some nodes in the original DOM tree. Each section can have one heading associated with it, and can contain any number of further nested sections.

— 4.3.10.1 Creating an outline - HTML5 Specification

Note the word can - they aren't required. If they were required, the validator would be throwing warnings and errors, not somewhat-friendly notes to remind you that a heading is missing.

---

So to answer your questions:

Why is the outline including this?

It's just a friendly reminder that a heading isn't present. Just in case you were expecting a heading to be present but you'd forgotten to add one, for instance.

What is the proper way to add a heading to a nav element?

That entirely depends on what you're wanting to achieve. The HTML5 specification itself gives the following example:

<nav>
  <h1>Navigation</h1>
  <ul>...</ul>
</nav>

Is it necessary to add a heading to a nav element? because it doesn't seem like a common practice on most websites.

Not at all. It's entirely optional. Some may argue that it'd be good for SEO purposes to add a heading to all sections, but that's entirely up to you. You can always hide the heading with CSS if you do want to add them but don't want to display them.

---

Related Topics