HTML５の見出しとセクションについて

HTML

2018.08.182018.11.16

見出しタグは<h1>、<h2>、<h3>、<h4>、<h5>、<h6>の6種類があります。

もっとも大きな見出しを<h1>で、もっとも小さい見出しを<h6>で示す仕組みとなっています。

HTML5より前は、ページ内のすべての見出しを<h1>から順にマークアップすることが推奨されていましたが、HTML5からはページを構成するパーツのまとまりである「セクション」ごとに<h1>〜<h6>を使用できるようになっています。

見出しとセクションの利用例

サンプルコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ヘッダーとフッターのサンプルコード</title>
</head>
<body>
<header>
<h1>ちからこぶ</h1>
</header>
<article>
<h1>ちからこぶについて</h1>
<p>プログラマーやシステムエンジニアになりたい、PCについてもっと詳しくなりたい、これからコンピュータについて勉強を始めたいという方を応援するサイトです。ICTのことを中心に様々な情報を発信していきます。</p>
<p>近年急速にIT化が進んでいること、また2020年度から小学校でプログラミング教育が必修化になったことに伴い、初心者の方がICTを気軽に楽しく勉強するのを応援するためにサイトを立ち上げました。</p>
</article>
<foote>
<small>Copyright © ちからこぶ All Rights Reserved.</small>
</footer>
</body>
</html>

サンプルの場合、「セクション」は<body>と<article>によって示されます。そのため、サイト名と記事のタイトルはどちらも<h1>でマークアップしていますが、サイト名は<body>の示すページ全体の、記事のタイトルは<article>の示すコンテンツのセクションの見出し(タイトル)として扱われます。

下記の表は、セクションを示すタグ一覧になります。