![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2023/07/24
こんにちは。デジナーレ福岡オフィスの徳安です。
この記事では、HTML5で新たに追加された要素と属性について解説いたします。
セクション要素とは？？
セクション要素とは、「見出しとそれに伴う文書のひとかたまりのこと」を表します。
HTML5で導入された新しい要素で、
HTMLの文書構造をより明確にグループ化ができるようになりました。
文章は、章や節、項といった見出しをつけることで、
階層構造になっていますが、
この文章の階層構造のことをアウトラインといいます。
| 4つのセクション要素 | |
|---|---|
| section要素 | 章・節・項などの見出しと文書を伴う一般的なセクションを表す要素 |
| article要素 | それだけで自己完結していて、独立したセクションを表す要素 |
| aside要素 | メインコンテンツとは関連性が低い補足や広告などで、取り外しても問題のないセクションを表す要素 |
| nav要素 | ナビゲーションを表す要素 |
文書のアウトラインを作成する方法
-
-
- 見出し要素で階層化（h1～h6）
- セクション要素の入れ子
-
HTMLでアウトライン化する方法は、この２つの方法があります。
＊＊＊＊＊＊＊＊＊＊＊＊＊
1. 見出し要素で階層化（h1～h6）
階層構造に合わせて、見出しのレベルを変更して、アウトラインを作成していく方法です。
この方法は「暗黙のアウトライン」と呼ばれます。
＊＊＊＊＊＊＊＊＊＊＊＊＊
2. セクション要素の入れ子
HTML5で新しく追加された、
セクション要素で入れ子構造を作ることで作成していく方法です。
先ほど紹介した「暗黙のアウトライン」との大きな違いは、
セクション要素で入れ子構造を作ることによって、
セクションの終わりを明確にできる点です。
そのため、セクション要素で作られたアウトラインのことを
「明示的アウトライン」と呼ばれます。
4つのセクション要素と使い方
section要素
section要素は、「一般的なセクション」を表す基本的な要素で、
セクションを明示するほかの要素が適している場合は、
そちらを使うことが推奨されています。
※section要素を使用するときの注意点
- section要素を使う場合は、ほとんどの場合で見出しが必要になります。
- section要素をdiv要素の代わりに使うことはできません。
デザイン的に見出しをつけたくない場合は、
CSSを使って非表示にするようにしましょう。
また、レイアウトやスタイリングが目的で使用することはできず、
あくまでセクションを明示するためのものです。
＊＊＊＊＊＊＊＊＊＊＊＊＊
article要素
article要素は、単体で「独立しており、自己完結している要素」を表します。
自己完結しているか悩んだときは、
ページからそのセクション部分を取り出しても、
記事として成立しているかを基準にするとよいでしょう。
ブログの一覧画面を表示したときに、
記事のタイトルが日付ごとにたくさん並んでいる
記事の一つ一つがarticle要素といえます。
article要素もsection要素と同様に、原則として見出しが必要です。
＊＊＊＊＊＊＊＊＊＊＊＊＊
aside要素
aside要素は、
「メインコンテンツとは関連性が低い補足や広告などのコンテンツ」
を表しています。
関連性が低いのであって、
まったくの無関係な内容にaside要素を使用することは適切ではありません。
関連情報のリンクや、本筋から少し外れたコラム、広告などがaside要素として使われます。
＊＊＊＊＊＊＊＊＊＊＊＊＊
nav要素
nav要素は、Webサイトの「ナビゲーション」を表す要素です。
nav要素は主に「主要なナビゲーション」に対して、使用します。
最もわかりやすいのは、グローバルナビゲーションですが、
それ以外にも「パンくずリスト」や「下層ページ用のローカルナビゲーション」など
nav要素としてマークアップできます。
しかし、特に重要ではないナビゲーションに対してはnavでマークアップするのは好ましくありません。
＊＊＊＊＊＊＊＊＊＊＊＊＊
セクション要素と関連の深い要素
| その他の新要素 | |
|---|---|
| header要素 | セクションのheaderを表す要素 |
| footer要素 | セクションのfooterを表す要素 |
| main要素 | メインコンテンツを表す要素 |
header要素 / footer要素
header要素は「セクションのヘッダー」、
footer要素は「セクションのフッター」を表す要素です。
header要素、footer要素の中にもセクション要素を入れることはできます。
＊＊＊＊＊＊＊＊＊＊＊＊＊
main要素
main要素は、「メインコンテンツ」を明示するための要素です。
※注意
main要素は、原則としてページ内で1つしか使用できません。
section / article / aside / nav / header / footer 要素の中でmain要素を使うことはできません。
＊＊＊＊＊＊＊＊＊＊＊＊＊
セクション関連の新要素を使う場合は、各要素の意味を
十分に理解して適切に使用する必要があります。
どの要素を使うか悩んだときは、section要素でマークアップして適切な要素に変更していく、といった方法もあります。
しっかり使い分けて、より本格的なHTML5のマークアップを行いましょう。
ここまで読み進めていただきありがとうございました。
