HTMLで使う見出し用のhタグとは？
初めまして！Webデザイナーになったばかりのアヤネです！
今回はhタグについて記事にしました。この記事を見てくれた人に「hタグについて知れた！」と言ってくれるように説明できたらと思います。
① hタグとは？
まずHTMLで使用するhタグは「見出しを設定するためのタグ」です。サイトだけでなく雑誌やポスターでも見出しはよく使用されています。
そんなhタグですが、6種類あります。（※h7以降はないので注意！）全部見出し用のタグです。hに書いてある数字は、
<h1>Webページの中で1番大きい見出し</h1>
<h2>Webページの中で2番目に大きい見出し</h2>
<h3>Webページの中で3番目に大きい見出し</h3>
<h4>Webページの中で4番目に大きい見出し</h4>
<h5>Webページの中で5番目に大きい見出し</h5>
<h6>Webページの中で6番目に大きい見出し</h6>
という意味を持っていて、数字ごとに見出しの重要度も変わっていきます。
② hタグを使用するときの3つのルール
見出し用に使うタグというのが分かったからといって、hタグを適当に使用するのはNGです。「hタグを使用するときの3つのルール」があります。そんなルールについて詳しく説明します。
❶ hタグの使う順番
hタグには、使う順番があります。数字を数えるのと同じで、「h1 ⇒ h2 ⇒ h3 ⇒ h4⇒ h5 ⇒ h6」と使用します。いきなりh6から使うのはNGです。
❷ h1タグは1回しか使用してはいけない
h1タグは「Webページの中でメインとなる見出しタグ」です。複数使用してしまうとWebページを見ている人が「一番重要なのはどこ？」と感じたり、検索エンジンという、検索した内容をブラウザに表示してくれる機能が、「このWebページは検索の内容に当てはまるのだろうか？」と思い、見つけてもらえない可能性があります。
❸ h2〜h6タグ以降は何回でも使用してOK
h1タグは1回のみの使用ですが、h2タグ以降は複数使用してもOKです！同じ重要度のある見出しを書くことはあると思うので、必要な分だけ使用しましょう。
③ 各hタグの使い分け
hタグの意味やルールが分かったけど、h1はどこで使用すればいいのか？順番ってどんな風に守ればいいの？h2以降の複数使用はどうするの？という疑問はまだたくさんあると思います。詳しく見ていきましょう。
たとえば、こんな感じの自己紹介ページを制作したとします。
どこになんのhタグ（見出し）が使われているか分かりますか？探してみると…
このように使用しています。ルール通りに使用していますが、h2以降の複数使用はどうやっているのかをもっと詳しく見ていきましょう。
こんな感じで見るとわかりやすいかと思います。h2以降の複数の使い方は、「各内容のグループの中でhタグ（見出し）を順番に使う」ことです。h3以降も「h2のグループの中でh3以降を使用する」という感じで同じように使用します。h4、h5、h6もグループごとに使い分けていきます。
④ hタグのアウトライン構造
「アウトライン構造」というのは「階層構造」とも言います。各hタグが枝分かれになっているような感じです。
図で表してみると…
このように、「アウトライン構造」を守って載せる内容をまとめると各hタグの使う場所がわかりやすくなったり、自分も相手もWebサイトが見やすくなります。
⑤ まとめ
hタグについて説明しましたが、まとめてみると…
・hタグは「見出しを設定するためのタグ」である。
・hタグは6種類あって、h1〜h6の順番に重要度が違ってくる。
・数字を数えるようにhタグも順番に使用していく。
・h1タグはWebページにメインの見出しとして、1つだけ使用する。
・h2〜h6は各内容のグループの中で複数使用してもよい。
・アウトライン構造を守ってhタグを使用する。
こんな感じだと思います。
はじめて記事を書きましたが、これからもコーディングの内容を載せられたらなと思います。
この記事を見ていただきありがとうございました！
参考にしたサイト
この記事が気に入ったらサポートをしてみませんか？