前回軽く触りだけみたタグですが今回からもっと細かくみていこうと思います
まずはWebサイトやブログサイトを作る上で最もよく使うタグであるhタグとpタグから始めていきましょう
確かhタグが見出しでとpタグが段落だったっけ？
正解！ちゃんと覚えていてえらいね
では実際に今回はマークアップをしながらやっていくよ
1.hタグ
1-1.hタグとは
hタグは”heading”の略で見出しという意味があります。
種類は<h1>〜<h6>まであり、hの後ろに付ける数字が大きいほど見出しのサイズは小さくなります。
早速タグでマークアップしてみましょう。
- STEP1タグを書く
<h1></h1>hタグは閉じタグが必要ですので忘れない様にしましょう！
- STEP2マークアップしたい文をタグの中に書く
<h1>こんにちは</h1> - STEP3完成
マークアップ全般における注意点ですが終了タグの /(スラッシュ) を書き忘れることがたまにあるので気をつけましょう！
1-2.hタグの使用例
hタグはそれぞれある程度使用のルールが決まっています。
- <h1>はそのページのタイトルに使う
- <h2>はセクションのタイトル
- <h3>は記事などの小見出し
- 必要があれば<h4>,<h5>,<h6>を使う
また使用例は目安なのでその辺りはあしからず！
1-3.hタグの使用上の注意点
１.1つのページで<h1>を2回以上使用しない
<h2>〜<h6>は何回でも使用ができますが、<h1>は基本的に１ページに一度の利用とし大事なタイトルなどに使う。
と、思っていましたら
１ページにh1タグはどのくらい使うべきかとの質問に
「好きなだけどうぞ」
Google ジョン・ミューラー氏のTwitterより
とのことです。
でもh1タグを複数使うということは構造上あまりなさそうですね。とりあえずルール的にはOKというお話です。
２.使う順番に気をつける
サイトの正しい階層構造を作るため<h1>から順番に使い、大きさやレイアウトの問題などでいきなり<h3>からなどを使わない。
こちらもマストではありませんが見やすいページを作成するのであれば、必然的にこの順番になると思います。
2.pタグ
2-1.pタグとは
pタグは”paragraph”の略で段落という意味になり文章のまとまりを表示します。
pタグで囲う度にその文章は改行され段落となります。
注意点としては長すぎる文章は読みにくいのでpタグをうまく使って適宜改行し、読みやすい文章を心がけるようにしましょう。
<p>pタグで囲うことでその文章は改行され段落となる。</p>
<p>長すぎる文章は読みにくいのでpタグをうまく使って適宜改行し、読みやすい文章を心がけるようにする。</p>pタグで囲うことでその文章は改行され段落となる。
長すぎる文章は読みにくいのでpタグをうまく使って適宜改行し、読みやすい文章を心がけるようにする。
例の文章も改行され段落となり余白も少し空いています。
最後になりましたが見出し以外の文章は基本的にはpタグで書く様にします。
3.まとめ
- hタグは見出しを作り<h1>〜<h6>まであり数字が小さいほど文字が大きくなる
- h1タグは1ページになるべくひとつにし、大事なところ(タイトルなど)に使う
- 使う順番は基本番号順(階層構造をきちんと作るため)
- pタグは段落を作り、作るたびに改行される
- 文章は基本的にpタグで作る
コメント