HTML <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

見出し(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>第１章</h1>
  <p>本文1</p>
</section>
<section>
  <h1>第２章</h1>
  <p>本文2</p>
</section>

タグの省略

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

コンテンツモデル

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

• テキスト
• <abbr>
• <audio>
• <b>
• <bdo>
• <br>
• <button>
• <canvas>
• <cite>
• <code>
• <data>
• <datalist>
• <dfn>
• <em>
• <embed>
• <i>
• <iframe>
• <img>
• <inpput>
• <kbd>
• <label>
• <math>
• <meter>
• <noscript>
• <object>
• <output>
• <picture>
• <progress>
• <q>
• <ruby>
• <samp>
• <script>
• <select>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <svg>
• <textarea>
• <time>
• <var>
• <video>
• <wbr>

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