2

ナビゲーション用に次の構造があります。

Models
    Model 1
    Model 2
    Model 3
    Model 4

これはサイトのメイン ナビゲーションであるため、nav タグを使用したいと思います

また、どのタグ「モデル」を含めるかについても判断できません。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の外に置くか、 または で変更する必要があります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 に答える