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

Program

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 ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
u要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、u要素の使い方について、ご参考になさってくださいねー。

タイトルとURLをコピーしました