最終更新日

h1~h6要素

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

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

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

HTML5での変更点
・h1~h6要素のalign属性は廃止されました。代わりにCSSを使います。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ
Headingコンテンツ
省略不可 hgroupFlowコンテンツを子にできる要素 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」外部リンク
HOME