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

その他タグ_アイキャッチ
こばゆた
こばゆた

今回は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>
こばゆた
こばゆた
brタグの注意点(pcでみた場合)

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

こばゆた
こばゆた
brタグの注意点(スマホでみた場合)

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

<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>

52

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

6.まとめ

文章で使うその他タグまとめ
  • brタグは改行。使いすぎに注意
  • strongタグは強調
  • blockquoteタグは引用
  • hrタグは水平線を引く
  • supタグは後ろにつけることで乗を表せる←使ったことも見たこともない
こばゆた
こばゆた

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

きなこ
きなこ

改行と強調だったね

チャッピー
チャッピー

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

コメント