我可以在导航元素中添加徽标图像吗？答案

【问题标题】：Can I have a logo image inside a nav element?我可以在导航元素中添加徽标图像吗？
【发布时间】：2012-07-29 20:43:15
【问题描述】：

为了编写语义和实体标记，我可以将徽标图像放置在导航元素内吗？就在 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>

我希望第一个可以最小化标记。

【问题讨论】：

标签： html semantic-markup nav

【解决方案1】：

如果……，我只会在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>

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

【讨论】：

很抱歉，如果这条评论看起来有点随意，但我有一个问题。你的意思是如果 Logo 替换了通常称为“Home”的链接，它应该在 insideul，但是当有一个链接“Home”并且 Logo 也被链接时，那么徽标应该在ul 的外部（当然是内部链接）？
@Sven：如果您同时拥有链接徽标和链接“主页”，则只有“主页”链接应该进入nav，是的。如果您只有一个链接徽标，并且此徽标代表网站标题（大多数网站都是这种情况），则它应该不进入nav。我的最后一个 HTML 示例仅适用于极少数情况（那么您需要一个额外的网站标题）。

【解决方案2】：

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

【讨论】：