h1〜h6タグとは?|HTML文書に見出しを付けよう

h1〜h6タグとは?|HTML文書に見出しを付けよう
博士
リンゴくん、今回はブログの記事を読みやすくするためにも重要な<h>タグについて解説するぞい。
リンゴ
<h>タグ。
見出しを付けるときに使うタグですよね。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<h1>〜<h6>タグとは

 

<h1>〜<h6>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類 フロー・コンテンツ / ヘッディング・コンテンツ / パルパブル・コンテンツ
利用場所 hgroupの子要素として / フロー・コンテンツが期待される場所
内容 フレージング・コンテンツ


 
 
<h1>〜<h6>タグは、見出しを付けるときに使用します。
<h1>タグが一番大きな見出し(大見出し)で、数字が小さくなるにつれて下位の見出し(小見出し)となります。
同じ数値の<h>タグが複数ある場合は、同じランクとして扱われます。
 
 
博士
<h1>〜<h6>のhは「Heading(見出し)」の略なんじゃ。
 
 
1つのセクションの中で最初の見出しの後、低いランクの見出しが続く場合には、そのセクションの一部であるサブセクションが開始されたとみなされます。

一般的なブラウザでは、<h>タグで囲まれた文字はサイズが変化し、太字で表示され、前後には改行が入ります。
<h>タグの数字が小さくなるにしたがって文字も小さくなりますが、ブラウザによってその割合は異なります。
この大きさを指定するためには、スタイルシートを使用する必要があります。
 
 

博士
<h>タグには、基本的に文章の章題を書くようにしよう。
 
 

使用例

 
 

表示例

スティーブ・ジョブズとは

アップル社の共同設立者の一人。

略歴

1976年、アップルコンピュータを設立。

人物像

ライバル企業の経営者さえも惹き付ける人間性で知られている。

名言

あなたの時間は限られている。
だから他人の人生を生きたりして
無駄に過ごしてはいけない。

 
 

見出しに画像を使う方法

リンゴ
博士、見出しに画像を使うことはできるんですか?
博士
もちろん可能じゃ。
以下のように記述するといいぞ。
 
 

使用例

 
 
リンゴ
画像も<h>タグで囲むんですね。
博士
そうじゃ。
万が一画像が表示されない場合も、テキストが表示されるよう、必ずalt属性を指定しておこう。
 
 

スポンサーリンク

まとめ

<h1>〜<h6>タグは、見出しを付けるときに使用するタグです。
<h1>に近いほど見出しの重要度は高くなり、<h6>に近いほど低くなります。
 
 

博士
見出しを付けるときは、<h1> → <h2> → <h3> というように、大きい順に付けていくようにしよう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








h1〜h6タグとは?|HTML文書に見出しを付けよう