h1, h2, h3, h4, h5, h6要素 - 見出し
当ページのリンクには広告が含まれています。
スポンサーリンク
ここでは HTML5 の h1 〜 h6（h1, h2, h3, h4, h5, h6）要素についてみていきます。
h1 〜 h6要素の概要
h1 〜 h6要素は、HTMLドキュメントの見出しや section要素の見出しを表します。
| カテゴリー |
フロー・コンテンツ ヘッディング・コンテンツ |
| コンテンツモデル | フレージング・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 |
h に続く数字が小さい程、高いランクの見出しを意味します。h1 が最高ランクの見出しで、h2・h3・h4・h5・h6 と1つずつランクが低くなっていきます。
<h1>ランク1 の見出し</h1> <h2>ランク2 の見出し</h2> <h3>ランク3 の見出し</h3> <h4>ランク4 の見出し</h4> <h5>ランク5 の見出し</h5> <h6>ランク6 の見出し</h6>
h1 に含まれるテキストは、Googleの検索順位にも大きく影響するので、HTMLドキュメントのページ内容を適切に表現しましょう。
h1 〜 h6要素を使うと、そこから新しいセクションですよ！ と暗黙的にセクションが指定されます。
暗黙的にセクションを指定しても問題はありませんが、HTML5 にはセクショニング・コンテンツ（article要素, aside要素, nav要素, section要素）があるので、それらを使って、明示的にセクションを指定することが推奨されています。
使用例 - 暗黙的にセクションを指定
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>h1 〜 h6要素 - 見出し</title> </head> <body> <h1>暗黙的にセクション指定</h1> <h2>見出し①</h2> <h3>中見出し</h3> <h4>子見出し</h4> <h2>見出し②</h2> <h3>中見出し</h3> </body> </html>
表示
使用例 - 明示的にセクションを指定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>h1 〜 h6要素 - 見出し</title>
</head>
<body>
<h1>明示的にセクション指定</h1>
<section>
<h2>見出し①</h2>
<section>
<h3>中見出し</h3>
<section>
<h4>子見出し</h4>
</section>
</section>
</section>
<section>
<h2>見出し②</h2>
<section>
<h3>中見出し</h3>
</section>
</section>
</body>
</html>
表示
スポンサーリンク
スポンサーリンク