<u>タグの解説
<u>
は、指定した範囲に非言語的な注釈があることを示します。かつてこの要素は、文字列にアンダーラインを引くために使用されていましたが、HTML5以降で意味論的な役割りが与えられました。
<u>
を使用する範囲として適切な箇所は、文脈的に注意を促したい非言語的な範囲です。例えば、英語で表記した場合のスペルミスや、誤読を招きかねない固有名詞などです。
明示できる答えや出典がある場合は、別のタグを採用しましょう。
<u>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果として下線(アンダーライン)が引かれます。この装飾はハイパーリンクと誤認される可能性があるため、CSS(スタイルシート)での調整を推奨します。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<u>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<u>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。文章の中で何らかの非言語的な注釈を与えたい箇所に適用します。
text <u>something</u> text
主要なブラウザでは、<u>
で囲った部分に下線(アンダーライン)が引かれます。これがどのように表示されるのか、確かめてみましょう。
<p>Q:リダイレクトを設定しようとしましたが <u>.htacsess</u> が見つかりません。</p>
<p>A:正しいファイル名は「.htaccess」です。もう一度探してみましょう。</p>
通常のアンダーラインで装飾されると、ハイパーリンクのアンカーとの違いが分かりません。そこで、CSSのtext-decoration
関連のプロパティを使って装飾の調整を行います。
.u-text {
text-decoration-color: #d61a1a;
text-decoration-style: wavy;
text-decoration-thickness: 1px;
text-underline-offset: 1px;
}