h1 ~ h6 要素 （HTMLタグ）

HTMLのh1～h6要素の説明です。h1～h6要素は、その要素内容がセクションまたはセクショニングルートの見出しであることを示す要素です。要素名に含まれる1～6までの数字は、見出しの階層を表しています。h1要素がもっとも上位の階層の見出しで、h6要素がもっとも下位の階層の見出しです。

---

目次

1. 要素の記述例
   • 閲覧中ブラウザーでの表示結果
2. 要素の説明
3. 利用できる属性
   • グローバル属性
   • イベントハンドラ属性
4. ブラウザデフォルトCSS設定
   • Google Chromeの場合

要素の記述例

<h1>トップレベルの見出し</h1>
<section>
  <h2>２番目レベルの見出し</h2>
  <section>
    <h3>３番目レベルの見出し</h3>
    <section>
      <h4>４番目レベルの見出し</h4>
      <section>
        <h5>５番目レベルの見出し</h5>
        <section>
          <h6>６番目レベルの見出し</h6>
        </section>
      </section>
    </section>
  </section>
</section>

 

閲覧中ブラウザーでの表示結果

 

要素の説明

• h1～h6要素は、その要素内容がセクションまたはセクショニングルートの見出しであることを示す要素です。
• h1～h6要素の要素名に含まれる1～6までの数字は、見出しの階層を表しています。
• h1要素がもっとも上位の階層の見出しで、h6要素がもっとも下位の階層の見出しです。

 

利用できる属性

グローバル属性

HTMLのすべての要素はグローバル属性が利用できます。グローバル属性の一覧については「グローバル属性」を参照してください。

イベントハンドラ属性

h要素がサポートするイベントハンドラ属性については「イベントハンドラ属性」を参照してください。

ブラウザデフォルトCSS設定

Google Chromeの場合

h1 {
  display: block;
  font-size: 2em;
  -webkit-margin-before: 0.67em;
  -webkit-margin-after: 0.67em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

h2 {
  display: block;
  font-size: 1.5em;
  -webkit-margin-before: 0.83em;
  -webkit-margin-after: 0.83em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

h3 {
  display: block;
  font-size: 1.17em;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

h4 {
  display: block;
  -webkit-margin-before: 1.33em;
  -webkit-margin-after: 1.33em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

h5 {
  display: block;
  font-size: 0.83em;
  -webkit-margin-before: 1.67em;
  -webkit-margin-after: 1.67em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

h6 {
  display: block;
  font-size: 0.67em;
  -webkit-margin-before: 2.33em;
  -webkit-margin-after: 2.33em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}