是<nav>与 一起使用更好<li><a>,还是只是 <nav> <a>?

  • 本文关键字:nav 一起 更好 li html css web
  • 更新时间 :
  • 英文 :

<nav>
  <a href="#">Home</a>
  <a href="#">Kontakt</a>
  <a href="#">Jovan</a>
</nav>

<nav>
 <ul>
  <li> <a href="#">Home</a> </li>
 </ul>
</nav>

哪个更好?当只有nav<a>或后者时。在CSS中首先不应该放置<inline>

根据W3对<nav>的规范,任何一种flow content都可以接受。并不是说这很重要,但是W3 &MDN使用<ul>来演示它的使用(而且,为了它的价值,W3甚至在<ul>上面包含了一个标题来命名该部分)。

就我个人而言,我认为<ul>比单独的<a>更好地描述了多个链接,但这真的取决于你想怎么做。与简单的浮动锚相比,<ul>在语义上更适合于多个链接。

我个人使用列表。我更喜欢这个,因为如果你需要的话,它可以更健壮。例如,如果您需要为样式嵌入边框,那么很容易在<a>上创建浅色边框,在<li>上创建深色边框来创建这种效果。

然而,与此同时,list方法可以被设计得非常简单,就好像你只使用<a>

一样。

此外……两者之间没有明显的速度差异。

这完全取决于你。<nav>元素只需要包含主导航,它不需要在列表中。但通常使用列表,因为导航菜单往往是一个项目列表。

所以如果你的导航栏包含一个项目列表,那么它可能应该是一个列表

从我的角度来看,第一个解决方案是最好的一个,因为你的菜单是一个导航,它使用更少的代码,(据我所知)以及良好的seo作为第二个解决方案。

<nav>
    <a href="#">Home</a>
    <a href="#">Kontakt</a>
    <a href="#">Jovan</a>
</nav>

如果您在nav中使用其他元素,如ul, ol, h1, table(!)或其他,它应该在语义上正确。所以如果你的菜单是一个列表,使用ul就可以了。如果你只是想在里面添加元素使样式更容易,使用div和/或span

经过评论中的讨论:在大多数情况下,菜单是一个列表,那么ul方法是一个很好的选择。根据Steve

的说法,如果你使用ul,屏幕阅读器更容易导航。

最新更新