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

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

 

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

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

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

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

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

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

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

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

【最短30秒で完了】侍テラコヤの申し込み手順

\学び応援キャンペーン実施中!10%OFFクーポンあり!/
1か月間全額返金保証付き

最短30秒で登録完了! 侍テラコヤをはじめる!

侍テラコヤの申し込み手順をみていきましょう!

申し込みは最短30秒で完了します。

この機会に是非申し込んでみてはいかがでしょうか?

STEP.1
アカウント作成

まずはアカウント作成を行いましょう!

入力項目は名前、メールアドレス、パスワードの3項目のみです!

GoogleまたはFacebookのアカウントを持っていると入力する手間を省くことができます。

STEP.2
請求情報の入力

あとは請求情報を入力するだけです!

カード番号、有効期限、セキュリティコードの3項目のみです!

\学び応援キャンペーン実施中!10%OFFクーポンあり!/
1か月間全額返金保証付き

最短30秒で登録完了! 侍テラコヤをはじめる!

【1分で登録完了】受講料0円! ZeroPlus Gateの無料体験レッスン申し込み手順

\1分で登録完了! 受講料0円!/
【期間限定】ノーリスクで学びたい方におすすめ!

完全無料! ZeroPlus Gateで始める!

ZeroPlus Gateの無料体験レッスン申し込み手順をみていきましょう。

受講スタートまでの流れは以下の通りです。

無料期間は予告なく終了する可能性があります。

少しでも気になる方は是非申し込んでみてはいかがでしょうか?

\1分で登録完了! 受講料0円!/
【期間限定】ノーリスクで学びたい方におすすめ!

完全無料! ZeroPlus Gateで始める!

【10秒で完了】本気のパソコン塾の相談会/無料トライアル申し込み手順

STEP.1
相談会予約

\【期間限定】無料相談会参加特典3つあり!/

  • 特典1:学習コンテンツの1週間無料トライアル
  • 特典2:学習管理シートプレゼント
  • 特典3:副業収入獲得ノウハウ動画プレゼント

相談会はオンライン(Google meet)で実施致します。

ご希望の日時をご予約ください。

※所要時間は30分を予定しております。

STEP.2
相談会の概要

アドバイザーがお客様のキャリアや学習の課題を丁寧に伺った上で、今後についてのアドバイスを致します。

当日お話する内容例

  • エンジニアを取り巻く環境
  • 挫折しないための学習の進め方
  • プログラミング言語について
  • 本気のパソコン塾について

また、現状の課題や不安な事は、遠慮なくご質問ください。

ご相談いただける内容例

  • プログラミング学習に関して
  • 転職・副業・起業について

\【期間限定】無料相談会参加特典3つあり!/

  • 特典1:学習コンテンツの1週間無料トライアル
  • 特典2:学習管理シートプレゼント
  • 特典3:副業収入獲得ノウハウ動画プレゼント