u要素を使えば、スペルミスや外国固有名詞を示すことができます。
u要素の使い方
以下のプログラムと、ブラウザの表示結果を見てください。
<body>
<p>「<u>雪辱を晴らす</u>」ではなく、正しくは「雪辱を果たす」です。</p>
<p>「アメリカ合衆国」は、中国語では「<u>美国</u>」と書きます。</p>
</body>
body要素の中に、「文のかたまり（段落）」を示すp要素が２つあります。
１つ目のp要素の中には、『「雪辱を晴らす」ではなく、正しくは「雪辱を果たす」です。』と書かれた文章があります。
そして、間違った慣用句である「雪辱を晴らす」というフレーズは、u要素でマークアップされています。
このため、ブラウザの表示結果の通り、「辱を晴らす」には下線が付与されて表示されています。
つまり、この「下線が付与された」ように表示された状態が、「スペルミスである」ことを示してます。
また、２つ目のp要素の中には、『「アメリカ合衆国」は、中国語では「美国」と書きます。』と書かれた文章があります。
そして、外国固有名詞である「美国」はu要素でマークアップされて下線が付与されて表示され、外国固有名詞であることが示されています。
このように、「スペルミス」や「外国固有名詞」を示す場合に、u要素を使ってマークアップすることで、ブラウザに明確に表示することができます。
英語（英文）ではどうなる？
では、英語（英文）について、i要素でマークアップしてみましょう。
<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>
先ほどのプログラムに、更にもう一行、英文を追加しました。
追加した英文では、「kind」についてu要素でマークアップしてあります。
そして、ブラウザの表示結果の通り「kind」に下線が付与されて表示されています。
u要素は、数字に対してマークアップが可能なのか？
さらに、数字について、i要素でマークアップを行いました。
<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>
新たに追加した２つの文章では、「４８都道府県」と「48都道府県」について、u要素でマークアップしてあります。
そして、ブラウザの表示結果の通り、全角数字（算用数字）および半角数字に下線を付与して表示することができました。
u要素は、カタカナに対してもマークアップできる？
カタカナについても、u要素でマークアップを行いました。
<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>
新たに追加した２つの文章では、「シュミレーション」と「ｼｭﾐﾚｰｼｮﾝ」について、u要素でマークアップしてあります。
そして、ブラウザでの表示結果の通り、全角カタカナ、半角カタカナに、下線を付与した状態で表示することができました。
【カテゴリー】パルパブル・コンテンツ、フロー・コンテンツ、フレージング・コンテンツ
u要素が属するカテゴリーは、パルパブル・コンテンツ、フロー・コンテンツ、フレージング・コンテンツになります。
パルパブル・コンテンツに属する要素は、その要素の中にhidden属性が指定されていない要素を１つ以上含める必要があります。
また、フロー・コンテンツに属する要素は、body要素の中に記述される必要があります。フレージング・コンテンツに属する要素は、テキストをマークアップするために記述される必要があります。
つまり、u要素は、以下のプログラムに示す通り、body要素の中においてテキストをマークアップするために記述され、u要素の中にhidden属性が指定されていない要素を１つ以上含めるように記述する必要があります。
<body>
<p>「シンデレラ」は、中国語では「<u>灰姑娘</u>」と書きます。</p>
</body>
上のプログラムに示す通り、u要素は、body要素の中において、マークアップしたテキストを例えば「外国固有名詞」として示すために用いることが求められます。
また、プログラムに示す通り、u要素にhidden属性を指定することなく、u要素の内容「灰姑娘」をブラウザに表示された状態とする必要があります。
【コンテンツ・モデル】フレージング・コンテンツ
u要素のコンテンツ・モデルは、フレージング・コンテンツです。
フレージング・コンテンツに属する要素は、文章内のテキストをマークアップするための要素です。そして、ブラウザに表示される「テキスト」も、フレージング・コンテンツに属する要素と同じように扱うことができます。
つまり、コンテンツ・モデルをフレージング・コンテンツとする要素（例えばu要素）は、その要素の中にフレージング・コンテンツに属する要素またはテキストを含めるように記述する必要があります。
つまり、u要素は、以下のプログラムに示す通り、u要素の中にフレージング・コンテンツに属する要素（例えばb要素）を含めるように記述する必要があります。
<body>
<p>アニメ「Dr.スランプ アラレちゃん」は、中国語では「<u><b>IQ博士</b></u>」と書きます。</p>
</body>
上に示したプログラムでは、p要素でマークアップされた文章の中で、「IQ博士」のフレーズがi要素でマークアップされています。そして、i要素でマークアップされた「IQ博士」のフレーズについて、さらにb要素でマークアップされています。
このため、ブラウザの表示結果の通り、「IQ博士」のフレーズに下線が付与された状態として表示され、さらに太字の状態（他のテキストと区別した状態）で表示することができています。
各種ブラウザでの表示結果
u要素について、主要なブラウザにおけるサポート状況は、以下の通りです。
| Google Chrome | Microsoft Edge | Safari | Firefox | Opera | |
| 【u要素】 | ○ | ○ | ○ | ○ | ○ |
以上、u要素の使い方について、ご参考になさってください。
