最終更新日 2021年4月7日

h1～h6要素

各要素はh1、h2…h6の順番で段階的に見出しレベルが設定されます。

section要素に対応したブラウザなら、section要素を入れ子構造にすることで、h2～h6の要素を使わずにh1要素だけを使って見出しレベルを順序付けすることもできます。

section要素は、Flowコンテンツの記述箇所で使用できます。

HTML5での変更点

・h1～h6要素のalign属性は廃止されました。代わりにCSSを使います。

カテゴリ	タグの省略	親要素	子要素
Flowコンテンツ Headingコンテンツ	省略不可	hgroup、Flowコンテンツを子にできる要素	Phrasingコンテンツ

属性	値	説明
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>マクドエイドメニュー</title>
  </head>
  <body>
    <h1>メニュー一覧</h1>
    <h2>ドリンクメニュー</h2>
    <h3>アイスコーヒー</h3>
    <p>深いコクとすっきりとした切れの良い後味が特徴です。</p>
    <h3>カフェラテ</h3>
    <p>フォームミルクを加えただけのシンプルな味わいです。</p>
    <h3>バニラシェイク</h3>
    <p>バニラの香りと甘さ、クリーミーな感触が楽しめます。</p>
  </body>
</html>

参考文献：W3C HTML5「4.4.6 The h1, h2, h3, h4, h5, and h6 elements」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。