
u要素を使えば、スペルミスや外国固有名詞を示すことができます。
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要素が2つあります。
1つ目のp要素の中には、『「雪辱を晴らす」ではなく、正しくは「雪辱を果たす」です。』と書かれた文章があります。
そして、間違った慣用句である「雪辱を晴らす」というフレーズは、u要素でマークアップされています。
このため、ブラウザでの表示結果の通り、「辱を晴らす」には、下線が付与されて表示されています。
つまり、この「下線が付与された」ように表示された状態が、「スペルミスである」ことを示してます。
また、2つ目の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>48都道府県</u>ではなく、正しくは47都道府県です。</p>
<p><u>48都道府県</u>ではなく、正しくは47都道府県です。</p>
</body>
</html>

新たに追加した2つの文章では、「48都道府県」と「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>48都道府県</u>ではなく、正しくは47都道府県です。</p>
<p><u>48都道府県</u>ではなく、正しくは47都道府県です。</p>
<p>「<u>シュミレーション</u>」ではなく、正しくは「シミュレーション」です。</p>
<p>「<u>シュミレーション</u>」ではなく、正しくは「シミュレーション」です。</p>
</body>
</html>

新たに追加した2つの文章では、「シュミレーション」と「シュミレーション」について、u要素でマークアップしてあります。
そして、ブラウザでの表示結果の通り、全角カタカナ、半角カタカナ共に、下線を付与した状態で表示することができました。
各種ブラウザでの表示結果
また、u要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。
【HTML】 | Internet Explorer | Google Chrome | Microsoft Edge | Safari | Firefox | Opera |
u要素 | ○ | ○ | ○ | ○ | ○ | ○ |
以上、u要素の使い方について、ご参考になさってくださいねー。