【HTML】見出しタグの考え方を理解しよう

ども！てばさきです。

HTML文書でbody部分を作るのに必要な見出しタグ。

全ての記事はタイトルと見出しで成り立っているので、コンテンツの文章を作成するために欠かせない要素になります。

とてもシンプルですが、正しく理解して活用していきましょう。

見出しタグの種類

見出しタグは全部で６種類あります。

例えばコレ以外に<h7>以降の数字のタグを使用してもブラウザが認識出来ないんです。

なので６つまでしか使えないんだなぁとぼんやり覚えておくと良いと思います。

 

<h1>が最も大きな見出しで、２、３、４、５、６……と数字が上がるにつれて見出しが小さくなっていきます。

実際に書いたコード

 

ちなみに…

<h2><h4><h6>

のように飛ばして使うことは出来ません。

 

フォントの大きさが変わるだけのように思うかもですが、そういった用途では使いません。

あくまで見出しとしてルールに沿って使用します。

<h1></h1>は記事タイトル

<h1></h1>はWebページのタイトルや記事のタイトルとして使用します。

そのためページ内では１度しか使用出来ません。

このサイト内の<h1>

個人的には<h1>タグは見出しと思ってないくらいです。タイトルにのみ使える特別な見出しなので＾＾

<h2></h2>は本文の大見出し

<h2>は本文中の大見出しですね。

タイトルにしか使えない<h1>タグとは違い、<h2>以降は本文中で何度でも使用できます。

このサイト内の<h2>

<h3></h3>は中見出し

<h3>は本文中の中見出しですね。

こちらも何回でも使用する事が出来ます。

ブログなどの記事では比較的よく使う印象がありますね。

このサイト内の<h3>

<h4></h4>は小見出し

<h4>は本文中の小見出しです。

使用回数無制限ですが、そこそこの長文記事でない限りはたまにしか使用しない感じですね。

<h5></h5>、<h6></h6>は…

<h5>、<h6>タグは正直使用頻度は高くないと思います。

改装分けの細かいサイトでは時たま見かけることはありますが、階層が多くなると使いこなすのが難しいので、自分の中ではぶっちゃけ空気的な存在です。

 

WordPressとはてなブログで異なる見出しタグ

見出しタグはそのWebサービス毎に使い方の微妙な違いがあったりします。

自身がそれを実感したのが、はてなブログからWordPressに記事を移行した時です。

 

はてなのようなブログサービスは<h1>タグが記事ページでは記事タイトル、トップページではブログ名という風になっています。

例えばWordPressでブログ運営をしている当サイトのブログ名『てばろぐ』はもちろん<h1>タグで作った見出しではありません。自分だけの個人的なサイトですからね。

これがはてなブログの場合はサイト名が『Hatenablog』であり、そこでブログを書かせてもらっているから、自分のサイト名『てばろぐ』が<h1>の見出しになっていたと言う事なんですよね。

 

更にはてなブログの不思議なところが、大見出しが<h3>タグになっているという点。

つまりWordPressでは

であるのに対し、はてなブログだと

という感じで、h２タグが消失してしまっているわけです。

 

ですので、Webデザインの学習をするにあたってブログでWebサイトの構築を勉強するのであればWordPress一択だと思うわけです。

ブログサービスではこのようなイレギュラーがあるのでWebサイトの運営の全体図は掴みづらいんですよね…

 

まとめ：見出しタグをしっかり理解してページを作ろう

見出しタグ６種類を使い方も含めてまとめました。