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

Question

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

我更喜欢第一个来最小化标记。

Answer 1

我只会在navif ... 中插入图像</p>

• …此图像链接到页面/锚点（例如，首页链接），或
• …此图像包含文本“导航”或类似文本（因此应插入 a h1）

规范说：

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

因此，本节不应包含与导航无关的内容。

你的第二个例子不是你想要的，因为你会创建一个错误的大纲（因为 external 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>

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

Answer 2

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