【セマンティク】混同したり間違えて使いやすいHTMLのタグの使い方を理解する。【strong, em, I, mark, b】
しゅーた（@chibasyuta）です！
HTMLには多くのタグがあり、それぞれに意味（セマンティクス）が存在します。
特に、ユーザーエージェントスタイルシートからのスタイルが似ているタグは、適切に使い分けることが重要です。
本記事では、特に混同しやすいstrong、em、i、mark、bの使い方を整理します。
この記事の内容！
- strong、em、i、mark、bの使い方
- それらの使い分け
各タグの意味と使い方
<strong>（強い重要性を示す）
このタグは、内容が非常に重要であることを示します。
<p><strong>締切は明日ですので、忘れないでください。</strong></p>使いどころ: 重要な注意喚起や警告文
<em>（意味を強調する）
このタグは、文章の意味に影響を与える強調を示します。
<p>僕は小説を読むのが<em>好き</em>です。</p>
<p>僕は<em>小説</em>を読むのが好きです。</p>文章の中で、どこを強調するのかによって意味が変わるようなものに「em」は使います。
上の例だと、１分目は「好きか嫌いか」にフォーカスが当たっているのに対して、
２分目は、「雑誌などではく小説」ということにフォーカスが当たっています。
このように、「em」の位置によって文の意味が変わるところで使います。
使いどころ: 文脈上で特に強調したい部分（話し言葉のニュアンス
<i>（慣用句・外来語・専門用語などを示す）
このタグは、テクニカルタームや外来語など、特別な意味を持つ単語に使います。
<p>今回のモデルの学習過程では<i>バックプロパゲーション</i>を用いました。</p>使いどころ: 慣用句、外来語、技術用語
<mark>（目立たせたい部分を示す）
このタグは、検索結果などで関連性のある内容を強調するために使用します。
markタグで囲ったとしても、その分の意味が変わる訳ではありません。
そうではなく、ユーザーと関連のあるキーワードを目立たせる際に使われます。
同じ記事でもアクセスしてきたユーザーが、「フライパンを熱してバターを溶かす」の手順はどこだっけ？という形でアクセスしてきたユーザーには、該当箇所をハイライトしてあげるといいでしょう。
このようにユーザーとの関連を示すのが markタグ です。
使いどころ: ユーザーと関係のあるキーワードのハイライト
<b>（視覚的に目立たせるが、特別な意味を持たない）
このタグは、特に重要ではないが目立たせたい部分に使用します。
<p><b>パンケーキ</b>を作るのは簡単です。</p>b タグはどちらかというとCSSに近いタグになります。他の強調などのタグに合致しないけど、ユーザーに分かりやすいように目立たせる際に使用します。
使いどころ: キーワードの強調、レビュー文の製品名 など
HTMLは「意味」を表し、CSSで「装飾」を作る
単純に「文字を太くしたい」「斜体にしたい」という理由でこれらのタグを使うのは適切ではありません。もしスタイルだけを変更したい場合は、CSSを使いましょう。
| タグ | 意味 | 使いどころ |
|---|---|---|
| <strong> | 非常に重要な内容 | 警告や締切、注意喚起 |
| <em> | 文脈上で意味を強調 | 感情的な強調、語調の変化 |
| <i> | 外来語や専門用語 | テクニカルターム、慣用句 |
| <mark> | 目立たせたい部分 | 検索結果、関連情報の強調 |
| <b> | 意味に影響を与えない | 製品名、キーワードの強調 |
まとめ！
これらのタグを適切に使い分けることで、HTMLの意味を正しく伝えることができます。適切なタグ選びを意識して、よりセマンティックなHTMLを書きましょう！
あと、この記事がいいな！と思った方は@chibasyutaのチェックもお願いします！
では、この記事はこんな感じで終わります！
またね！