<h1>, <h2>, <h3>, <h4>, <h5>, <h6> HTMLタグの使い方

見出し(Heading)を付けます。見出しには重要性によって1(最も重要)から6(最も重要でない)までの段階があります。

タグ

<h1>THE LORD OF THE RING</h1>
<h2>THE FELLOWSHIP OF THE RING</h2>
<h2>THE TWO TOWERS</h2>
<h2>THE RETURN OF THE KING</h2>
<h3>BOOK FIVE</h3>
<h4>MINAS TIRITH</h4>
<h3>BOOK SIX</h3>
<h4>THE TOWER OF CIRITH UNGOL</h4>

属性

h1 - h6 タグには次の属性を指定できる。

class
CSSのクラスを指定する。空白で区切って複数のクラスを指定することもできる。
<h1 class="title">Example</h1>
data-*
カスタムデータ属性を指定する。カスタムデータ属性とは、JavaScriptから独自の属性を読み取るための仕組みである。
dir
テキストを記述する方向を指定する。
dir属性
ltr 左から右へ記述する (日本語や英語など)
rtl 右から左へ記述する (アラビア語など)
auto ユーザーエージェントに決定させる
<h1 dir="ltr">Example</h1>
id
HTML文書内で一意な識別子を指定する。
<h2 id="INTRODUCTION">はじめに</h2>
lang
見出しが何語で記述されているかを指定する。
lang属性
説明
ja 日本語
ja-JP 日本語(日本)
en 英語
en-UK 英語(イギリス)
en-US 英語(アメリカ)
th タイ語
th-TH タイ語(タイ)
ondblclick
要素をダブルクリックしたとき実行するJavaScriptを指定する。
style
CSSのプロパティを指定する。セミコロンで区切って複数のプロパティを指定することもできる。
<h3 style="font-size: large;">Heading</h3>
title
要素に関するアドバイザリー情報を指定する。

ページに複数のh1があってもよい

ひとつのページに含まれるh1タグはひとつまで、という制限がHTML4までにはあった。

しかし、HTML5からはひとつのページに複数のh1タグが存在してもよいようになった。

複数のsectionあれば、それぞれのセクション内にh1タグがあってよい。

<section>
  <h1>第1章</h1>
  <p>本文1</p>
</section>
<section>
  <h1>第2章</h1>
  <p>本文2</p>
</section>

タグの省略

h1 - h6 の開始タグと終了タグは省略できない。

コンテンツモデル

h1、h2、h3、h4、h5 及び h6 要素の開始タグと終了タグの間には、記述コンテンツを含めることができる。具体的には、次の要素である。

JavaScript

JavaScriptからは HTMLHeadingElement インタフェースを通じて h1 - h6 要素へアクセスできる。

HTMLHeadingElement インタフェースは次のプロパティを持つ。

accessKey
要素のaccessKey属性
dataset
カスタムデータ属性(読み取り専用)
<h1 id="example" data-author="tsuka" data-date="25 Apr 2023">
  HEADING
</h1>
<script>
  const he = document.querySelector("#example");
  if ("author" in he.dataset === true) {
    console.log(he.dataset.author);
  }
  if ("date" in he.dataset === true) {
    console.log(he.dataset.date);
  }
</script>
dir
要素のdir属性
<h1 id="example" dir="ltr">HEADING</h1>
<script>
  let he = document.querySelector("#example");
  console.log(he.dir);
</script>
innerText
ノードに描画されるテキストの内容
lang
要素のlang属性
<h1 id="example" lang="en">HEADING</h1>
<script>
  let he = document.querySelector("#example");
  console.log(he.lang);
</script>
style
要素のstyle属性
title
要素のtitle 属性
<h1 id="example" title="heading">HEADING</h1>
<script>
  let he = document.querySelector("#example");
  console.log(he.title);
</script>

CSS

h1、h2、h3、h4、h5 及び h6 の要素と組み合わせて使うことが多いCSSプロパティを以下に示す。

border-bottom
下の境界線の太さ、種類、色を指定するCSSプロパティ
<h3 style="border-bottom: medium solid blue">
  HEADING
</h3>

HEADING

border-left
右の境界線の太さ、種類、色を指定するCSSプロパティ
<h3 style="border-left: thick solid blue; padding-left: .5rem">
  HEADING
</h3>

HEADING

text-align
テキストの揃え方を指定するCSSプロパティ
<h3 style="text-align: center">
  HEADING
</h3>

HEADING

参考文献

Web Hypertext Application Technology Working Group (2023) "Sections" HTML Living Standard