2

div.container と div.content の代わりに、新しい HTML5 要素を使用する必要があるのはどれですか?

<header>
  site header
</header>

<div class="container">

  <div class="content">

    <article>
      content
    </article>

    <article>
      content
    </article>

    <article>
      content
    </article>

  </div>

  <aside>
    sidebar
  <aside> 

</div>

<footer>
  site footer
</footer>
4

5 に答える 5

2

div.contentおそらく<section>。div.containerおそらく残りますdiv。

于 2012-09-15T14:46:12.573 に答える
2

それらのどれもそのために作られていません。ただし、 ARIAロール を使用することをお勧めします。

<div class="container" role="document">

  <div class="content" role="main">

これらは、CSSで次のようなセレクターを使用して使用することもできますdiv[role='main']

于 2012-09-15T14:46:22.790 に答える
1

この例には一般的に答えることはできません。ページの内容によって異なります。

ここで重要なのは、ページのアウトラインです。divそのため、アウトラインに影響を与えないため、すべての要素を無視できます。CSSまたはJavaScriptのフックとして必要な場合にのみ使用してください。

最初の質問は次のようになります。ページaside全体に関連しているのか、それとも「コンテンツ領域」に関連しているのか。ページ全体に関連している場合は、別のセクション要素に含めないでください。コンテンツ領域に関連している場合は、そのセクション要素に含める必要があります。ここでは、Webページ全体に関連していると思います。

2番目の質問article：3つの要素に共通の見出しはありますか？例としては、「私のお気に入りの本」、「最新のブログ投稿」、「製品」などがあります。その場合は、これら3つのarticle要素をグループ化するセクション要素を使用する必要があります。可能な見出しがない場合は、ここでセクション要素を使用したくない可能性があります。そのため、div要素を使用することも、使用しないこともできます。

3番目の質問（2番目の質問が肯定的に回答された場合）：このセクショニング要素はsectionまたは要素である必要がありarticleますか？articleこれらの3つの「もの」に要素を使用するという選択が正しければ、おそらく（必然ではありませんsectionが！）ここが必要です。繰り返しますが、使用することがまったく正しいかどうかはarticle、実際のコンテンツによって異なります。だからあなたがむしろ望む可能性があります

<article> 
  <section></section>
  <section></section>
  <section></section>
</article>

それ以外の

<section> 
  <article></article>
  <article></article>
  <article></article>
</section>

ここではarticle、3つの「もの」に使用するというあなたの選択が正しいと思います。

したがって、最終バージョンは次のようになります。

<header>
  <!-- if this header applies to the whole page -->
</header>

<section>

  <!-- a h1 like "Latest blog posts" -->

    <article>
      content
    </article>

    <article>
      content
    </article>

    <article>
      content
    </article>

</section>

<aside>
    <!-- if this aside applies to the whole page -->
<aside> 

<footer>
  <!-- if this footer applies to the whole page -->
</footer>
于 2012-09-15T19:41:47.757 に答える
1

この質問を建設的な質問と見なすには、この問題について HTML5 ドラフトが何を言おうとしているのかを尋ねていると解釈する必要があります。その答えは、セクション 4.13.1 W3C HTML5 ドラフトのコンテンツの主要部分です。簡単に言うと、通常は特定のマークアップは必要なく、そこにコンテンツを配置するだけです。divCSS やスクリプトで要素を 1 つの単位として扱う必要がある場合は、要素でラップすることができます。

そして、そのセクションによると、それが「章などのより大きな作品のセクション」または「独立してシンジケートすることを想像できるコンテンツの独立した単位」として、sectionまたはそれを構成する場合、それぞれマークアップすることができます.article

これはコーディング スタイルの問題です。汎用ソフトウェア (ブラウザーや検索エンジンなど) は、ここでの選択を気にしません。

于 2012-09-15T17:32:45.193 に答える
1

HTML 5 DOCTORarticleでとsectionoverの違いについて読むことを強くお勧めします。

これにより、どのセクショニング要素をいつ使用すべきか、いつ div を使用しないかについて、十分な情報に基づいた判断を下すことができます。

私が彼らのブログから推測したことは、次のとおりです。

article: それだけで意味のあるコンテンツに使用されます!

セクション: 別のセクションまたは記事のいずれかの論理セクションであるコンテンツ用 (これらをネストしても問題ありません)。

div: コンテナーまたはスタイリングのフックとして引き続き使用されます。これは、html5 要素を使用すべきではありません。

最後に、html5 のセクショニング要素を使用するかどうかの決定は、見出しが含まれているという事実によって決定されることがよくあります (ただし、これは厳格な規則ではありません)。これらの決定を支援する便利なツールがいくつかあります。

HTML5 アウトライナー - オンライン

HTML5 Outliner - クロム拡張

于 2012-09-15T15:30:04.327 に答える