プログラミング

文字(テキスト)を強調する色々なタグまとめ【HTML】

文字を強調するタグには色々なものがあります。

最初はbタグをたくさん使っていましたが、他にもstrongだったり、emだったり、テキストを強調させるときに使えるタグって色々あるんだなと思いました。

ただ、タグによってどのように意味が違うのか。従来のHTMLとHTML5を比べると意味が変わったところもあるかと思いますが、文字を強調する色々なタグを意味もいっしょにまとめました。

em(エンファシス)

まずem要素についてなんですけど、この要素は意味的な強調を表しています。

<em>文字を強調しています!em要素を使うと斜体になります。</em>

文章内において特に強調したいテキストに使うのが一般的で、多くのブラウザ環境では、イタリック体・斜体で表示されます。

strong(ストロング)

strong要素ももちろん強調するタグで、重要なテキストを表すときに使います。

<strong>重要なテキストです!strong要素を使うと太字になります。</strong>

strong要素を使うと、多くのブラウザ環境では、太字で表示されます。

b(ビー)

僕が最初このb要素しか知らなくて多用していたもの。

これには実は強調するとか重要なテキストを表すといった意味はなく、特別なテキストだということを示しています。

たとえば、特別なキーワードだったり、製品名、サービス名、作品名など。

<b>特別なテキストです!b要素を使うと太字になります。</b>

b要素を使うと、多くのブラウザ環境では、太字で表示されます。

また、b要素を使うときには、どのような内容を示しているのか、class属性で明示するのがいいとされているのだとか。

i(アイ)

i要素も特別なテキストを表すのですが、特に専門用語だったり、書き手の思考や気分などのような質が他とは違うテキストを表すときに使われます。

<i>他とは質が違うテキストです!i要素を使うと斜体になります。</i>

i要素を使うと、多くのブラウザ環境では、イタリック体・斜体で表示されます。

b要素と同じく、どのような内容を示しているのか、class属性で明示するのがいいとされています。

mark(マーク)

mark要素を使うとハイライト、テキストにマーカーで引いたような表現ができます。

この要素は文章の中で特に目立たせたい箇所に使うもので、意味的な強調や重要度を表しているわけではありません。

<mark>目立たせたいテキストです!黄色くハイライトされます。</mark>

mark要素を使うと、多くのブラウザではテキストの背景が黄色くハイライトされた、マーカーを引いているような状態で表示されます。

この要素は引用文の中で、「特にここは重要だし目立たせたいな」という部分に使ったりします。ただし、あくまで目立たせるという意味で、このテキストが重要であるという意味は持っていません。

まとめ

テキストを強調させたり目立たせたりするタグには「em・strong・b・i・mark」などがあるんだとわかりました。

こう見るとけっこう色々なタグがあるんだなと。しかも意味も違いますし。

これらをちゃんと使い分けている人がどれだけいるかわからないですけど、ちゃんと意味を理解した上で使っていこうと思います。

Leave a Comment