HTML の非言語的注釈要素 (<u>) は、非言語的に注釈があることを示す方法で表示する行内テキストの区間を示します。これは既定で単純な実線の下線として表示されますが、 CSS を使用して変更することもできます。
この要素は古いバージョンの HTML で "Underline" (下線) 要素と呼ばれる傾向があり、現在でもそのように誤用されることがあります。テキストに下線を引くのであれば、代わりに CSS の text-decoration プロパティを underline に設定したスタイルを適用してください。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
<u> を使用するのがどのような場合に適切で、どのような場合に適切でないのかについての詳細は、使用上のメモを参照してください。
| コンテンツカテゴリ | フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ |
|---|---|
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | HTMLElement |
属性
この要素にはグローバル属性のみがあります。
使用上のメモ
他の純粋な整形要素と同様に、以前の HTML の下線 (<u>) 要素は HTML 4 で非推奨になりました。しかし <u> は、 HTML 5 で新しい意味論的な、何らかの曖昧な注釈が適用されるテキストをマークするという意味で復活しました。
(既定で下線が引かれる) ハイパーリンクと誤認されるような方法で、 (これも既定で下線が引かれる) <u> 要素を使用することは避けるように注意してください。
使用例
<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> の回避
多くの場合、実際には <u> を使用したいと思わないでしょう。いくつかの場面で代わりに何をするべきかを示す例を挙げましょう。
意味を伴わない下線
意味を含むことがないテキストに下線を引くには、次のように、 <span> 要素と text-decoration プロパティに "underline" を設定したものを使用してください。
HTML
<span class="underline">Today's Special</span> <br> Chicken Noodle Soup With Carrots
CSS
.underline {
text-decoration: underline;
}
結果
書籍の題名の表現
書籍の題名は <u> や <i> でもなく、 <cite> 要素を使用して表現してください。
HTML
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
既定のスタイルでの結果
なお、 <cite> 要素の既定のスタイルではテキストを斜体で表示します。ご希望であれば、 CSS を使用して上書きすることができます。
cite {
font-style: normal;
text-decoration: underline;
}
カスタムスタイルでの結果
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| HTML Living Standard <u> の定義 |
現行の標準 | |
| HTML5 <u> の定義 |
勧告 | |
| HTML 4.01 Specification <b> の定義 |
勧告 |
ブラウザーの対応
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
u | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox
完全対応
1
| IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。