【HTML5】h1-h6タグとは？使い方についてまとめ

h1-h6の概要

hはheading（見出し）の意味です。セクションの見出しをh1からh6までの6段階で表します。h1が一番大きな見出し、h6が一番小さな見出しとなります。

注意点

見出しレベルを飛ばすことはやめましょう。h要素は常にh1から始め、次にh2、と順番になるように使いましょう。

h1-h6に入れられるタグ一覧

タグ早見表

a abbr area audio b bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd label link map mark math meta meter noscript object output progress q ruby samp script select small span strong sub sup svg textarea time var video wbr テキスト

入れられるタグのカテゴリー・モデル

h1-h6に使える属性

属性とは<h1-h6> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id	概要	要素に対してID固有の識別名を付けることができます。
id	属性の値	英字から始まる英数字
class	概要	要素に対して分類名を付けることができます。
class	属性の値	英字から始まる英数字
style	概要	要素に対して直接スタイルを指定することができます。
style	属性の値	スタイルシートのコード

グローバル属性一覧はこちら

スポンサードサーチ

h1-h6の使い方

<article>
<h1>新着記事一覧</h1>
<p>JAM25の最新記事一覧です。</p>
  <article>
    <h2>記事1</h2>
    <p>記事1が入ります。</p>
      <address>投稿者: JAM25</address>
      <time>2019-07-07 12:00</time>
  </article>
  <article>
    <h2>記事2</h2>
    <p>記事2が入ります。</p>
      <address>投稿者: JAM25</address>
      <time>2019-07-01 12:00</time>
  </article>
</article>

ブラウザ対応状況

ブラウザの対応（PC)
Chrome	あり
Safari	あり
Internet Explorer	あり
Edge	あり
Firefox	あり
Opera	あり
ブラウザの対応（SP)
Chrome	あり
Safari	あり
Samsung Internet	あり

h1-h6の使い方についてまとめ

h1-h6の概要

注意点

h1-h6のカテゴリー

コンテンツカテゴリー

コンテンツモデル