Question

在HTML 5（实验）windows-1252编码上运行w3Validator之后，我收到以下错误 -

第11行，第20栏：元素a不是允许作为元素dl的子元素上下文。（抑制进一步的错误从这个子树。）

<a href="#link"><dt>Link</dt><dd>Sub heading of the link</dd></a>

如果<a>不能包含子元素<dl>，那么代码应该如何使用？

注意：上面的代码由js使用，因此代码不会发生重大变化。

更新：整个代码如下 -

<div id="something">
    <dl>
        <a href="#link1"><dt>title1</dt><dd>Sub heading1</dd></a>
        <a href="#link2"><dt>title2</dt><dd>Sub heading2</dd></a>
        <a href="#link3"><dt>title3</dt><dd>Sub heading3</dd></a>
        <a href="#link4"><dt>title4</dt><dd>Sub heading4</dd></a>
        <a href="#link5"><dt>title5</dt><dd>Sub heading5</dd></a>
        <a href="#link6"><dt>title6</dt><dd>Sub heading6</dd></a>
    </dl>
</div>

Answer 1

到目前为止发布的所有答案都是错误的。

默认情况下，锚点（或<a>元素）是内联的，是的 - 但您可以使用一些基本的CSS来更改它：

a {
  display: block;
}

除此之外，从HTML5开始，允许使用块级锚点。这意味着你可以做一些很酷的事情：

<a href="#">
 <h1>Foo</h1>
 <p>Bar</p>
</a>

让您的代码验证为HTML5。（此代码一直在浏览器中有效，在HTML5之前它无效。）

它未验证的真实原因（因此，问题的答案）非常简单：<dt>和<dd>元素可能只显示为直接孩子 <dl>元素。

Answer 2

定义列表具有非常特定的结构

<dl>
  <dt>Definition title<dt>
  <dd>Definition description </dd>

  <dt><a href='#'>Definition title</a><dt>
  <dd>Definition description </dd>

  <dt>Definition title<dt>
  <dd><a href='#'>Definition description</a></dd>
</dl>

~~实际上可以放置LINK的唯一地方是DT或DD。如果我没记错的话，DD被认为是块级元素，并且在任何情况下都不会进入LINK。~~

编辑：正如@Mathias Bynens在评论中指出的那样，只有 DT和DD元素可能会显示为DL的直接子元素。

HTML5中还允许在块级元素周围放置内联标记

Answer 3

基本上这是block and inline elements的问题。惯例是你不应该将一个块元素放在内联元素中，<a>标记是内联的，<dl>（和<dt>和<dd>元素应该是在里面）是块。您正在做的事情类似于在<strong>或<a>附近放置<form>或<div>元素，这显然似乎不正确。

您的问题的“答案”是将<a>标记放在单个<dt>和<dd>标记内，并且只在定义列表中包含定义术语和定义定义标记

无视：没有意识到您正在尝试验证HTML 5.在这种情况下，答案是您不能放置<dt>和<dd>以外的任何内容作为<dl>的直接子女。

元素<a> not allowed as child of element <dl> in this context - Validator Error</dl></a>

3 个答案: