HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<u>
非発言注釈(Unarticulated Annotation)要素。スペルミスや固有名詞など、通常の下線と区別される下線を引くために使用されます。
info
概要
<u> 要素は、スタイル上の理由ではなく、テキストの意味上の注釈を表現するために、コンテンツに下線(アンダーライン)を引きます。
かつては単純な「下線」を引くためだけに用いられ、HTML4では非推奨とされていましたが、HTML5で「視覚的にレンダリングされるが、特別な意味や強調を持たないテキスト」(例:スペルミス、固有名詞の注釈)を表すために再定義されました。
play_circle
デモ (静的表示)
HTML (Source)
<p>
これは単なる <u>下線</u> のテキストです。
</p>
<p>
固有名詞を示す <u>固有名詞</u> の例。
</p>
Preview (Result)
これは単なる 下線 のテキストです。
固有名詞を示す 固有名詞 の例。
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| グローバル属性 | 全てのHTML要素で利用可能な標準的な属性(例: class, id, style, langなど)のみが適用可能です。 |
| 特殊属性 | <u> 要素には、固有の特殊な属性はありません。 |
code
実用例
1. スペルミスの表現(.spelling-error クラスでカスタマイズ)
<p>
私は <u class="spelling-error">リンゴ</u> が好きです。
</p>
/* CSSでスペルミスの下線を波線などにカスタマイズすることが推奨されます */
2. リンクではない下線(HTML5の再定義された意味)
<p>
この文にある <u>特別な単語</u> は、単なる視覚的な注釈です。
</p>
3. 代替手段(CSSを使用)
<!-- 意味的な注釈が不要な場合、CSSで下線を引くことが推奨されます -->
<span style="text-decoration: underline;">CSSによる下線</span>
lightbulb
知っておくべき重要事項
warning
リンクと混同しないよう注意!
Web上では「下線」は一般的に「ハイパーリンク」と認識されます。そのため、
Web上では「下線」は一般的に「ハイパーリンク」と認識されます。そのため、
<u> 要素で下線を引く場合は、ユーザーがリンクと誤解しないよう、色を変えるなどして視覚的な区別を明確にすることが強く推奨されます。
accessibility_new
アクセシビリティ
<u> 要素は、スクリーンリーダーに対して特別な意味(強調や挿入テキストなど)を伝えることはありません。テキストの意味を強調したい場合は <strong> や <em> を、挿入されたテキストを表したい場合は <ins> を使用すべきです。