【HTML】u要素の使い方【スペルミスや外国固有名詞を表します】

u要素を使えば、スペルミスや外国固有名詞を示すことができます。

1 u要素の基本的な使い方
2 英語（英文）ではどうなる？
3 u要素は、数字に対してマークアップが可能なのか？
4 u要素は、カタカナに対してもマークアップできる？
5 各種ブラウザでの表示結果

u要素の基本的な使い方

はじめに、以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>u要素</title>
</head>
<body>
    <p>「<u>雪辱を晴らす</u>」ではなく、正しくは「雪辱を果たす」です。</p>
    <p>「アメリカ合衆国」は、中国語では「<u>美国</u>」と書きます。</p>
</body>
</html>

body要素の中に、「文のかたまり（段落）」を示すp要素が２つあります。

１つ目のp要素の中には、『「雪辱を晴らす」ではなく、正しくは「雪辱を果たす」です。』と書かれた文章があります。

そして、間違った慣用句である「雪辱を晴らす」というフレーズは、u要素でマークアップされています。

このため、ブラウザでの表示結果の通り、「辱を晴らす」には、下線が付与されて表示されています。

つまり、この「下線が付与された」ように表示された状態が、「スペルミスである」ことを示してます。

また、２つ目のp要素の中には、『「アメリカ合衆国」は、中国語では「美国」と書きます。』と書かれた文章があります。

そして、外国固有名詞である「美国」はu要素でマークアップされて下線が付与されて表示され、外国固有名詞であることが示されています。

このように、「スペルミス」や「外国固有名詞」を示す場合に、u要素を使ってマークアップすることで、ブラウザ上に明確に表示することができます。

英語（英文）ではどうなる？

では、英語（英文）について、i要素でマークアップしてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>u要素</title>
</head>
<body>
    <p>「<u>雪辱を晴らす</u>」ではなく、正しくは「雪辱を果たす」です。</p>
    <p>「アメリカ合衆国」は、中国語では「<u>美国</u>」と書きます。</p>
    <p>バズ・ライトイヤーの名セリフは、”I'm the <u>kind</u> of the world！”ではなく、”I'm the king of the world！”です。</p>
</body>
</html>

先ほどのプログラムに、更にもう一行、英文を追加しました。

追加した英文では、「kind」について、u要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、「kind」下線が付与されて表示されています。

u要素は、数字に対してマークアップが可能なのか？

さらに、数字について、i要素でマークアップを行いました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>u要素</title>
</head>
<body>
    <p>「<u>雪辱を晴らす</u>」ではなく、正しくは「雪辱を果たす」です。</p>
    <p>「アメリカ合衆国」は、中国語では「<u>美国</u>」と書きます。</p>
    <p>バズ・ライトイヤーの名セリフは、”I'm the <u>kind</u> of the world！”ではなく、”I'm the king of the world！”です。</p>
    <p><u>４８都道府県</u>ではなく、正しくは４７都道府県です。</p>
    <p><u>48都道府県</u>ではなく、正しくは47都道府県です。</p>
</body>
</html>

新たに追加した２つの文章では、「４８都道府県」と「48都道府県」について、u要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、全角数字（算用数字）および半角数字共に、下線を付与して表示することができました。

u要素は、カタカナに対してもマークアップできる？

カタカナについても、u要素でマークアップを行いました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>u要素</title>
</head>
<body>
    <p>「<u>雪辱を晴らす</u>」ではなく、正しくは「雪辱を果たす」です。</p>
    <p>「アメリカ合衆国」は、中国語では「<u>美国</u>」と書きます。</p>
    <p>バズ・ライトイヤーの名セリフは、”I'm the <u>kind</u> of the world！”ではなく、”I'm the king of the world！”です。</p>
    <p><u>４８都道府県</u>ではなく、正しくは４７都道府県です。</p>
    <p><u>48都道府県</u>ではなく、正しくは47都道府県です。</p>
    <p>「<u>シュミレーション</u>」ではなく、正しくは「シミュレーション」です。</p>
    <p>「<u>ｼｭﾐﾚｰｼｮﾝ</u>」ではなく、正しくは「ｼﾐｭﾚｰｼｮﾝ」です。</p>
</body>
</html>