【heading】見出しを記述してページの構成にメリハリを付けるhタグとpタグの記述方法

アイキャッチHTML06

こんにちは。ヒロユキです。

雑誌や新聞など「伝える」ためのコンテンツには、「見出し」と「本文」が存在します。

Webページの構成でも「見出し」と「本文」は大切な要素です。

特に「見出し」には、伝えたいことの要点をわかりやすくしたり、全体の構成をまとめる大切な役割があります。

今回は、そんな「見出し」と「本文」を表現するタグを見ていきましょう。

hタグとpタグの正しい使い方

小松田くん

HTMLファイルの骨組みは理解しました。次は何を書けばいいんでしょうか?

尾地ヒロユキ

まずは、基本のhタグとpタグから覚えていこっか!

hタグって?

hタグ(!)はページ内の「見出し」を表現する要素です。ブログ記事などの「目次」の項目にもなります。

見出しを階層的に配置することで、見やすく伝わりやすいページ構成になるのです。

hタグ(ヘディングタグ)

見出しを表現する要素。h1~h6までの6段階を重要度によって使いわける。「heading」の頭文字をとって「hタグ」と呼ぶ。

hタグの使い方

見出しを表現するには、コンテンツを「<h1~6>~</h1~6>」で囲みます。

見出しを「つみきのーと」にしたい場合。

コードはこんな感じ。↓

<h1>つみきのーと</h1> 開始タグ

<h1>つみきのーと</h1> コンテンツ

<h1>つみきのーと</h1> 終了タグ
小松田くん

終了タグには「/(スラッシュ)」が付くんですね。

では実際に、ブラウザでどう表示されるか見てみましょう。

「見出し」はページの内容なので、bodyタグの中に記述します。↓

<!DOCTYPE html>
<html lang="ja">
  <head>  
    
  </head>
  <body>
    <h1>つみきのーと</h1>

  </body>
</html>

ブラウザで見るとこうなります。↓

hタグの使い方1
尾地ヒロユキ

この状態じゃあシンプルすぎて味気ないけど、装飾はCSSで設定するから心配ないぞ。

一番伝えたい「大見出し」には、h1タグを使います。

次要点となる小見出しにはh2タグ、そのまた次にはh3タグというように、必要に応じてh1からh6までを順番に配置していきます。

見出しの重要度

h1 > h2 > h3 > h4 > h5 > h6

pタグって?

hタグが「見出し」を表現するのに対して、Pタグ(!)は「本文」を表現する要素です。

「<p>~</p>」で囲まれたコンテンツが、そのまま段落として表示されます。

pタグ(パラグラフタグ)

段落を表現する要素。paragraphの頭文字をとって「pタグ」と呼ぶ。

小松田くん

pタグには、hタグみたいな種類は無いんですね。

pタグの使い方

コードの書き方は、hタグの時と同じです。↓

<p>プロじゃなくてもプログラミング</p>開始タグ

<p>プロじゃなくてもプログラミング</p>
コンテンツ

<p>プロじゃなくてもプログラミング</p> 
終了タグ

では、さっき書いたコードに追記します。「本文」もページの内容なので、書き込むのはbodyタグの中ですね。↓

<!DOCTYPE html>
<html lang="ja">
  <head>  
    
  </head>
  <body>
    <h1>つみきのーと</h1>
    <p>プロじゃなくてもプログラミング</p>
  </body>
</html>

はい!!

しっかりブラウザにも表示されてますね。↓

hタグの使い方2

pタグは段落を表現します。一般的に段落は、文章のまとまりを句点などで区切ったもののことです。なので見た目を整えるためだけに文を途中でぶった切って改行するのは、よくありません。

よくないぞ!
<!DOCTYPE html>
<html lang="ja">
 <head>  

 </head>
 <body>
  <h1>つみきのーと</h1>
  <p>pタグは段落を表現します。一般的に段落は、文章のまとまりを句点などで区切ったもののとこ</p>
  <p>です。なので見た目を整えるためだけに、文を途中でぶった切って改行するのは、よくありませ</p>
  <p>ん。</p>
 </body>
</html>
hタグの使い方3

pタグの段落表現を維持したまま改行するには、br(!)タグを使いましょう。↓

brタグ(ブレイクタグ)

改行を表現する要素。breakの頭文字をとって「brタグ」

いいね!
<!DOCTYPE html>
<html lang="ja">
 <head>  

 </head>
 <body>
  <h1>つみきのーと</h1>
  <p>pタグは段落を表現します。一般的に段落は、文章のまとまりを句点などで区切ったもののとこ<br>です。な見た目を整えるためだけに、文を途中でぶった切って改行するのは、よくありませ<br>ん。</p>
 </body>
</html>
hタグの使い方4

hタグとpタグの正しい使い方のまとめ

まとめ
<!DOCTYPE html>
<html lang="ja">
 <head>  
    
 </head>
 <body>
  <h1>つみきのーと</h1> ←見出し
  <p>プロじゃなくてもプログラミング</p> ←本文
 </body>
</html>
見出しの重要度

h1 > h2 > h3 > h4 > h5 > h6

hタグもpタグも、他の要素と入れ子にすることでいろいろな応用ができます。

基本をおさえて実践の中で応用の幅を広げていきましょう。

それじゃまた。ヒロユキでした。

気に入ったらシェアしてね
ABOUT US
尾地ヒロユキOji Hiroyuki
Webページを作ったり、アプリやゲームを作ったり、作業の効率化だってできちゃうプログラミング。なのに「なんだかむずかしそう」「自分にはムリだよ」って諦めちゃうのはもったいない!プロじゃなくてもプログラミングしませんか?このブログ「つみきのーと」では、知識ゼロからのスタートを応援します。Twitter ⇒「PC豆知識」Instagram ⇒「Macショートカットキー」Pinterest ⇒「図解イラスト」を発信中。そっちもcheckだぞ♪