Question

我正在为管理员构建的模板中有一个带有导航链接的侧边栏仪表板，类似于：

<aside>
  <ul>
   <li><a href="#">...</a></li>
  </ul>
</aside>
<main>
 ...
</main>

我想知道使用<aside>标记在语义上是否正确，或者我应该使用<nav>代替？

Answer 1

用于导航，请使用<nav>

HTML <nav>元素表示链接到其他页面或页面中部分内容的页面部分：带导航链接的部分。

与<aside>比较，这并不意味着您的意思;

HTML <aside>元素表示页面的一部分，其内容与其余内容相切，可以认为是与该内容分开的。

因此，<aside>意味着更多“旁注”而不是“side bar”。

如果您愿意，可以使用<aside>对侧栏进行分区，然后使用其中的<nav>来包含导航链接

Answer 2

aside元素表示由页面组成的部分与旁边内容相切的内容元素，可以认为与该内容分开。这些部分通常在印刷字体中表示为侧边栏。 html5doctor

和

请勿使用该元素标记带括号的文本文本被认为是主要流程的一部分。 Mozilla

以下是有关如何使用aside的最简单示例：

<article>
  <p>
    The Disney movie <em>The Little Mermaid</em> was
    first released to theatres in 1989.
  </p>
  <aside>
    The movie earned $87 million during its initial release.
  </aside>
  <p>
    More info about the movie...
  </p>
</article>

之前，我看过像Spotify这样的热门网站的HTML结构，他们正在使用div作为侧边栏。但是如果你想阅读更多内容，你应该看看Best HTML5 markup for sidebar

边栏导航：哪个标签在语义上是正确的？

2 个答案: