【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タグの違いは?
格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

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要素について詳しく知りたい方は以下の記事をご覧になって下さい。

2021年5月31日【SEOに重要!?】pタグの意味は? divタグとの違い・デフォルトスタイルも分かりやすく解説!

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

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

リンク

5.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント