どうも！ニシドラ(@nishidorablog)です。
この記事ではHTMLファイルで見出しの書き方と文章の表示方法について解説します。
見出しを付けるタグは「h1~h6タグ」を使い、文章を表示させるタグは「pタグ」を使います。
この2つのタグの使い方と使うときのルールについて詳しく解説していきます。
前回の、HTMLの基本文法については、【HTMLの文法】HTMLの基本文法についてわかりやすく解説！でまとめています。
見出しの付け方 h1~h6タグ
h1~h6タグの意味
HTMLで見出しを付けるときは「h1タグ」「h2タグ」「h3タグ」「h4タグ」「h5タグ」「h6タグ」を使います。
「h」の意味は英語で見出しを意味する「heading」の頭文字から来ています。
この6種類のタグで表示される見出しはそれぞれ大きさが違います。
h1タグが1番大きな見出しで、WEBサイトのタイトルや記事の題名などに使われます。
h以降の数字が大きくなるほど小さな見出しになります。
h1~h6タグの使い方
実際にコードを書いて解説します。
<h2>h2タグを使った見出し</h2>
<h3>h3タグを使った見出し</h3>
<h4>h4タグを使った見出し</h4>
<h5>h5タグを使った見出し</h5>
<h6>h6タグを使った見出し</h6>
上記のコードをメディアエディターで書き、ブラウザで表示すると下画像のようになります。
h1タグで書いた見出しが1番大きく表示され、h6タグで書いた見出しが１番小さく表示されます。
また、h1~h6はブロック要素でタグを閉じると改行されます。
ブロック要素については下の記事で解説しています。
良ければ参考にしてみてください！
h1~h6を使うときのルール
使う順番を気を付ける
大見出し(タイトルなど)を付けるときはh1タグを使い、中見出し(記事の題名)にはh2タグというように数字が小さいタグから使いましょう。
h3タグを使った後に、急にh6タグを使っていてはWEBサイトの構成が支離滅裂になってしまいます。
また、WEBサイト作成・運営で重要な「SEO対策」ができていないとみなされ、Googleからの評価が下がってしまう可能性があります。
h1タグは基本的に１ページに１度の使用
大見出しに使うh1タグは基本的に１ページに１度の利用が望ましいです。
h1タグはWEBサイトのタイトルや記事の題名など、１番重要なものに付けるタグで、「そのページには何が書いてあるのか」を表す文章に使いましょう。
文章の表示方法 pタグ
pタグ
「pタグ」は文章を書くときに使います。
「p」は英語で「Paragraph」を頭文字から来ていて、段落を意味しています。
pタグを使うと囲まれた文章が改行されます。
<p>「p」で囲むと文章が段落分けされ改行される</p>
上記のコードは下画像のように表示されます。
画像のように段落ごとに改行されているのがわかると思います。
段落分けの重要性
引用元 ： 芥川龍之介-羅生門
左上の文章のように段落分けがない文章はぱっと見、読みにくい印象を与えます。
右上の文章は段落が分かれていて読みやすくなります。
文章を読んでもらうためには読みやすい文章を作成する必要があります。
<p>タグを有効的に活用できるように使い方をマスターしましょう。
まとめ
今回の内容をまとめると以下のようになります。
- h1~h6タグは見出しを付けるためのタグ
- 使う順番はh1タグから
- h1タグは1ページに１度だけ
- pタグは文章を表示させるためのタグ
- pで囲むと文章が段落分けされ改行される
- pタグで文章を読みやすくすることができる
「h1~h6タグ」と「pタグ」はWEBサイト作成時に必ず使いますので使い方や特徴をよく理解しましょう。
次回は、「画像ファイルの挿入方法」について解説します。
コメント