section要素

<section>は、ページ内のその部分が一つの文章の章や節(セクション)であることを示すタグ。見出しを含む文章の区切りなどに使用します。

section要素内には見出しタグが必要

前述にあるように<section>で囲われた箇所は、章や節であることを意味づけるので<section>要素内には必ず、h1~h6の見出しタグが必要不可欠です。

どの見出しタグから記述しても大丈夫なようですが、ページ全体の文章構成の流れがおかしくならないよう注意。

<section>タグは、ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。

セクションとは、文書やアプリケーションの一部分となる、意味や機能のひとまとまりのことです。 ウェブページ内のセクションとしては、例えば、導入部分、新着情報、連絡先などが考えられます。

<section>-HTML5タグリファレンス

sectionが必要?不必要?と迷ったら…

なんとなく理解できたと思って、コーディングし始めると、ここは<section>で囲うか囲わないべきか?と戸惑うことがあります。

そんなときは見出しが必要か必要でないかで判断するといいそうです。
「見出しが必要ないor無理に付ける内容でもない」=「章や節として区切る必要はない」と判断できるから、<section>で囲う必要もないってわけですね。

section使用の注意点

  • レイアウト目的で使用しない。レイアウト目的なら<div>を使用。
  • 見出しを付けれない、また付ける必要ながない部分を<section>で囲まない。

article、nav、aside、header、footerなどもセクションのひとつ

より具体的な意味がある内容は、各セクションタグにあわせコーディングすることが重要です。
例えば、コンテンツの主要内容であれば<article>、ナビゲーションであるなら<nav>、コンテンツ本文と関係あるがややそれる内容であるなら<aside>を使用する…など。

HTML5でサイトをコーディングする際は、各セクション要素の意味を理解しておくことが必要不可欠ですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です