2

我有以下导航结构：

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

4 回答 4

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>
于 2013-08-13T14:45:53.050 回答
0

您的标记是正确的标记！由于“模型”是列表的标题，因此这是<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>
于 2013-08-13T14:55:21.213 回答
0

谈到语义，你h1作为主标题应该在你的导航之外，或者用 or 改变它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 角色来指示浏览器是什么。希望你觉得它有用。

于 2013-08-13T15:00:06.687 回答
0

nav是一个分段元素。如果您没有为分段元素提供标题，大纲算法会创建一个隐式/未定义的标题。

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

使用链接列表本身也很好。但是，通常您希望在此处使用 aul而不是 a 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>
于 2013-08-15T16:29:15.450 回答