2

私はHTML5を学んでいて、CSSZenGardensをHTML5セマンティックバージョンに変換するプロジェクトを与えられました。私はそれのほとんどを簡単に変換することができました、しかし下部のリンク/ナビゲーションは私にいくつかの問題を与えています。
これを変換する/複数のナビゲーションを処理する最良の方法は何でしょうか？

<div id="linkList2">
     <div id="lselect">
          <h3 class="select"><span>Select a Design:</span></h3>
          <ul>
          <!-- Links -->
          </ul>
     </div>
     <div id="larchives">
          <h3 class="archives"><span>Archives:</span></h3>
          <ul>
          <!-- Links -->
          </ul>
     </div>
     <div id="lresources">
          <h3 class="resources"><span>Resources:</span></h3>
          <ul>
          <!-- Links -->
          </ul>
     </div>
</div>

現時点では、linkList2はセクションであり、各子div要素はnav要素であるか、linkList2はnavであり、子div要素はセクションである必要があると考えています。

4

2 に答える 2

6

を作成linkList2するsectionと、セマンティクスは「このセクションのナビゲーションはこちら」になります。navはすでにcontentを区分しているため、 a でラップするのsectionは多少冗長になることに注意してください。

また、仕様には次のように記載されていることに注意してください。

ページ上のリンクのすべてのグループが nav 要素にある必要はありません — この要素は主に主要なナビゲーション ブロックで構成されるセクションを対象としています。

目的のために、すべてのリンクのセットを に入れる必要はありませんnav。子要素の作成についてはあまり心配しませんが、linkList2aを作成するアプローチが最適だと思います。navsection

<nav id="linkList2">
     <div id="lselect">
          <h1 class="select"><span>Select a Design:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </div>
     <div id="larchives">
          <h1 class="archives"><span>Archives:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </div>
     <div id="lresources">
          <h1 class="resources"><span>Resources:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </div>
</nav>

上で述べたように、navはコンテンツを区分しているため、すべての見出しはh1それぞれのセクションの最高レベルの見出しであるため、実際にはすべての見出しが必要です (上記で変更しました)。しかし、実用的なアクセシビリティの観点から、それらをマークアップ内の見出しh3が前にあるかh2のように残すことは依然として許容されると思います。h1

うまくいく他のアプローチは次のとおりです。

<div id="linkList2">
     <nav id="lselect">
          <h1 class="select"><span>Select a Design:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </nav>
     <nav id="larchives">
          <h1 class="archives"><span>Archives:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </nav>
     <nav id="lresources">
          <h1 class="resources"><span>Resources:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </nav>
</div>

前に述べたように、section(またはarticle) で囲まないnavで十分です。

あなたの質問はセマンティクスに関するものなので、最後のポイントです。あなたが CSS Zen Garden のマークアップに取り組んでいることは知っているので、すべてのスタイルシートが引き続き機能するように、新しいページの要素をすべての古いページに対応させることがおそらく重要ですが、これは良い例ではないことを知っておく必要があります。 「セマンティック マークアップ」。次の点に注意してください。

  • このマークアップは2003 年に作成されたため、現時点で優れたセマンティック マークアップと見なされているものの優れた例にはなりません。
  • 設計上、CSS Zen Garden のマークアップは同じままである必要があります。これは CSS のデモであり、HTML のデモではありません。
  • 2003 年には IE6 が優勢なブラウザーであり、CSS3 を実際に使用することはできませんでした。そのため、このマークアップには、スタイリングのアフォーダンスとして不要な余分な要素が多数含まれています。特にspan、見出し内のすべての要素と (より間違いなく) 子div要素lselect、larchivesおよびlresources.
  • OOOCSSの欠如と同様に、このマークアップは分類を示してidいます - 複数のandclass属性をどこにでも持つ必要はありません。たとえば、idoflselectとclassofの両方を持つ必要はなくselect、代わりに selector を使用できます#lselect h1。
  • 最後に、意味的linkList2にひどいです。idリンクされたリストにはなく、2 番目のものであるかどうかは、残りのすべてのマークアップに依存します。使用されるidとclass名前もセマンティック マークアップの一部です。
于 2012-12-31T11:54:40.797 に答える