【初心者向け】見出しのhタグと段落のpタグの使い方

こばゆた

前回軽く触りだけみたタグですが今回からもっと細かくみていこうと思います

まずはWebサイトやブログサイトを作る上で最もよく使うタグであるhタグとpタグから始めていきましょう

チャッピー

確かhタグが見出しでとpタグが段落だったっけ？

こばゆた

正解！ちゃんと覚えていてえらいね

では実際に今回はマークアップをしながらやっていくよ

1.hタグ

1-1.hタグとは

hタグは”heading”の略で見出しという意味があります。

種類は<h1>〜<h6>まであり、hの後ろに付ける数字が大きいほど見出しのサイズは小さくなります。

早速タグでマークアップしてみましょう。

こばゆた

マークアップ全般における注意点ですが終了タグの /(スラッシュ) を書き忘れることがたまにあるので気をつけましょう！

1-2.hタグの使用例

hタグはそれぞれある程度使用のルールが決まっています。

• <h1>はそのページのタイトルに使う
• <h2>はセクションのタイトル
• <h3>は記事などの小見出し
• 必要があれば<h4>,<h5>,<h6>を使う

こばゆた

また使用例は目安なのでその辺りはあしからず！

1-3.hタグの使用上の注意点

１.1つのページで<h1>を2回以上使用しない

　<h2>〜<h6>は何回でも使用ができますが、<h1>は基本的に１ページに一度の利用とし大事なタイトルなどに使う。

こばゆた

と、思っていましたら

１ページにh1タグはどのくらい使うべきかとの質問に

「好きなだけどうぞ」

Google ジョン・ミューラー氏のTwitterより

とのことです。

x.com

twitter.com

でもh1タグを複数使うということは構造上あまりなさそうですね。とりあえずルール的にはOKというお話です。

２.使う順番に気をつける

　サイトの正しい階層構造を作るため<h1>から順番に使い、大きさやレイアウトの問題などでいきなり<h3>からなどを使わない。

こちらもマストではありませんが見やすいページを作成するのであれば、必然的にこの順番になると思います。

2.pタグ

2-1.pタグとは

pタグは”paragraph”の略で段落という意味になり文章のまとまりを表示します。

pタグで囲う度にその文章は改行され段落となります。

注意点としては長すぎる文章は読みにくいのでpタグをうまく使って適宜改行し、読みやすい文章を心がけるようにしましょう。

<p>pタグで囲うことでその文章は改行され段落となる。</p>
<p>長すぎる文章は読みにくいのでpタグをうまく使って適宜改行し、読みやすい文章を心がけるようにする。</p>

例の文章も改行され段落となり余白も少し空いています。

最後になりましたが見出し以外の文章は基本的にはpタグで書く様にします。

3.まとめ