2

私のサイトの h1 は「ホーム」リンクでもあるので、当然 nav タグ内に配置します。ナビゲーション内の他のリンクは、最初は次のように順不同のリストに配置されていました。

    <nav>
      <h1><a href="#" class="active">Site Name</a></h1>
      <ul>
         <li><a href="#">Nav Item 1</a>
         <li><a href="#">Nav Item 2</a>
         <li><a href="#">Nav Item 3</a>
       </ul>
    </nav>

標準ですよね？ご想像のとおり、サブページでは、ナビゲーションは同じままですが、「アクティブな」クラスが関連するナビゲーション アイテムに適用されます。

これが問題です。モバイル画面の幅では、ナビゲーションはドロップダウン メニューに圧縮され、「アクティブな」リンクがドロップの上に表示される唯一のリンクになります。h1 がアクティブなリンクであるホームページでは問題ありませんが、サブページでは私の CSS が非常に乱雑になるようです。

尊敬されているフロントエンド開発者の中には、順序付き/順序なしリストのないリスト項目を使用していることに気付きました。彼らはセマンティクスを重んじる人々なので、考えているのではないかと思いました...

だから私は立ち往生しています。私のh1をulに入れるのは間違っているようですが、これも間違っているようです:

    <nav>
      <li><h1><a href="#" class="active">Site Name</a></h1></li>
      <li><a href="">Nav Item 1</a></li>
      <li><a href="">Nav Item 1</a></li>
    </nav>

HTMLをマークアップするほとんどすべての方法で達成したいもののLOOKを取得できることはわかっていますが、CSS / JSの悪夢/またはハッキングを回避しながら、できるだけ意味的に行いたいと思います。

4

1 に答える 1

8

基準は明確です:

許可された親要素:

ul、ol、メニュー

ブラウザがサポートしていない可能性があるため、他の使用は避ける必要があります。

規範がそれを禁止しているという事実は、各開発者が自分の使用のために発明したものを除いて、受け入れられたセマンティックがないことを意味します。

于 2013-02-21T16:07:34.350 に答える