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

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

タグ

<h1>第1部</h1>
<h2>第1章</h2>
<h3>第1節</h3>
<h4>第1項</h4>
<h5>第1目</h5>
<h6>1</h6>

属性

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

class
CSSのクラスを指定する。空白で区切って複数のクラスを指定することもできる。
<h1 class="title">Example</h1>
data-*
カスタムデータ属性を指定する。カスタムデータ属性とは、JavaScriptから独自の属性を読み取るための仕組みである。
dir
テキストを記述する方向を指定する。
dir属性
ltr 左から右へ記述する (日本語や英語など)
rtl 右から左へ記述する (アラビア語など)
auto ユーザーエージェントに決定させる
<h1 dir="ltr">Example</h1>
id
要素の一意な識別子を指定する。
<h2 id="INTRODUCTION">はじめに</h2>
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 - 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属性

HTMLタグ

HTMLタグには次のものがある。