Question

根据HTML规范，<nav>标记定义了一组导航链接。

我想构建一个非常复杂的“菜单”，因此我的<nav>将包含<div>个集合，其中每个都包含<img>，<p>中的描述}和<h2>中的实际链接。

<nav>
 <div class="item">
    <img src="screenshot1.png" alt="">
    <p>Description of website 1</p>
    <h2><a href="#">Website 1</a></h2>
 </div>
 <div class="item">
    <img src="screenshot2.png" alt="">
    <p>Description of website 2</p>
    <h2><a href="#">Website 2</a></h2>
 </div>
</nav>

问题是：在语义上是否正确？

Answer 1

是的，这是正确的。

您可以通过检查浏览器的开发工具中的元素来自行确认。如果不正确，浏览器将移出无效元素。请参阅下面的第二个代码段，了解错误的HTML会发生什么。

＆＃13;

<nav>
  <div class="item">
    <img src="screenshot1.png" alt="">
    <p>Description of website 1</p>
    <h2><a href="#">Website 1</a></h2>
  </div>
  <div class="item">
    <img src="screenshot2.png" alt="">
    <p>Description of website 2</p>
    <h2><a href="#">Website 2</a></h2>
  </div>
</nav>

＆＃13;

HTML不正确

＆＃13;

<table>
  <div>
    Incorrectly placed div
  </div>
  <tr>
    <td>
      Correct TD.
    </td>
  </tr>
</table>

＆＃13;

Answer 2

根据HTML规范，<nav>标记定义了一组导航链接。

不，不，the specification states

nav元素表示链接到其他页面的页面的一部分页面或页面中的部分：带有导航链接的部分。

...

nav元素不必包含列表，也可以包含其他元素各种内容。在此导航块中，提供了链接在散文中：

<nav>
 <h1>Navigation</h1>
 <p>You are on my home page. To the north lies <a href="/blog">my
 blog</a>, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a <a href="/school/thesis">thesis</a>.</p>
 <p>To the west are several exits. One fun-looking exit is labeled <a
 href="http://games.example.com/">"games"</a>. Another more
 boring-looking exit is labeled <a
 href="http://isp.example.net/">ISP™</a>.</p>
 <p>To the south lies a dark and dank <a href="/about">contacts
 page</a>. Cobwebs cover its disused entrance, and at one point you
 see a rat run quickly out of the page.</p>
</nav>

因此，规范非常明确地声明<nav>标记可以包含混合内容而不会出现问题。

<nav>可以包含混合内容吗？

2 个答案:

HTML不正确