<span> 在 <h> 标签内，验证错误答案

【问题标题】：<span> inside <h> tags, validation error<span> 在 <h> 标签内，验证错误
【发布时间】：2013-03-03 12:34:23
【问题描述】：

有验证错误，不知道为什么会发生，谁能帮我解决它？

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

【问题讨论】：

您不应该将块级元素<h3> 放在<span> 中。去掉它。如果可能，还要显示完整的代码。
您在使用 Visual Studio 吗？发布更多您的 html。
这是正确的，因为 HTML 不允许内联元素中包含块元素。
将<span class="sdt_wrap"> 替换为<div class="sdt_wrap"> 即可。
@Praveen Kumar 它仅适用于验证器，但 css 无法使用它（（（

标签： html validation

【解决方案1】：

h3 像所有标题元素一样是块级元素。另一边的span 是一个内联元素。而且您不能将块元素放在内联元素中。请注意，验证器并不关心实际的 display 样式，而是关心 h3 是 span 的子代这一事实。

修复它的方法是在这个地方不使用标题标签。无论如何，它们对于菜单来说在语义上是错误的！另一个忽略语义的选项是将.sdt_wrap 设为div 而不是span

【讨论】：

哈哈...很棒的表情包... :)
我有一个改变字母大小的按钮，所以我必须用 H 来设置它，因为当我按下按钮时，菜单名称必须改变它们的字体大小
那为什么需要 H* 元素？！
1+ 对于伟大的模因。但是，问题不在于将块元素放在内联元素中；事实上，将h3 放在a 中是有效的。问题是元素span 的content model 是phrasing content，但h3 只能在预期flow content 的地方使用。

【解决方案2】：

你会有类似的东西：

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

您需要删除<h3> 外面的<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>

将其替换为：

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

【讨论】：

@user2128789 正如我所说的，将<span class="sdt_wrap"> 替换为<div class="sdt_wrap"> 即可。
通过验证谢谢，但显示有问题（（
您需要相应地更改 CSS。

【解决方案3】：

OP 从 W3C 验证器收到消息 “元素跨度的内容模型：短语内容。”，这是一个 HTML5 错误，但上面的答案涉及内部块级元素的问题影响早期版本 HTML 的内联。

实际上可以将块级元素放入 HTML5 中的内联元素中，但前提是父元素的 内容模型 允许它们。在的情况下，这是短语内容，不包括标题等块级元素。

请参阅 3.2.4.1.5 短语内容，了解 HTML5 中中允许的元素列表 http://www.w3.org/html/wg/drafts/html/master/single-page.html#phrasing-content-1

另见此线程： Validation error: ul not allowed as child of element span

【讨论】：

1+ 具体来说，phrasing content 不包括标题，因为它们只能用于需要 flow content 的地方。

【解决方案4】：

错误的意思是h3 是span 的孩子。在h3 之外检查span，而不是在其中。否则，这段特定的代码是好的并且有效的

【讨论】：

【解决方案5】：

这是问题（其中一个实例），

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

要修复它，您需要将.sdt_wrap 设为<div> 而不是<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>

说明

在 HTML 中，您不能在 display:inline; 元素（如 <span>）中包含 display:block; 元素（如 <h3>）。这是无效的 HTML 的原因是在内联中包含块元素是没有意义的。块元素通常会中断页面的流动并进入新的一行，而行内元素则不会。

【讨论】：