<u>: 非言語的注釈 (下線) 要素
HTML の非言語的注釈要素 (<u>) は、非言語的に注釈があることを示す方法で表示する行内テキストの区間を示します。これは既定で単純な実線の下線として表示されますが、 CSS を使用して変更することもできます。
警告: この要素は古いバージョンの HTML で "Underline" (下線) 要素と呼ばれる傾向があり、現在でもそのように誤用されることがあります。テキストに下線を引くのであれば、代わりに CSS の text-decoration プロパティを underline に設定したスタイルを適用してください。
試してみましょう
属性
この要素にはグローバル属性のみがあります。
使用上の注意
他の純粋な整形要素と同様に、以前の HTML の下線 (<u>) 要素は HTML 4 で非推奨になりました。しかし <u> は、 HTML 5 で新しい意味論的な、何らかの曖昧な注釈が適用されるテキストをマークするという意味で復活しました。
メモ: (既定で下線が引かれる) ハイパーリンクと誤認されるような方法で、 (これも既定で下線が引かれる) <u> 要素を使用することは避けるように注意してください。
用途
<u> 要素の有効な用途としては、綴りエラーの通知、中国語の文字列の固有名詞記号の記述、その他の形の注釈などがあります。
単に表現の目的で下線を引いたり、本の題名を記述したりするために <u> を使用するべきではありません。
仕様を考慮するべきその他の要素
例
綴りエラーを表示
この例は、 <u> 要素と CSS を使用して、綴り間違いのエラーを含む段落を表示し、エラー箇所をこの目的でよく使用される、赤い波線の下線スタイルで示します。
HTML
html
<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>
この HTML では、 <u> にクラス spelling を付けて、 "wrongly" という語の綴りミスを示すために使用しているのが分かります。
CSS
css
u.spelling {
text-decoration: red wavy underline;
}
この CSS は <u> 要素にクラス spelling がついてスタイル付けされるとき、テキストすぐ下に赤い波線の下線を引くことを示しています。これはスペルミスをスタイル付けするときに一般的なスタイル付けです。 red dashed underline を使って表現できるスタイルもよく使われます。
結果
結果は現在利用可能なもっと有名なワープロを使ってきた人になじみがあるものでしょう。
<u> の回避
多くの場合、実際には <u> を使用したいと思わないでしょう。いくつかの場面で代わりに何をするべきかを示す例を挙げましょう。
意味を伴わない下線
意味を含むことがないテキストに下線を引くには、次のように、 <span> 要素と text-decoration プロパティに "underline" を設定したものを使用してください。
HTML
html
<span class="underline">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots
CSS
css
.underline {
text-decoration: underline;
}
結果
書籍の題名の表現
書籍の題名は <u> や <i> でもなく、 <cite> 要素を使用して表現してください。
HTML
html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
cit 要素のスタイル付け
なお、 <cite> 要素の既定のスタイルではテキストを斜体で表示します。 CSS を使用して上書きすることができます。
html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
css
cite {
font-style: normal;
text-decoration: underline;
}
仕様書
| Specification |
|---|
| HTML Standard # the-u-element |
ブラウザーの互換性
BCD tables only load in the browser