【HTML】文字を強調するインラインタグについて解説

はじめに

HTMLでは文字を強調したり、意味づけするために,,<s>などのタグがあります。
それぞれ強調するタグには意味合いがあり、SEOのためにも「正しい」タグに使い方が重要とのこと。
今回は、文字協調のタグサンプルを掲載するとともに使いどころをご紹介します。

タグは、テキスト内の強調したい部分を示すために使用されます。ブラウザは通常、斜体の表示で強調します。
fontによっては斜体にならない場合もあります。
emはEmphasis(強調)という英単語が語源のため、単語を覚えておくといいかもしれません。

<p>この文は <em>重要</em> です。</p>

実行結果↓
この文は重要です。

タグもテキストの強調に使用します。より強い強調をするときに使うそうです。通常、太字の表示で強調されます。

<p>この文は <strong>超重要</strong> です。</p>

実行結果↓
この文は 超重要 です。

タグはテキストを小さく表示します。
主に著作権や免責事項などをフッターに表記する際に使います。

<small>© Oga ryoji HTML Training 2023.</small>

実行結果↓
© Oga ryoji HTML Training 2023.

<s>

<s>タグは、テキストを取り消し線で表示するために使用します。主に修正や削除された情報を示すために使用されます。

<p>現在、新型スマホの料金相場は<s>42,000</s> 53,000円です。</p>

実行結果↓
現在、新型スマホの料金相場は~~42,000~~ 53,000円です。

<q>

<q>タグは、短い引用を示すために使用します。ブラウザは引用符で囲み、インデントまたはイタリック体で表示します。
長いテキストや段落を引用とする場合は<blockquote>を使います。

<p>アインシュタインは言った: <q>信仰のない科学は不完全だ。科学のない信仰は盲目だ。</q></p>

実行結果↓
アインシュタインは言った: 信仰のない科学は不完全だ。科学のない信仰は盲目だ。

タグは、テキストを下付き文字として表示するために使用されます。主に化学式や数学の数式で使用されます。
IT系だと進数を表現する際に使えるかなぁと思います。

<p>10進数で7を２進数で表現すると（111）<sub>2</sub>になります。</p>

実行結果↓
10進数で7を２進数で表現すると（111）₂になります。

タグは、テキストを上付き文字として表示するために使用します。主に数学の指数や上付き文字で使用されます。

<p>1Gは、約10<sup>9</sup>です</p>

実行結果↓
1Gは、約10⁹です

タグは、テキストを斜体で表示します。
斜体のフォントがない場合（日本語はほとんどないらしい）場合は、斜めに傾けた文字になります。
気持ちをあらわすテキスト、技術用語や外国の慣用句、印刷物での慣習などに使われます。

<p>Javaの大きな特徴として<i>オブジェクト指向</i>があります。</p>

実行結果↓
Javaの大きな特徴としてオブジェクト指向があります。

タグは、テキストを太字で表示し、注目を集めたい部分に使います。
ただし、協調表示するだけで、特定の意味合いは特にありません。
特別に注目される文字列にはを使うことを推奨されています。

<p>私の名前は<b>「OGATA」</b>と言います。よろしくね。</p>

実行結果↓
私の名前は「OGATA」と言います。よろしくね。

タグはテキストを下線で表示できます。主にリンクや強調したいテキストに使用されます。
「中国語の固有名詞や、スペルミスの箇所など、本来と違う表記の範囲を示すのにも使われます。

私の名前は<u>「おがわ」</u>ではなく、「おがた」です。

実行結果↓
私の名前は「おがわ」ではなく、「おがた」です。

タグは、テキストにハイライトを付けるために利用します。主に注目すべき情報を示すために使用されます。
WEBサイト制作者が目立たせたい場所に使うのではなく、検索結果の参照などユーザにとって目立たせたいものに使うそうです。

<p><mark>「YouTube」</mark>の検索結果<br>
<mark>YouTube</mark> Japan 公式チャンネルでは、国内外で話題になっている様々なカテゴリの動画の再生リストをご紹介中です。<mark>YouTube</mark> が独自に実施するプログラムやイベントの動画 ... </p>