我可以在导航元素中放置徽标图像吗？

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

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

Answer 2

nav如果……我只会在其中插入图像

• ...此图像链接到页面/锚点（例如指向首页的链接），或
• ...此图像包含文本“导航”或类似内容（因此应将其插入到 中h1）

该规范说：

该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>

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