我可以在导航元素中使用徽标图片吗？

为了编写语义和可靠的标记，我可以在导航元素中放置一个徽标图像吗？在ul元素之前。我可以在导航元素中使用徽标图片吗？

<nav> 
    <img id="logo" /> 
    <ul> 
     <li>a</li> 
     <li>b</li> 
    </ul> 
</nav>

或者我应该把它包在所有其他元素，像这样：

<section id="navigation"> 
    <img id="logo" /> 
    <nav> 
     <ul> 
      <li>a</li> 
      <li>b</li> 
     </ul> 
    </nav> 
</section>

我宁愿第一个最小化的标记。

来源

2012-08-01 thomasmyrman

是的，在<nav>标签中放置图像没有问题。根据MDN和W3C，流量内容是此标记的允许内容，其他元素中还有<img>标记。

来源

2012-08-01 01:04:19 j08691

我在nav如果只插入一张图片...

...这个图像链接到网页/锚（比如头版的链接），或
...这个图像包含文 “导航” 或类似

（所以应该在一个h1插入）的spec says：

nav元素表示链接到其他页面或页面内部分的页面部分：包含导航链接的部分。

所以本节不应包含与导航无关的内容。

你的第二个例子不是你想要的，因为你会创建一个错误的轮廓（因为外部section）。

如果是网页的主导航和图像是网站的标志，我会使用这个标记：

<header> 

<h1><a href="index.html" title="Home page"><img src="logo.png" alt="ACME Inc."></a></h1> 

<nav> 
    <ul> 
    <li>a</li> 
    <li>b</li> 
    </ul> 
</nav> 

</header>

如果您想将徽标链接到首页和主页不会在ul联系，我将其插入到nav：

<nav> 
<ul> 
    <li><a href="index.html" title="Home page"><img src="logo.png" alt="ACME Inc."></a></li> 
    <li>a</li> 
    <li>b</li> 
</ul> 
</nav>

但是，这是一种罕见的情况下，因为你仍然需要一个页面标题，并在大多数情况下，这将是标志，并且在大多数情况下这应该链接到该网站的主页。

来源

2012-09-09 15:10:22 unor

对不起，如果这个评论似乎有点随意，但我有一个问题。你的意思是说，如果Logo替换了通常被称为'Home'的链接，它应该放在* ul里面，但是当链接'Home'并且Logo也被链接时，那么标识应该是* “ul”的外部*（但当然内部的Home-link）？ – Sven 2013-10-22 19:49:41

@Sven：如果你有两个链接的标志和一个链接“Home”，只有“Home”链接应该在'nav'中，是的。如果您只有链接徽标，并且此徽标代表网站标题（大多数网站都是这种情况），它应该*不*在'nav'中。我的最后一个HTML例子仅适用于极少数情况（然后您需要额外的网站标题）。 – unor 2013-10-26 20:17:35

我可以在导航元素中使用徽标图片吗？

回答

相关问题