可以使用锚代替 div 容器吗？

Question

有什么理由不使用锚标记而不是 div 标记作为容器？

当前代码：

<a href="#page1.html">
    <div id="container">
        <span>Some content</span>
    </div>
</a>

建议代码：

<a id="container" href="#page1.html">
    <span>Some content</span>
</a>

这是一个现场演示运行：

.myClass {
  opacity: 1;
  position: absolute;
  left: 50px;
  top: 30px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: visible;
  width: 148px;
  white-space: nowrap;
  text-align: left;
  font-family: Comic Sans MS;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  color: rgba(112, 112, 112, 1);
  outline: 1px dashed red;
}

.class2 {
  top: 60px;
}

<a href="#page1.html">
  <div id="container" class="myClass">
    <span>Some content</span>
  </div>
</a>


<a href="#page1.html" class="myClass class2">
  <span>Some content</span>
</a>

Answer 1

这在HTML5中完全有效:

<a href="#page1.html">
    <div id="container">
        <span>Some content</span>
    </div>
</a>

唯一的区别是锚标签的默认 display 是 inline 而 div 的默认显示是 block.

来自 w3.org:

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:
<aside class="advertising">
 <h1>Advertising</h1>
 <a href="http://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only .99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="http://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

更新的答案

在锚点内使用 div 和 span 的唯一区别是它们的 display... 正如您在下面的示例中所见，跨度内联显示，而div显示为块元素（当然你可以在css中更改默认显示）：

<a href="#">
    <span>inline element1</span>
</a>

<a href="#">
    <span>inline element2</span>
</a>


<a href="#page1.html" class="myClass class2">
  <div>block elemnt1</div>
</a>

<a href="#page1.html" class="myClass class2">
  <div>block elemnt2</div>
</a>

可以使用锚代替 div 容器吗？

Can anchors be used in place of div containers?

html

anchor

更新的答案