Question

为了编写语义和实体标记，我可以在nav元素中定位徽标图像吗？就在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>标记内没有问题。根据{{3}}和MDN，流标准内容是此标记的允许内容，其他许多元素包含<img>标记。

Answer 2

我只会在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>

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

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

2 个答案: