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

タグの省略

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

内容

h1 - h6 の内容には記述コンテンツを含めることができる。具体的には、次の要素である。

JavaScript

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

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

HTMLHeadingElementインタフェースのプロパティ
プロパティ 型 説明
accessKey DOMString accessKey属性
dataset DOMStringMap カスタムデータ属性（読み取り専用）
dir DOMString dir属性
innerText DOMString ノードに描画されるテキストの内容
lang DOMString lang属性
style CSSStyleDeclaration style属性
title DOMString title属性

CSS

border-right
右の境界線の太さ、種類、色を指定するCSSプロパティ 
<h6 style="border-right: medium solid gray">
  EXAMPLE
</h6>
EXAMPLE

参考文献

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