記事、ASIDE、DIVをいつ使うべきか
新しいHTML5 SECTION要素はやや混乱する可能性があります。 HTML5より前にHTML 文書を作成していた場合は、要素を使用してページ内の構造分割を作成し、ページでスタイルを変更する可能性があります。 したがって、既存のDIV要素をSECTION要素で置き換えるのは当然のようです。 しかし、これは技術的に間違っています。 したがって、DIV要素をSECTION要素で置き換えるだけではない場合、それらを正しく使用するにはどうすればよいですか？
SECTION要素は意味要素です
最初に理解しなければならないのは、SECTION要素が意味要素であるということです。 これは、ユーザエージェントと人間の両方に、囲まれたコンテンツの内容、具体的にはドキュメントのセクションに関する意味を提供することを意味します。
これは非常に一般的な意味論的記述のように見えるかもしれませんが、それはそうであるからです。 SECTION要素を使用する前に最初に使用する必要があるコンテンツに、より意味のある区別を提供する他のHTML5要素があります。
- 記事
- ASIDE
- NAV
SECTION要素を使用する場合
コンテンツがサイトの独立した部分であり、独立して記事やブログの投稿のようにシンジケートすることができる場合は、ARTICLE要素を使用します。 サイドバー、注釈、脚注、または関連付けられたサイト情報など、コンテンツがページの内容またはサイト自体のいずれかに接して関連している場合は、ASIDE要素を使用します。 ナビゲーションであるコンテンツにNAV要素を使用します。
SECTION要素は、一般的な意味要素です。 他のセマンティックコンテナ要素のどれも適切でないときに使用します。 ドキュメントの一部を結合して別の単位にすることができます。これらの単位は、何らかの形で関連するものとして記述できます。 セクション内の要素を1つまたは2つの文で記述できない場合は、その要素を使用しないでください。
代わりに、DIV要素を使用する必要があります。 HTML5のDIV要素は意味を持たないコンテナ要素です。 結合しようとしているコンテンツがセマンティックな意味を持ちませんが、スタイリングのために結合する必要がある場合は、DIV要素が適切な要素です。
SECTION要素のしくみ
ドキュメントのセクションは、アーティクルとASIDE要素の外部コンテナとして表示されます。 それはまた、記事または詩の一部ではないコンテンツを含むことができます。 SECTION要素は、ARTICLE、NAV、またはASIDE内にもあります。 セクションをネストして、1つのコンテンツグループが、記事のセクションまたはページ全体である別のコンテンツグループのセクションであることを示すこともできます。
SECTION要素は、文書のアウトライン内に項目を作成します。 したがって、セクションの一部としてヘッダー要素（H1〜H6）が常に存在する必要があります。 あなたがセクションのタイトルを思いつくことができないなら、おそらくDIV要素がおそらくより適切でしょう。 セクションのタイトルをページに表示したくない場合は、CSSでいつでもマスクすることができます。
SECTION要素を使用しない場合
最初により具体的なセマンティック要素を使用する上のアドバイス以外に、SECTION要素を使用すべきではない明確な領域が1つあります。
言い換えれば、その場所に要素を配置する唯一の理由がCSSスタイルのプロパティを添付する場合は、SECTION要素を使用しないでください。 意味要素を見つけるか、代わりにDIV要素を使用してください。
最終的にはそれは重要ではない
意味論的なHTMLを書くことの難しさは、私にとって意味論的なものはあなたにとってまったくナンセンスかもしれないということです。 ドキュメントのSECTION要素を使って正当化できると思ったら、それを使うべきです。 ほとんどのユーザーエージェントは、DIVまたはSECTIONのスタイルを設定するかどうかに関わらず、ページを気にせずに表示します。
意味的に正しいと思うデザイナーにとっては、SECTION要素を意味的に有効な方法で使用することが重要です。 ページを機能させるだけのデザイナーにとってはそれほど重要ではありません。 私は、意味論的に有効なHTMLを書くことは良い習慣であり、ページをより将来的に守ると考えています。 しかし、結局それはあなた次第です。