もじゃもじゃラボ/HTML超入門！押さえておきたいマークアップの基本/タグの種類/セクション
HTMLCSSJavaScriptJava
HTMLCSSJavaScriptJava

セクション

HTML超入門！押さえておきたいマークアップの基本
JavaScriptでプログラミングの基本的概念を学ぼう！
Webページに動きをつけるプログラミングを学ぼう！
ライン公式アカウント
オンラインレッスンのお得なクーポン配信しています！
このチャプターの目次

セクション

コンテンツの区切りを明確にするという役割があります。役割をより明確にするための分類です。

body

用途本文の基点（ルート）
書式
ブラウザに表示される部分、全体のことを指すタグです。

article

用途記事
書式
記事の部分を意味づけするタグです。このタグは、単独でも成り立つコンテンツに使用されます。例えば、ニュースサイトの記事やブログの記事などです。1つのニュースの見出しと本文をまとめる用途に使用されます。また、作者が書いた見出しと本文（アイキャッチ画像などがある場合はそれも含めて）をまとめる用途でも使用されます。記事とは、あいまいな表現ですが、簡単に言うと人が書いた文章にタイトルがついたもののことです。

nav

用途ナビゲーション（サイトの誘導）
書式
サイト内の誘導が役割となります。これはメニューなどで利用されます。また、ページ送りのような部分もサイトの誘導となるため、nav要素の使用が適切です。

main

用途文書の中心的な主題
書式
そのページの主要なコンテンツの意味付けに使用します。

aside

用途主要なコンテンツに関連はしているが直接は関係のない補足情報
書式
このタグは、ページの主要なコンテンツと関連はしていますが、直接的な関係はない補足情報などに使用されます。サイドバーなどの場所でよく使用されます。

section

用途同じ分類のいずれの要素にもあたらないセクション
書式
このグループの中では最も汎用的なタグです（具体的な文書構造の意味を持っていません。コンテンツとコンテンツを区切るためのタグです）。他の要素は明確な意味を持っています。例えばarticleやnavなどです。sectionは、このグループの中のタグ、いずれにも当てはまらないような場合に使用します（似たようなdivタグも存在しますが、sectionタグは見出しをつけることができるかどうかに基づいて使用されることが特徴です）。

h1〜h6

用途見出し
書式サンプルソース参照
見出しです。コンテンツの見出しを表現する際に使用します。"見出しをつけた"ということはある意味で、"コンテンツに章・節・項の区切りを入れた"ということになります。

サンプルコード

header

用途ヘッダー
書式
コンテンツの導入部を示します。1ページに1つだけしか使えないという制約はありません。コンテンツの導入部の意味を指す場所には、headerタグを使用することができます。

footer

用途フッター
書式
著作権情報や、関連文書へのリンクなどを記述する箇所です。

address

用途連絡先・問い合わせ先
書式
連絡先やお問い合わせ先などの情報を記載します。

セクションのタグでレイアウトしてみた

セクションの分類に属するタグを使ってページをレイアウトしてみました。
  • 画面の上部にはheaderを、画面の下部にはfooterを配置します。
  • コンテンツの主要な部分には、mainタグを使用します。
  • 関連した補足情報を表示する部分として、asideでサイドバーを作ります。
  • サイトを誘導するようなメニューはheaderの中にnavを入れておきましょう。
  • mainの中はarticleで記事をマークアップします。
  • 記事にはタイトルがありますのでh2で見出しをつけてやりましょう。
  • 記事ではないブロックにはsectionタグを使います。
  • footerにはお問い合わせ先の情報などがあるかもしれません。
実際には、作り上げようとしているデザインやコンテンツによって構造は変わってくると思います。
また、HTMLを書いただけでは、この例のmainとasideのようにブロックは横並びにはなりません。横並びにするにはCSSを使います。