7

セマンティックで堅実なマークアップを作成するために、ロゴ画像を 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>

マークアップを最小限に抑えるには、最初のものをお勧めします。

4

2 に答える 2

5

次の場合にのみ画像を挿入しnavます …</p>

  • … この画像がページ/アンカーにリンクされている (たとえば、フロント ページへのリンク)、または
  • …この画像には「ナビゲーション」などのテキストが含まれています（したがって、に挿入する必要がありますh1）

仕様には次のように書かれています：

nav要素は、他のページまたはページ内のパーツにリンクするページのセクション (ナビゲーション リンクを含むセクション) を表します。

したがって、このセクションには、ナビゲーションに関するもの以外を含めるべきではありません。

2番目の例は、間違ったアウトラインを作成するため(outerのため)、あなたが望むものではありません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>

ただし、これはまれなケースです。ページの見出しが必要であり、ほとんどの場合、これはロゴであり、ほとんどの場合、これはサイトのホームページにリンクする必要があるためです。

于 2012-09-09T15:10:22.930 に答える
4

はい、<nav>タグ内に画像を配置しても問題ありません。MDNおよびW3C に従って、フロー コンテンツはこのタグのコンテンツとして許可されており、他の多くの要素の中でもタグです。<img>

于 2012-08-01T01:04:19.330 に答える