正確的語義html5標簽用於單個頂級導航和子鏈接

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

您的標記是正確的標記！ 由於“模型”是列表的標題，因此這是<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元素提供標題，則大綱算法將創建隱式/未定義的標題。

因此，如果“模型”正確地描述了這些導航鏈接（似乎是這種情況），則最好將其用作標題。 您可以使用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>