<u>: 非言語的注釈 (下線) 要素

HTML の非言語的注釈要素 (<u>) は、非言語的に注釈があることを示す方法で表示する行内テキストの区間を示します。これは既定で単純な実線の下線として表示されますが、 CSS を使用して変更することもできます。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

<u> を使用するのがどのような場合に適切で、どのような場合に適切でないのかについての詳細は、使用上の注意を参照してください。

この要素にはグローバル属性のみがあります。

他の純粋な整形要素と同様に、以前の HTML の下線 (<u>) 要素は HTML 4 で非推奨になりました。しかし <u> は、 HTML 5 で新しい意味論的な、何らかの曖昧な注釈が適用されるテキストをマークするという意味で復活しました。

<u> 要素の有効な使用例としては、綴りエラーの通知、中国語の文字列の固有名詞記号の記述、その他の形の注釈などがあります。

単に表現の目的で下線を引いたり、本の題名を記述したりするために <u> を使用するべきではありません。

多くの場合、次のような場合は <u> よりも他の要素を使用するべきです。

• <em>: 強調の記述
• <b>: テキストに注意を引かせる
• <mark>: キーワードや句をマーク
• <strong>: 強い重要性のあるテキストを示す
• <cite>: 書籍やその他の出版物の題名をマーク
• <i>: 西洋言語のテキストで技術用語、音訳、考え、船名などを記述

(<u> で作成された非言語的な注釈に対して) 言語的な注釈を提供する場合は、 <ruby> 要素を使用してください。

意味論的な意味なしで下線を引きたい場合は、 text-decoration プロパティの値 underline を使用してください。

この例は、 <u> 要素と CSS を使用して、綴り間違いのエラーを含む段落を表示し、エラー箇所をこの目的でよく使用される、赤い波線の下線スタイルで示します。

HTML

<p>This paragraph includes a <u class="spelling">wrnogly</u>
spelled word.</p>

この HTML では、 <u> にクラス spelling を付けて、 "wrongly" という語の綴りミスを示すために使用しているのが分かります。

CSS

u.spelling {
  text-decoration: red wavy underline;
}

この CSS は <u> 要素にクラス spelling がついてスタイル付けされるとき、テキストすぐ下に赤い波線の下線を引くことを示しています。これはスペルミスをスタイル付けするときに一般的なスタイル付けです。 red dashed underline を使って表現できるスタイルもよく使われます。

結果

結果は現在利用可能なもっと有名なワープロを使ってきた人になじみがあるものでしょう。

多くの場合、実際には <u> を使用したいと思わないでしょう。いくつかの場面で代わりに何をするべきかを示す例を挙げましょう。

意味を伴わない下線

意味を含むことがないテキストに下線を引くには、次のように、 <span> 要素と text-decoration プロパティに "underline" を設定したものを使用してください。

HTML

<span class="underline">Today's Special</span>
<br>
Chicken Noodle Soup With Carrots

CSS

.underline {
  text-decoration: underline;
}

結果

書籍の題名の表現

<p>The class read <cite>Moby Dick</cite> in the first term.</p>

なお、 <cite> 要素の既定のスタイルではテキストを斜体で表示します。ご希望であれば、 CSS を使用して上書きすることができます。

cite {
  font-style: normal;
  text-decoration: underline;
}

カスタムスタイルでの結果

• ふつう、 <span>, <i>, <em>, <b>, <cite> 要素が代わりに使用されます。
• 意味論的なものではない下線には、 CSS の text-decoration プロパティを使用してください。