Question

我有以下导航结构：

Models
    Model 1
    Model 2
    Model 3
    Model 4

我想使用nav标签，因为这是网站上的主要导航

我也无法确定“模特”应该在哪个标签中。它是导航标签中的标题 - 我不确定这是否正确？

到目前为止，我有以下内容，但对此并不满意 - 特别是标题部分：

<nav>
    <h1>Models</h1>
    <ol>
        <li><a href="#">Model 1</a>
        <li><a href="#">Model 2</a>
        <li><a href="#">Model 3</a>
        <li><a href="#">Model 4</a>
        <li><a href="#">Model 5</a>
    </ol>
</nav>

Answer 1

如果模型本身是导航的一部分，您应该在其中嵌套<ul>列表。

<nav>
    <ul>
        <li>
            Models
            <ul>
                <li><a href="”#”">Model 1</a></li>
                <li><a href="”#”">Model 2</a></li>
                <li><a href="”#”">Model 3</a></li>
                <li><a href="”#”">Model 4</a></li>
                <li><a href="”#”">Model 5</a></li>
            </ul>
        </li>
        <li>
            Products
            <ul>
                <li><a href="”#”">Product 1</a></li>
                <li><a href="”#”">Product 2</a></li>
                <li><a href="”#”">Product 3</a></li>
                <li><a href="”#”">Product 4</a></li>
                <li><a href="”#”">Product 5</a></li>
            </ul>
        </li>
    </ul>
</nav>

Answer 2

您的标记是正确的标记！由于“models”是列表的标题，因此这是<h1>元素的正确位置。我唯一要改变的是<ol>到<ul>。您可以在底部的本文中阅读有关菜单的更多信息。 http://diveintohtml5.info/semantics.html

<nav>
    <h1>Models</h1>
    <ul>
        <li><a href="#">Model 1</a>
        <li><a href="#">Model 2</a>
        <li><a href="#">Model 3</a>
        <li><a href="#">Model 4</a>
        <li><a href="#">Model 5</a>
    </ul>
</nav>

Answer 3

在谈论语义时，您的h1作为主标题应该在导航之外，或者通过h2或p进行更改，因为主标题不是导航的一部分

关于导航，它应该是这样的：

<header>
    <h1>title</h1>
    <nav>
        <h2>Models</h2>
        <ul role="navigation">
            <li><a href="#">Model 1</a></li>
            <li><a href="#">Model 2</a></li>
            <li><a href="#">Model 3</a></li>
            <li><a href="#">Model 4</a></li>
            <li><a href="#">Model 5</a></li>
        </ul>
    </nav>
</header>

不要忘记aria角色来指示浏览器的内容。希望你觉得它很有用。

Answer 4

nav是sectioning element。如果您没有为sectioning元素提供标题，outline algorithm会创建一个隐式/未定义的标题。

因此，如果“模型”正确描述了这些导航链接（似乎就是这种情况），最好将其用作标题。您可以使用h1或相应的标题级h2 - h6（取决于您的nav在大纲中的位置）。

使用链接本身的列表也很好。但是，通常您希望在此处使用ul而不是ol。如果链接的顺序有意义且访问者应该访问该页面（而不是其他顺序），则仅使用ol。如果它们只是按字母顺序排序，则不符合ol的条件。

所以我选择：

<nav>
    <h1>Models</h1>
    <ul>
        <li><a href="#">Model 1</a>
        <li><a href="#">Model 2</a>
        <li><a href="#">Model 3</a>
        <li><a href="#">Model 4</a>
        <li><a href="#">Model 5</a>
    </ul>
</nav>

为单个顶级导航和子链接更正语义html5标记

4 个答案: