【初心向け】文章を書く時に知っておくと便利なタグ(でもほとんど使わないのもあるよ)

こばゆた

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

実際に使う機会は少ないものもありますが覚えておくと便利ですので参考までに押さえておきましょう！

チャッピー

はーい！

1.brタグ

1-1.brタグとは

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

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

こばゆた

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

チャッピー

あれ？改行されてない！

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

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

こばゆた

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

こばゆた

html上では一文ですがWeb上ではちゃんと改行されて表示されてます

1-2.brタグの注意点

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

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

こばゆた

PCの画面ではきれいに見える

こばゆた

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

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

こばゆた

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

2.strongタグ,bタグ

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

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

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

参考までに比較用の通常のサイズを

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

教科書に出てくる様な太字になったのがわかります。

また文中に埋め込むこともできます。

あれは私の<strong>妹</strong>です。

チャッピー

妹なんていたっけ？

こばゆた

深い意味はありません

3.blockquoteタグ

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

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

あのお方のお言葉

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

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

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

HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）は、ハイパーテキストを記述するためのマークアップ言語の1つ。略してHTML（エイチティーエムエル）と呼ばれることが多い

引用元：wikipedia

4.hrタグ

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

<hr>

↑この線

でもcssで出てくるborderで作る方が良いとされています。

5.supタグ

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

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

5<sup>2</sup>

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

6.まとめ

こばゆた

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

きなこ

改行と強調だったね

チャッピー

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