HTML5 SECTION要素の理解
何年も前にHTML5がシーンにぶち壊されたとき、SECTION要素を含む新しいセクション要素が追加されました。 HTML5が紹介する新しい要素のほとんどには明確な用途があります。 たとえば、要素はWebページの記事や主要部分を定義するために使用され、要素は他のページにとって重要ではない関連コンテンツを定義するために使用され、ヘッダー、nav、およびフッターはかなり自明です。 しかし、新たに追加されたSECTION要素は少しはっきりしていません。
多くの人々はHTML要素のSECTIONを信じています。これは実際にはWebページにコンテンツを格納するために使用されるジェネリックコンテナ要素と同じものです。 しかし、現実には、これらの2つの要素は両方ともコンテナ要素ですが、一般的なものではありません。 SECTION要素とDIV要素の両方を使用する特定の理由があります。この記事では、これらの違いについて説明します。
セクションとディビジョン
SECTION要素は、Webページやサイトのセマンティックセクションとして定義されます。これは、他のより特定のタイプ（記事や脇にあるもの）ではありません。 私はこの要素を、ページの別個のセクション（他のページやサイトの一部で移動して使用できるセクション）にマーキングするときに使用する傾向があります。 これは、コンテンツの別個の部分、またはコンテンツの「セクション」です。
これとは対照的に、分割するページの部分にはセマンティクス以外の目的でDIV要素を使用します。 CSSで使用するための "フック"を与えるために純粋にそうしている場合、私は部門内のコンテンツ領域をラップします。 セマンティクスに基づいたコンテンツの別個のセクションではないかもしれませんが、自分のページに必要なレイアウトを達成するためには何かを指示しています。
それはセマンティクスに関するすべてのもの
これは理解するのが難しい概念ですが、DIV要素とSECTION要素の唯一の違いはセマンティクスです。 言い換えれば、分割しているコードセクションの意味です。
DIV要素内に含まれるコンテンツには、固有の意味はありません。 次のようなものに最適です。
- CSSスタイルのCSSスタイルとフック
- レイアウトコンテナ
- JavaScriptフック
- HTMLを読みやすくするための部門
DIV要素は、ドキュメントのスタイルを設定したり、列や空想的なレイアウトを作成するためにフックを追加するために必要な要素でした。 そのため、DIV要素で詰まったHTML（ウェブデザイナーが「divitis」と呼ぶもの）に終わった。DIV要素だけを使用したWYSIWYG編集者さえあった。 私は段落の代わりにDIV要素を使用するHTMLを横断して実際に実行しました！
HTML5では、セクショニング要素を使用してより意味的に記述的な文書を作成し（ナビゲーションや説明的な図など）、これらの要素のスタイルを定義することができます。
スパン要素について
ほとんどの人がDIV要素を考えるときに考えている他の要素が要素です。 この要素はDIVのように意味要素ではありません。 これは、インラインブロックのコンテンツ（通常はテキスト）の周りにスタイルやスクリプトのフックを追加するために使用できるインライン要素です。 その意味では、 ブロック要素ではなくインラインでのみDIV要素とまったく同じです。 いくつかの点で、DIVをブロックレベルのSPAN要素と考える方が簡単かもしれませんが、HTMLコンテンツ全体でSPANと同じ方法で使用する方が簡単です。
HTML5には、類似のインラインセクショニング要素はありません。
古いバージョンのInternet Explorerの場合
HTML5を確実に認識しないIEの古いバージョン（IE 8など）をサポートしている場合でも、意味的に正しいHTMLタグを使用するのを恐れてはいけません。 セマンティクスは、あなたとあなたのチームが将来ページを管理するのに役立ちます（なぜなら、そのセクションがARTICLE要素で囲まれているとその記事が記事であることがわかるからです）。 さらに、これらのタグを認識するブラウザは、それらをより良くサポートします。
Internet ExplorerでHTML5セマンティックセクションの要素を引き続き使用することができます。タグをHTMLとして認識させるには、スクリプトや、おそらくDIV要素を追加するだけです。
DIVとSECTION要素の使用
それらを正しく使用している場合は、有効なHTML5ドキュメントでDIVとSECTIONの両方の要素を一緒に使用できます。 この記事では、SECTION要素を使用してコンテンツの意味的に異なる部分を定義し、DIV要素をCSSやJavaScriptのフックとして使用したり、意味的意味を持たないレイアウトを定義したりします。
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：3/15/17