Question

I've learned to make the main navigation with a list like that:

<ul>
    <li><a href="#">nav-item</a></li>
</ul>

Now additionally, I need two top navigations, one left for social buttons and another right for other things. Someone told me better to build those top navigations by 2 like that:

<div>
    <a href="a">top-nav-item</a>
</div>

And I'm confused. Why is that better? Could someone tell me the advantage of the second way?

Thank you~

Answer 1

我建议使用<nav>元素，这是HTML5规范（另请参见here）。从语义上讲，它更适合与导航元素配合使用，并且可能有助于更好地了解搜索引擎他们正在查看网站的哪些元素。您可以将<a>元素放在<nav>中。搜索引擎可能能够更好地理解这些链接是指向其他页面的链接，因为这是锚元素的作用（链接到其他内容）。

对于它的外观来说，没关系；几乎所有元素都可以看起来像带有按钮的菜单。此外，如今的搜索引擎非常聪明，即使您一直不使用适当的元素，它们仍然可能会理解您网站的大部分内容。

话虽这么说，这些元素之所以存在是有原因的，那为什么不使用它们呢？

我在上面引用的mozilla developer network's example使用以下内容，但就我个人而言，将所有内容都放在<ul>元素中不一定总是有意义的。

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 2

那为什么更好？

不是。

HTML是一种语义标记语言。它旨在描述数据的语义。

您有一个链接列表。

标记应表示它是链接列表，而不是其中包含链接的一系列通用块。

Answer 3

我创建了您想要的示例，请检查以下链接。单击运行。

.nav{float:left;}
.nav li,.social li{float: left;margin-right: 22px;list-style: none;}
.social{float:right;}

<header>
  <ul class="nav">
    <li>Home</li>
    <li>About us</li>
    <li>Contact</li>
  </ul>
  
  <ul class="social">
    <li>Facebook</li>
    <li>Google</li>
  </ul>
</header>

使用<div> <a> instead of </a> <ul> <a></a> <li> <a></a> <a>?

3 个答案: