HTMLでサイトやページを作成していくとき「ヘッダー部分やフッター部分」など、意味のあるまとまった部分を区切るためのタグが用意されています。
今回は、bodyタグとその中に入るまとまった構造を区切るタグをまとめます。
ちなみに、セクションのルートとして使われるbody要素のことを「セクショニングルート」、body要素の中で範囲を明確にするための要素を「コンテンツセクショニング」といいます。
意味のあるまとまった構造を区切るタグ一覧
コンテンツ部分を区切るタグ一覧
body：(本文のコンテンツ部分)
header：(導入的コンテンツ部分)
footer：(締めくくりコンテンツ部分)
nav：(ナビゲーション部分)
h1~h6：(見出しコンテンツ部分)
aside：(関連性の薄いコンテンツ部分)
article：(記事や独立したコンテンツ部分)
address：(連絡情報などのコンテンツ部分)
main：(主要コンテンツ部分)
section：(汎用的なコンテンツ部分)
body
body(ボディ)は、文書の本文「画面に表示されるコンテンツ」を区切るために使われます。
【書き方】
<html>
<head>
</head>
<body>
<!–ここに本文を書いていく–>
</body>
</html>
header
header(ヘッダー)は、導入部分「メニュー・記事タイトル」などのコンテンツを区切るために使われるタグです。
【書き方】
<body>
<header>
<!–記事タイトル・メニューなどをここに入れます–>
</header>
</body>
※headタグとは別物なので注意してください。
footer
footer(フッター)は、締めくくり部分「著作権・戻るリンク・関連ページへのリンク」などのコンテンツを区切るために使われるタグで。
【書き方】
<body>
<header>
……
</header>
<footer>
<!–著作権・戻るリンク・関連ページへのリンクなどをここに入れる–>
</footer>
</body>
nav
nav(ナビゲーション)は、主要なリンクメニュー部分「ナビゲーションバー」などのコンテンツを区切るためのタグです。
【書き方】
<nav>
<ul>
<li>…<li> <!–主要メニューをここに入れる–>
<ul>
</nav>
※nav要素はリストタグを必ず使うという訳ではなく、「pやh」などの文章タグに使うこともできます。
h1~h6
h1~h6(ヘディング)は、見出し部分を区切るためのタグです。数字で重要度が変わり、h1がいちばん重要度が高く、h6がいちばん重要度が低くなります。
【書き方】
<h1>記事のタイトル</h1>
<p>テキスト</p>
<h2>ページの大見出し</h2>
<p>テキスト</p>
<h3>ページの中見出し</h3>
<p>テキスト</p>
・
・
・
aside
aside(アサイド)は、メインコンテンツと関連のない部分を区切るためのタグです。
主に、「サイドバー・広告エリア・補足情報」などに使われます。
【書き方/広告エリアの設定】
<aside>
<h2>広告エリア</h2>
<p>広告エリアです。</p>
</aside>
【書き方/サイドバーの設定】
<aside>
<nav>
<section>
<h4>サイドバー</h4>
<ul>
<li>….</li>
</ul>
</section>
</nav>
</aside>
・asideタグを削除しても、メインコンテンツに影響がでない部分に使います。
article
article(アーティクル)は、個々の記事コンテンツを区切るためのタグです。
主に、「ブログ・ニュースの記事や、掲示板の投稿」など、独立したコンテンツに使われます。
【書き方/記事一覧の作成】
<body>
<h1>記事一覧</h1>
<article>
<h1>記事のタイトル</h1>
<p>記事の本文です。</p>
<footer>投稿日:<time>2020-3-11</time>by @…</footer>
</article>
<article>
<h1>記事のタイトル</h1>
<p>記事の本文です。</p>
<footer>投稿日:<time>2020-3-11</time>by @…</footer>
</article>
</body>
【表示のされ方】
記事一覧
記事のタイトル
記事の本文です。
投稿日:2020-3-11 by @…
記事のタイトル
記事の本文です。
投稿日:2020-3-11 by @…
【書き方/ブログ内のコメント作成】
<article>
<header>
<h2>記事のタイトル</h2>
<p><time datetime=”2020-3-11T18:00:00″>2020/3/11 18:00</time></p>
</header>
<p>記事の本文です。</p>
<section>
<h3>【コメント】</h3>
<article>
<p>ユーザーからのーコメント</p>
<footer>
<p>投稿者：名無しさん</p>
<p><time datetime=”2020-3-12T18:01:00″>2020/3/12 18:01</time></p>
</footer>
</article>
<article>
<p>ユーザーからのコメント</p>
<footer>
<p>投稿者：名無しさん</p>
<p><time datetime=”2020-3-12T18:05:00″>2020/3/12 18:05</time></p>
</footer>
</article>
</section>
</article>
【表示のされ方】
記事のタイトル
2020/3/11 18:00
記事の本文です。
【コメント】
ユーザーからのコメント
投稿者：名無しさん
2020/3/12 18:01
ユーザーからのコメント
投稿者：名無しさん
2020/3/12 18:05
address
address(アドレス)は、連絡先・問い合わせ先情報のコンテンツ部分を区切るためのタグです。
【書き方】
<address>
<p>
<!–連絡先・問い合わせ先の情報をここに書く–>
</p>
</address>
main
main(メイン)は、文書のメインコンテンツ部分を区切るためのタグで、ページ内で１つだしか使えません。
【書き方】
</header>
<main>
<h1>メインコンテンツ</h1>
<nav>
<ul>
<li>…</li>
</ul>
</nav>
<article id=”article1″>
<h2>記事その1</h2>
…
</article>
<article id=”article2″>
<h2>記事その2</h2>
…
</article>
</main>
section
section(セクション)は、汎用的に使えるコンテンツ部分を区切るために使います。
主に、「概要や見出し」など、意味のある１つのまとまり部分に使います。
【書き方】
<article>
<h2>概要について</h2>
……
<section>
<h3>概要1</h3>
<p>概要1の内容….</p>
</section>
<section>
<h3>概要2</h3>
<p>内容….</p>
</section>
</article>
【表示のされ方】
概要について
……
概要1
概要1の内容….
概要２
概要2の内容….
コンテンツ部分を区切るタグで正しくマークアップしよう【まとめ】
【セクショニングルート】
【種類】
・body
【意味】
・HTML文書のコンテンツ部分を表す要素で、文書中に1つだけ配置できる。
【コンテンツセクショニング】
【種類】
・header
・footer
・nav
・h1~h6
・aside
・article
・address
・main
・section
【意味】
・コンテンツの範囲を「識別/明確」にするための要素
大まかなアウトラインを作成していくときに、セクショニング要素は重要になります。
セクショニング要素はいわゆる骨組みにあたる部分です。これらの要素で正しくタグ付けをしていかなければ、より良いサイト・ページを作っていくことは困難です。
