【HTML】文章を書く時に知っておくと便利なタグ

こばゆた

今回はhタグとpタグ以外の文章で使うタグについて説明します

実際に使う機会は少ないものもありますが文章を書くときに、構造を整理したり、重要な部分を強調したりするために覚えておくと便利ですので参考までに押さえておきましょう！

チャッピー

はーい！

1.brタグ

1-1.brタグとは

HTMLで文章を書いてる時にキーボードでenterを押しても改行はされません。

<p>おはようございます
今日もよろしくお願いいたします。</p>

こばゆた

エディター上では改行されているように見えますが…

チャッピー

あれ？改行されてない！

HTMlで文章を改行するにはbrタグを使います。ちなみにbrは”break”の略です。

<p>おはようございます。<br>今日もよろしくお願いいたします。</p>

こばゆた

改行したいところにbrタグを入れると…

チャッピー

ちゃんと改行されて表示されてるね！

1-2.brタグの注意点

注意点ですがユーザーの環境によって行間などが変わってしまう可能性があるためデザインのためだけにbrタグを使わないようにします。

<p>こんにちは<br>お元気ですか</p>

こばゆた

PCの画面ではきれいに見えますが…

こばゆた

しかしサイズを狭くしたり、スマホで見ると変な所で改行されています

<p>おはようございます。</p><p>今日もよろしくお願いいたします。</p>

こばゆた

むやみにbrタグで改行せずpタグで書くのが基本です

2.strongタグ,bタグ

強調したい言葉をstrongタグ、またはbタグで囲むことでその文字を強調することができます。

どちらを使うかという話ですがSEOに多少差があるとか無いとかなのでどちらを使っても大丈夫です。

<p>私はロボットでは<strong>ありません</strong></p>
<p>私はロボットでは<b>ありません</b></p>

3.blockquoteタグ

blockquoteタグで囲む事により引用を表すことができます。

<blockquote>あのお方のお言葉</blockquote>

出典がわかる場合はblockquoteタグ内に cite=”アドレス”を入れます。

また引用元もリンクで明記します。

<blockquote cite="https://ja.wikipedia.org/wiki/HyperText_Markup_Language">
<p>HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）は、ハイパーテキストを記述するためのマークアップ言語の1つ。<br>
略してHTML（エイチティーエムエル）と呼ばれることが多い</p>
引用元：<a href="https://ja.wikipedia.org/wiki/HyperText_Markup_Language">wikipedia</a>
</blockquote>

4.hrタグ

“horizontal rule(水平線)”の略で線を引くことができ、段落や話題の区切りを表します。

<p>おはようございます今日もよろしくお願いいたします。</p>
<hr>

簡単に区切ることができますが、cssで出てくるborderで作る方が良いとされています。

5.supタグ

supタグは後ろにつけることで乗を表すことができます。

使ったこともないですが面白いのでメモ程度に書いておきます。

5<sup>2</sup>

もしかしたら使う機会があるかもしれませんので参考までに…。

6.まとめ

こばゆた

種類は多い感じがしたけどbrタグとstrongタグくらいしか使わないからその用法だけは頭の片隅に入れておいてね

きなこ

改行と強調だったね

チャッピー

今回はそんなに難しくなかったから楽だったよ

HTML/CSSをもっと学びたい方はこちらもオススメです！