[hタグとpタグの違いは?] htmlの見出し「h1・h2・h3・h4・h5・h6要素」を分かりやすく解説!

h1・h2・h3・h4・h5・h6要素について知りたい人

h1・h2・h3・h4・h5・h6要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること
  • h1・h2・h3・h4・h5・h6要素とは?
  • h1・h2・h3・h4・h5・h6要素の使い方
  • h1・h2・h3・h4・h5・h6要素の注意点
  • hタグとpタグの違いは?

h1・h2・h3・h4・h5・h6要素は見出しを作るときに利用する要素です。

hはheadingの略で見出しという意味です。

数字が大きくなるにつれて上位の見出しとなります。

つまりh1要素が最上位の見出しです。

よく利用する要素の一つなのでしっかりと理解しておく必要があります。

そこでこの記事ではh1・h2・h3・h4・h5・h6要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

h1・h2・h3・h4・h5・h6要素の評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)

1.h1・h2・h3・h4・h5・h6要素とは?

見出しを表しているHTMLタグはh1、h2、h3、h4、h5、h6の6つが存在しています。

1から6は見出しの重要度を示すレベルを数字として表現したものとなっています。

h1が最もレベルが高い要素となっており、h6が最もレベルが低い要素となっています。

見出しタグをしっかりと理解して利用することで検索エンジンにも評価されやすいコンテンツになります。




2.h1・h2・h3・h4・h5・h6要素の使い方と注意点

以下の例では、h1、h2、h3要素を利用したものです。

Webページのタイトルをh1要素を利用して表しています。

article要素の記事セクション内におけるアウトラインは、記事の見出しと小見出しの階層構造をh2、h3要素で生成しています。

・・・

<body>
 <header>
  <h1>全体の見出し</h1>
 </header>
 <article>
  <h2>記事の見出し</h2>
  <p>記事の文章</p>
  <h3>記事の小見出し</h3>
  <p>記事の文章</p>
 </article>
</body>

・・・




3.h1・h2・h3・h4・h5・h6要素の注意点

見出し要素はSEOの面からみても重要な要素です。

そのため、これからお話することを注意しながら使いましょう!

見出し要素を利用する際の注意点
  • デザインを調整するために見出し要素を使わない
  • h1要素は1ページに1つだけ
  • h1~h6要素の順番をしっかりと守る

デザインを調整するために見出し要素を使わない

デザインを調整するために見出し要素を多用する方がいます。

見出し要素はデザインを調整するものではなく、ページの階層をユーザーや検索エンジンに分かりやすくしめすものです。

もし、デザインを調整したい場合は見出し要素ではなく、文字サイズ、文字色を変えたりするなどで調整しましょう!

h1要素は1ページに1つだけ

h1要素は1ページに1つだけです。

h1要素はもっとも重要な見出しに使用するようにしましょう。

そのためh1要素は、タイトルに設定するのが自然です。

h1~h6要素の順番をしっかりと守る

見出しタグはh1要素から始まり、h6要素まであります。

これらを使用する場合、しっかりと順序を守るようにしましょう。

例えば、h1要素の次に来るのはh2要素、h2要素の後に来るのはh3要素というように順番を守って使用します。




4.hタグとpタグの違いは?

よく利用されるhタグとpタグの違いをみていきましょう。

結論からお話しますと文章の見出しにはhタグ、段落にはpタグを使用します。

文章の見出しをつけるには、h1要素、h2要素、h3要素、h4要素、h5要素、h6要素を使って表します。

見出しの次は、文章を書いていきますが、その文章の一つの区切りとなるのが段落です。

その際にpタグを利用します。

pタグの「p」はparagrahpの頭文字で、段落という意味となっています。


↓↓↓↓ p要素について詳しく知りたい方は以下の記事をご覧になって下さい。

[SEOに重要!?] pタグの意味は? divタグとの違い・デフォルトスタイルも分かりやすく解説!

 

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

 

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?