【paragraph】pタグとの組み合わせでもっと正確な意味を伝える要素たち

アイキャッチHTML07

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

webページ内の本文に当たる部分はpタグで表現します。ですが、単純に「本文」と言っても所々に色んな意味を含んでいます。

検索エンジンに正しい内容を伝えるためには、他の要素と組み合わせて記述する必要があります。

今回はそんな「もっと正確に意味を伝える」要素を紹介します。

pタグの意味を正確に伝えるための4つのタグ

小松田くん

使えるタグが増えてだんだん楽しくなってきました。もっといろいろ使ってみたいです。

尾地ヒロユキ

いいね!じゃあ今回は一気に4種類のタグをつかってみよう!!

  • 文章を強調するstrongタグ
  • 文章を引用するblockquoteタグ
  • 文章の内容を切り替えるhrタグ
  • 文章を改行して表示するbrタグ

強調したい時のstrongタグ

strong(!)タグは、pタグの段落中で特に強調したい部分につかいます。

<strong>~</strong>で囲んだ文字列が、ブラウザ上で太字になるのです。

strongタグ(ストロングタグ)

文字を強調させる要素。<strong>~</strong>で囲んだ文字列がブラウザ上で太字になる。太字になって逞しくなるからストロング!!

例えば、次の文中の「プログラミング」を強調したい時。↓

<p>プロじゃなくてもプログラミングしませんか?</p> ←強調したい

強調したい部分(この場合は「プログラミング」)を、<strong></strong>で囲みます。↓

<p>プロじゃなくても<strong>プログラミング</strong>しませんか?</p>

では、追記したコードをブラウザで確認してみます。↓

<!DOCTYPE html>
<html lang="ja">
  <head>  
    
  </head>
  <body>
    <h1>つみきのーと</h1>
    <p>プロじゃなくても<strong>プログラミング</strong>しませんか?</p>
  </body>
</html>
パラグラフ1

はい!

strongタグで囲った部分が、太文字になって強調されてますね。

引用したい時のblock quoteタグ

他の人の言葉や文章を引用させてもらう時は、blockquote(!)タグが使われます。

blockquoteタグ(ブロッククォートタグ)

引用してきた文章を表示する要素。<blockquote>~</blockquote>で囲まれた文字列は字下げして表示される。

では、次の小松田くんの言葉を引用してみましょう。↓

小松田くん

プログラミングがもっともっと親しみやすくなるといいな。

引用する文面を、pタグごと<blockquote>~</blockquote>で囲みます。

コードを書く時に長くて見にくかったら、こうやって段落を分けて囲んであげても大丈夫ですよ。↓

 <blockquote>
  <p>プログラミングがもっともっと親しみやすくなるといいな。</p>
 </blockquote>

これも、先ほどのコードに追記してみましょう。

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

  </head>
  <body>
    <h1>つみきのーと</h1>
    <p>プロじゃなくてもプログラミングしませんか?</p>
    <blockquote>
    <p>プログラミングがもっともっと親しみやすくなるといいな。</p>
   </blockquote>
  </body>
</html>

はい!!

<blockquote></blockquote>で囲んだ部分の上下にスペースができて字下げされてますね。

HTMLでは、引用文がこのように字下げして明示されます。

パラグラフ2

もし引用元のサイトがわかる場合は、cite属性でURLを指定しておくとGoodですよ。

 <blockquote cite="https://hiroyukioji3.com/">
  <p>プログラミングがもっともっと親しみやすくなるといいな。</p>
 </blockquote>
尾地ヒロユキ

blockquoteは、pタグがなくても表示されるぞ。けど、検索エンジンに正確な情報を渡すためにも省かないほうがいいな。

話題を切り替えるhrタグ

Webページ内でバッサリ話題の変わる内容を表示させたい場合は、hr(!)タグを使います。hrタグを記述すると、その箇所に「水平の線」が引かれるのです。

話題の切り替わりが、視覚的にわかりやすくなりますよ。

hrタグ(ホリゾンタルルールタグ)

水平の線を表示して話題の切り替わりを視覚的にわかりやすくする要素。hrは「水平方向の罫線」を意味する「horizontal rule」の略。

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

  </head>
  <body>
    <h1>つみきのーと</h1>
    <p>プロじゃなくてもプログラミング</p>
    <hr>
  </body>
</html>
パラグラフ3
小松田くん

<hr>には、閉じタグの記述が必要ないんですね。

さらに、hrタグは他の要素をつかって大きさや表示する位置を変えることができます。

  • width⇒線の長さ
  • size⇒線の太さ
  • align⇒線の位置
  • noshade⇒立体感の有無

どんなふうに変わるのか全部まとめて見てみましょう。

①〜⑤に分けて<hr>の記述を並べます。

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

 </head>
 <body>
   <h1>つみきのーと</h1>
   <p>①↓</p>
   <hr>
   <p>②↓</p>
   <hr width="100">
   <p>③↓</p>
   <hr size="50">
   <p>④↓</p>
   <hr width="100" align="left">
   <p>⑤↓</p>
   <hr size="50" noshade="">
 </body>
</html>
  1. ナチュラル。そのままの<hr>
  2. 線の長さを100ピクセルに指定。
  3. 線の太さを50ピクセルに指定。
  4. 線の長さを100ピクセルにして左詰め。
  5. 線の太さを50ピクセルにして立体感を無くす。

はい!!

ブラウザではこうなります。↓

パラグラフ4
尾地ヒロユキ

align属性の値は、”left”⇒左詰め、”right”⇒右詰め、”center”⇒中央揃えだぞ。

改行するbrタグ

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

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

brタグ(ブレイクタグ)

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

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

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

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

<br>には閉じタグがありません。記述した箇所が改行して表示されます。

なので行間のスペースを空けるために<br>を使ってしまいがちですが、これは本来の使い方ではないのでおすすめできません。

<br>で作った行間は、フォントや文字サイズの違いで簡単にくずれてしまうからです。

行間などのレイアウトにはCSSを活用しましょう。

pタグの意味を正確に伝えるための4つのタグ まとめ

<strong>は、囲んだ文字を太字にするタグ。↓

<p>プロじゃなくても<strong>プログラミング</strong>しませんか?</p>

<blockquote>は、引用文を明示するタグ。↓

 <blockquote>
  <p>プログラミングがもっともっと親しみやすくなるといいな。</p>
 </blockquote>

<hr>は、水平の線を表示させて話題の切り替わりを視覚化するタグ。↓

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

 </head>
 <body>
   <h1>つみきのーと</h1>
   <p>①↓</p>
   <hr>
   <p>②↓</p>
   <hr width="100">
   <p>③↓</p>
   <hr size="50">
   <p>④↓</p>
   <hr width="100" align="left">
   <p>⑤↓</p>
   <hr size="50" noshade="">
 </body>
</html>
  1. ナチュラル。そのままの<hr>
  2. 線の長さを100ピクセルに指定。
  3. 線の太さを50ピクセルに指定。
  4. 線の長さを100ピクセルにして左詰め。
  5. 線の太さを50ピクセルにして立体感を無くす。

<br>は、記述した箇所を視覚的に改行するタグ。↓

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

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

ここまで、pタグと組み合わせると効果的な4つの要素を紹介してきました。

タグの種類はまだまだたくさんあります。ひとつひとつの特徴を理解すれば応用次第でたくさんの表現ができるようになります。

がんばって身につけましょう!

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

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