HTML <h1> から <h6> タグ

定義と使用方法

<h1> から <h6> タグはHTMLタイトルの定義に使用されます。

<h1> 最も重要なタイトルを定義してください。<h6> 最も重要でないタイトルを定義してください。

注意してください。

各ページに1つだけ使用してください。 <h1> - これはページ全体の主要なタイトル/トピックを代表するべきです。また、タイトルのレベルをスキップしないでください。 <h1> 最初に始め、その後使用 <h2>などと続きがあります。

h要素は明確な意味を持っているため、ドキュメントの構造を構築する際には適切なタグレベルを選ぶことをお勧めします。したがって、同じ行でのフォントサイズを変更するためにタイトルタグを使用しないでください。代わりに、美しい表示効果を達成するためにカascading Style Sheets（CSS）を使用してください。

HTML タグの選択と使用に関する情報をさらに詳しく知りたい場合は、次の本を読んでください《Web 質量》。

参照もしくは

HTML チュートリアル：HTML タイトル

HTML DOM リファレンスマニュアル：Heading オブジェクト

例

例1

6つの異なるHTMLタイトル：

<h1>これはタイトル1</h1>
<h2>これはタイトル2</h2>
<h3>これはタイトル3</h3>
<h4>これはタイトル4</h4>
<h5>これはタイトル5</h5>
<h6>これはタイトル6</h6>

実際に試してみる

例2

タイトルの背景色とテキスト色を設定する（CSSを使用して）：

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h2 style="color:Tomato;">Hello World</h2>

実際に試してみる

例3

タイトルのアライメントを設定する（CSSを使用して）：

<h1 style="text-align:center">これはタイトル1</h1>
<h2 style="text-align:left">これはタイトル2</h2>
<h3 style="text-align:right">これはタイトル3</h3>
<h4 style="text-align:justify">これはタイトル4</h4>

実際に試してみる

グローバル属性

<h1> - <h6> タグはサポートしています HTML 中のグローバル属性。

イベント属性

<h1> - <h6> タグはサポートしています HTML 中のイベント属性。

默认的 CSS 設定

ほとんどのブラウザでは以下のデフォルト値を使用して表示されます <h1> 要素：

例1

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

実際に試してみる

ほとんどのブラウザでは以下のデフォルト値を使用して表示されます <h2> 要素：

例2

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

実際に試してみる

ほとんどのブラウザでは以下のデフォルト値を使用して表示されます <h3> 要素：

例3

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

実際に試してみる

ほとんどのブラウザでは以下のデフォルト値を使用して表示されます <h4> 要素：

例4

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

実際に試してみる

ほとんどのブラウザでは以下のデフォルト値を使用して表示されます <h5> 要素：

例 5

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

実際に試してみる

ほとんどのブラウザでは以下のデフォルト値を使用して表示されます <h6> 要素：

例 6

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

実際に試してみる

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート