こんにちは。
新卒入社3年目文系出身のエンジニアです。
今回はHTMLでどのようにして文字を強調したらよいか？について語っていきます。

そもそもなぜこのテーマにしたのか

なぜこのテーマにしたのかといいますと、
案件でちょこちょこありがたいことにコーディングをする機会があるのですが、
なかなか思うようにいかず、いつもコーディングの時BPさんに絞られています。
なので、さすがに本腰を入れて勉強しないといけないと思い(遅い。。笑)、
CODEPREPで今までやってきた開発言語の総復習を行っていました。
HTML入門 HTML5編を取り組んでいたところ、
穴埋め式問題で分からない問題に直面しました！
おそるおそるHINTの内容を見てみると、
文字を強調させるにはどんなタグを使用すればよいかという内容でした。
普段の案件でHTMLを少ししか触ったことがなくましてや文字を強調させるタグについての内容は全く知らなかったため、今回知識の定着として投稿してみようと思いました。

文字を強調したいタグの種類

文字を強調したいタグの種類は、大まかに分けて4つあります。

markタグ

以下のaaaはmarkタグで囲った結果です。

aaa

Qiitaでは分かりにくかったので、画像で確認してみましょう！

15行目に重要！と入力し、markタグで囲みました。

すると、重要！と書いている箇所だけ黄色いマーカーで引かれていることが分かります。
このように、参照目的のために文字を目立たせたいときに有効です。

emタグ

以下のaaaはemタグで囲った結果です。

aaa

emは斜体文字になっていることが分かります。
文字が斜めになることで、テキストを強調させるために使用されることが多いです。
また、emタグを入れ子にして文字を際立たせたい時に有効です。

bタグ

以下のaaaはbタグで囲った結果です。

aaa

文字が太くなっていることが分かります。
bタグは目線を引き付けたいタグの一種です。

strongタグ

以下のaaaはstrongタグで囲った結果です。

aaa

bタグと全く同じ結果になることが分かりました。
bタグとstrongタグはいったい何が違うのでしょうか？

bタグとstrongタグの違い

見栄えは一緒なのですが、実は意味と目的が全く違うことがわかりました。
bタグは、テキストに意味を持たさないもので、実用的な目的で目立つようにするための要素です。
例えば、概要説明におけるキーワードをピックアップする時に使われます。
一方、strongタグは要素内容が「重要」「重大」「緊急」「深刻」のいずれかであることを示す要素であり、
意味的に重要なテキストを表しています。
簡単に言えば、strongタグは重要な事柄、言葉で使用されます。
bタグは事柄、言葉に意味はないけど、目立たせたいときに使うと思ったらいいかもしれないです。

最後に

最後まで読んでくださり、ありがとうございました！
自分自身、HTMLのことについてそこまで詳しくなかったので、
なるほど！と思い、記事にさせて頂きました。
案件で使うことはないかもですが、知っておいて損はないなと思いました。
また、HTMLについてもこの投稿をきっかけに詳しくなっていきたいです。

参考URL

参考本