のようなものを使用できますが<section id="wrapper"></section>
、私はとても衒学的なので<wrapper></wrapper>
、html 要素として使用することに問題はありますか?
私は html5 shiv とモダナイザーを使用していますが、問題なく動作しますが、この方法で特に問題があるかどうかを知りたかっただけです。
のようなものを使用できますが<section id="wrapper"></section>
、私はとても衒学的なので<wrapper></wrapper>
、html 要素として使用することに問題はありますか?
私は html5 shiv とモダナイザーを使用していますが、問題なく動作しますが、この方法で特に問題があるかどうかを知りたかっただけです。
HTMLには要素がないwrapper
ので、そうです、それは間違っています。さらに、<section>
要素には特定のセマンティックな意味があるため、一般的な要素ラッパーとして使用しないでください。具体的には、対応する適切なヘッダーとフッターを使用して、ドキュメント アウトライン内のコンテンツのセクションを表します。<div>
何年もの間、ラッパーの仕事をうまくやっています。
独自のタグを作成すると、無効な HTML 5 ドキュメントが生成されます。うまくいくかもしれませんが、広範囲に及ぶ影響があります (パーサーの期待からブラウザーのデフォルト スタイルシートまでのすべて)。
他の回答が述べているように、section
どちらも適切な使い方ではありません。
の代わりにclass 属性を設定することをお勧めしますdiv
。クラス名を割り当てることで、要素が (やや一般的ではありますが) その型であることを示しています (オブジェクト指向言語でクラスのインスタンスをインスタンス化するのとほぼ同じです)。
カスタム データ属性を追加して、要素に関する詳細情報を提供することもできます。これらは完全に有効であり、次のとおりです(強調は私のものです):
...ページまたはアプリケーション専用のカスタム データを格納することを目的としており 、これ以上適切な属性または要素はありません。
<div class="wrapper" data-custom="foo"></div>
<section>
要素はYOUR LAYOUTではなく、ページ内のセクションを表します。これは非常に重要であり、私を含む HTML5 の初心者のほとんどが混乱しています。
別の例を使用して、どこが間違っているかを示しましょう。
<section id="banner">
</section>
バナーは Web コンテンツではなくレイアウトの一部です。したがって、セクションはありません。<div>
HTML 4 で使用されていたように、 で表す必要があります。
<section id="wrapper">...</section>
ラッパーは純粋にレイアウト固有のタスクであり、ページ上の特定のコンテンツを表すものではないため、同じように間違っています。<sections>
常に差別化されたコンテンツを表す必要があり、他のものではありません。
有効と見なされる HTML5 の例を次に示します。
<div id="wrapper">
<section id="mainArticle">
</section>
<section id="aboutAuthor">
</section>
<aside id="relatedArticles">
</aside>
</div>