【副業を始めたい人必見!】副業開始マニュアル

【h1~6・pタグ】HTMLで見出し・文章の表示方法を解説!

【h1~6・pタグ】HTMLで見出し・文章の表示方法を解説! HTML

どうも!ニシドラ(@nishidorablog)です。

ニシドラ
ニシドラ

この記事ではHTMLファイルで見出しの書き方と文章の表示方法について解説します。

見出しを付けるタグは「h1~h6タグ」を使い、文章を表示させるタグは「pタグ」を使います。

この2つのタグの使い方と使うときのルールについて詳しく解説していきます。

【HTML初心者向け】まとめ記事一覧

前回の、HTMLの基本文法については、【HTMLの文法】HTMLの基本文法についてわかりやすく解説!でまとめています。

スポンサーリンク

見出しの付け方 h1~h6タグ

h1~h6タグの意味

HTMLで見出しを付けるときは「h1タグ」「h2タグ」「h3タグ」「h4タグ」「h5タグ」「h6タグ」を使います。

「h」の意味は英語で見出しを意味する「heading」の頭文字から来ています。

この6種類のタグで表示される見出しはそれぞれ大きさが違います。

h1タグが1番大きな見出しで、WEBサイトのタイトルや記事の題名などに使われます。
h以降の数字が大きくなるほど小さな見出しになります。

h1~h6タグの使い方

実際にコードを書いて解説します。

<h1>h1タグを使った見出し</h1>
<h2>h2タグを使った見出し</h2>
<h3>h3タグを使った見出し</h3>
<h4>h4タグを使った見出し</h4>
<h5>h5タグを使った見出し</h5>
<h6>h6タグを使った見出し</h6>

上記のコードをメディアエディターで書き、ブラウザで表示すると下画像のようになります。

見出しの画像h1タグで書いた見出しが1番大きく表示され、h6タグで書いた見出しが1番小さく表示されます。

また、h1~h6はブロック要素でタグを閉じると改行されます。

ブロック要素については下の記事で解説しています。
良ければ参考にしてみてください!

h1~h6を使うときのルール

使う順番を気を付ける

大見出し(タイトルなど)を付けるときはh1タグを使い、中見出し(記事の題名)にはh2タグというように数字が小さいタグから使いましょう。

h3タグを使った後に、急にh6タグを使っていてはWEBサイトの構成が支離滅裂になってしまいます。

また、WEBサイト作成・運営で重要な「SEO対策」ができていないとみなされ、Googleからの評価が下がってしまう可能性があります。

h1タグは基本的に1ページに1度の使用

大見出しに使うh1タグは基本的に1ページに1度の利用が望ましいです。

h1タグはWEBサイトのタイトルや記事の題名など、1番重要なものに付けるタグで、そのページには何が書いてあるのか」を表す文章に使いましょう。

文章の表示方法 pタグ

pタグ

pタグ」は文章を書くときに使います。
「p」は英語で「Paragraph」を頭文字から来ていて、段落を意味しています。

pタグを使うと囲まれた文章が改行されます。

<p>「p」を使った文章</p>
<p>「p」で囲むと文章が段落分けされ改行される</p>

上記のコードは下画像のように表示されます。

PタグのWEB表示

画像のように段落ごとに改行されているのがわかると思います。

brタグ
brタグは「bleak」の略で、このタグを使うことで「改行」することが出来ます。
pタグなどの中にレイアウト上改行したいと思った文章の終わりにbrと書きます(終了タグは書かない)。

段落分けの重要性

例引用元 : 芥川龍之介-羅生門

左上の文章のように段落分けがない文章はぱっと見、読みにくい印象を与えます。

右上の文章は段落が分かれていて読みやすくなります。

文章を読んでもらうためには読みやすい文章を作成する必要があります。
<p>タグを有効的に活用できるように使い方をマスターしましょう。

まとめ

今回の内容をまとめると以下のようになります。

  • h1~h6タグは見出しを付けるためのタグ
  • 使う順番はh1タグから
  • h1タグは1ページに1度だけ
  • pタグは文章を表示させるためのタグ
  • pで囲むと文章が段落分けされ改行される
  • pタグで文章を読みやすくすることができる

「h1~h6タグ」と「pタグ」はWEBサイト作成時に必ず使いますので使い方や特徴をよく理解しましょう。

次回は、「画像ファイルの挿入方法」について解説します。

コメント

タイトルとURLをコピーしました