<span> inside <h> tags, validation error

Question

Have validation ERROR, have no idea why it happens, can any one help me fix it?

Line 317, Column 26: Element h3 not allowed as child of element span in this context. (Suppressing further errors from this subtree.)

<h3 class="menuHT"><span class="sdt_link">Home</span></h3>

Content model for element span: Phrasing content.

<ul id="sdt_menu" class="sdt_menu">
    <li>
     <a href="home.html">
      <img src="images/imagesPop/2.jpg" alt=" Woman with child walking up the hill">
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <h3 class="menuHT"><span class="sdt_link">Home</span></h3>
       <h6 class="menuHB"><span class="sdt_descr">Main page</span></h6>
      </span>
     </a>
    </li>
    <li>
     <a href="about.html">
      <img src="images/imagesPop/6.jpg" alt="The old image of Lulworth tower">
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <h4 class="menuHT"><span class="sdt_link">About</span></h4>
       <h6 class="menuHB"><span class="sdt_descr">General Info.</span></h6>
      </span>
     </a>
     <div class="sdt_box">
      <a href="home.html">blablabla</a>
      <a href="home.html#AboutSection">Shopping Cart</a>
      <a href="#">Interactive Maps</a>
     </div>
    </li>
    <li>
     <a href="attractions.html">
      <img src="images/imagesPop/1.jpg" alt="The rock arc know as Durdle Door">
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <h4 class="menuHT"><span class="sdt_link">Attractions</span></h4>
       <h6 class="menuHB"><span class="sdt_descr">Place to visit</span></h6>
      </span>
     </a>
     <div class="sdt_box">
       <a href="#">Websites</a>
       <a href="#">Illustrations</a>
       <a href="#">Photography</a>
     </div>
    </li>
    <li>
     <a href="gallery.html">
      <img src="images/imagesPop/3.jpg" alt="Human taking photo (front view of how he do it)">
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <h4 class="menuHT"><span class="sdt_link">Gallery</span></h4>
       <h6 class="menuHB"><span class="sdt_descr">Slide shows</span></h6>
      </span>
     </a>
    </li>
    <li>
     <a href="directions.html">
      <img src="images/imagesPop/5.jpg" alt="Path which dissapear at the end">
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <h4 class="menuHT"><span class="sdt_link">Location</span></h4>
       <h6 class="menuHB"><span class="sdt_descr">Travel Info.</span></h6>
      </span>
     </a>
    </li>
    <li>
     <a href="accommodation.html">
      <img src="images/imagesPop/4.jpg" alt="Old fashion house (in Lulworth village)">
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <h4 class="menuHT"><span class="sdt_link">Accommodation</span></h4>
       <h6 class="menuHB"><span class="sdt_descr">Hotel, flats</span></h6>
      </span>
     </a>

    </li>
   </ul>

Answer 1

The OP got the message "Content model for element span: Phrasing content." from the W3C validator, which is an HTML5 error, but the answers above deal with the issue of block level elements inside inline ones which affects earlier versions of HTML.

It's actually okay to put block level elements inside inline ones in HTML5, but only if they are allowed by the parent element's content model. In the case of <span> this is phrasing content, which excludes block level elements like headings.

See 3.2.4.1.5 Phrasing content here for a list of allowable elements inside a <span> in HTML5 http://www.w3.org/html/wg/drafts/html/master/single-page.html#phrasing-content-1

See also this thread: Validation error: ul not allowed as child of element span

Answer 2

h3 is - like all heading elements - a block level element. span on the other side is an inline element. And you cannot put block elements inside inline elements. Note that the validator does not care about the actual display style but about the fact that the h3 is a child of a span.

The way to fix it is not using heading tags in this place. They are semantically wrong for a menu anyway! Another option that ignores the semantics would be making .sdt_wrap a div instead of a span

Answer 3

This is the problem (one of the instances),

<span class="sdt_wrap">
    <h3 class="menuHT"><span class="sdt_link">Home</span></h3>
    <h6 class="menuHB"><span class="sdt_descr">Main page</span></h6>
</span>

To fix it, you will need to either make .sdt_wrap a <div> instead of a <span> or make your headers inline. Ideally the first option,

<div class="sdt_wrap">
    <h3 class="menuHT"><span class="sdt_link">Home</span></h3>
    <h6 class="menuHB"><span class="sdt_descr">Main page</span></h6>
</div>

Explanation

In HTML you're not allowed to have a display:block; element (like <h3>) inside a display:inline; element (like <span>). The reasoning that this is invalid HTML is that it doesn't make sense to have a block element within an inline. Block elements normally break the flow of the page and go onto a new line, inline elements don't.

Answer 4

You would have something like:

<span>
    <h3 class="menuHT"><span class="sdt_link">Home</span></h3>
</span>

You need to remove the <span> outside the <h3> not the inside one.

---

As guessed you have this:

  <span class="sdt_wrap">
   <h3 class="menuHT"><span class="sdt_link">Home</span></h3>
   <h6 class="menuHB"><span class="sdt_descr">Main page</span></h6>
  </span>

Replace this with:

  <div class="sdt_wrap">
   <h3 class="menuHT"><span class="sdt_link">Home</span></h3>
   <h6 class="menuHB"><span class="sdt_descr">Main page</span></h6>
  </div>

Answer 5

What the error is saying is that h3 is a child of span. Check for span outside of your h3, not inside it. Otherwise, this particular piece of code is fine and valid