<h>标记内的<span>，验证错误

Question

有验证错误，不知道为什么会发生，有人可以帮助我修复它吗？

第317行，第26列：在这种情况下，元素h3不能作为元素span的子元素。（抑制此子树中的其他错误。）

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

元素范围的内容模型：短语内容。

<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

您将有类似以下内容：

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

您需要删除<span>外部而<h3>不是内部。

如您所料：

  <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>

替换为：

  <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 2

h3与所有标题元素一样，是块级元素。span另一方面是内联元素。而且您不能将块元素放入内联元素中。请注意，验证器并不关心实际display样式，而是关心the h3是的孩子的事实span。

解决该问题的方法不在此位置使用标题标签。无论如何，从语义上来说，菜单是错误的！另一个忽略语义的选项是用.sdt_wrapa div代替aspan