HTML

In HTML, the <u> element is used to underline text to indicate non-documentary or conventional annotations, while it is recommended to use CSS for purely decorative underlines.

u 要素

<u>要素とは

<u>要素は、HTMLの要素の一つで「下線付きテキスト（下線を引くため）」を表すタグとしてよく知られています。

しかし、HTML5仕様の改訂によって、単にテキストに下線を引くだけではなく、「文中におけるテキストの非文書的な注釈や、慣習的な表現上のマークアップ」を意図的に示すための要素として再定義されました。以下はその概要です。

HTML4時代
ブラウザで単に文字を下線表示にする要素
HTML5以降
文中の誤り訂正や用語解説用のアノテーションなど、非文書的なテキストのマークアップ（慣習的に下線を用いる表現）をマークアップするための要素

とはいえ、多くのケースで視覚的な下線だけを目的とするならCSSを使うほうが推奨されるため、<u>要素の使いどころに注意が必要です。

初心者が知っておきたい基礎的な使い方

シンプルな例

HTML

<p>この文章では<u>重要な箇所</u>に下線を引いています。</p>

この文章では重要な箇所に下線を引いています。

上記のように書くだけで、ブラウザ上では「重要な箇所」の部分が下線付きで表示されます。初学者の方が、HTMLで下線を引きたいと考えたときに<u>を安易に使いがちですが、後述する通り、実際には意図と適切な意味づけが求められます。

CSS（text-decoration）との違い

テキストを下線付きにしたいだけの場合は、通常以下のようにCSSを使うことが推奨されます。

HTML

<span class="underline">下線をつけたいテキスト</span>

CSS

.underline {
	text-decoration: underline;
}

HTML4では推奨されなくなった<u>タグですが、HTML5で再び使われるようになった背景には、見た目だでなく「文書における意味づけ（セマンティクス）」を明示するという考え方があります。

HTML5における<u>要素の意味合い

HTML5仕様では、<u>要素は以下のように再定義されています。

“Unarticulated annotation”
<u>要素は、文中の非文書的な注釈や慣習的に下線を使う表現をマークアップするためのもの

例えば、以下のようなケースが挙げられます。

単純に「強調」や「下線を引きたい」だけの場合、<strong>や<em>、あるいはtext-decorationを用いることが多いです。<u>は見た目だけではなく、“非文書的な注釈”を特別に示したいときに使う、と理解しましょう。

実装上の注意点

下線付きテキストがリンクに見える問題

多くのウェブサイトでは、リンクテキストに下線を用いることが一般的です。そこで<u>要素で下線を引いたテキストは、リンクと誤認されやすくなるという問題点があります。

これが、安易に<u>要素を使うべきでないとされる理由の一つです。ユーザーの混乱を防ぐために、装飾目的だけの場合はCSSで別のアプローチ（色や背景）を検討するか、下線で強調する場合でもリンクとは異なるスタイルを適用するといった工夫が必要です。

<u>要素と可読性・アクセシビリティ

スクリーンリーダーでの読み上げ
<u>要素自体は、強調読み上げされるわけではありません。強調が必要な場合は<strong>や<em>を検討するのが一般的です。
ただし、<u>要素の使用理由を説明するためにARIA属性などを活用することも考えられます。
色盲・視覚障害への配慮
下線のみではなく、カラーやフォントスタイルの工夫で可読性を高めると良いでしょう。たとえば下線の色を変更できる場合は、それがリンクと区別できる色になっているかを確認します。

歴史的な観点：HTML4からHTML5へ

HTML4
見た目重視の要素として<u>は推奨されず、代わりにCSSでの実装が推奨された。
HTML5
文書構造をより意識した形で復活し、主に「慣習的に下線を引く必要のあるテキスト」を示す要素に位置づけられた。

つまり、HTML5では**“意図的に下線を引く特別な事情”**（例：外国語の慣習や校正目的）があるときに使うとよいのです。

中級者以上に向けた高度な活用方法

ここでは、単純に「テキストを下線にする」だけにとどまらず、<u>要素を使った高度な活用法や、実務的に起こりがちな問題について解説します。

ルビ（注釈）との組み合わせ

日本語や中国語などの表記において、漢字の読みや返り点などを示す際、<ruby>要素を使うことがあります。校正や辞書的表示のために、あえて<u>を用いて下線付きで示すこともあります。たとえば中国語では固有名詞のピンインを示したい場合、ルビの代わりに下線を使う表記が存在するケースがあります。

HTML

<p>この部分は<u>固有名詞のピンイン</u>を下線で強調しています。</p>

ただし、実際には<ruby>要素と<rt>要素を利用するのが正しい文書構造的には望ましいため、<u>で無理やり表現を行うのではなく、適切にルビを使い分けることも考慮が必要です。

校正用のマークアップとして

出版社や編集現場の校正作業では、注釈や確認事項などを目立たせるために下線を引くことがあります。校正者間で「下線は誤字疑い」「波線は要確認」などの独自ルールが決められている場合もあります。

HTML上でも同様の表現を再現するため、下記のように校正箇所を示す意図で<u>を使うこともあります。

HTML

<p>この部分は<u>誤字の疑い</u>があるため、再チェックしてください。</p>

CSSでカスタムの下線スタイル（破線や波線など）を設定すれば、印刷物の校正記号に近い表現も可能です。

CSS

u {
	text-decoration: underline wavy red;
}

（ただし、この指定が常にすべてのブラウザで正しく反映されるわけではありません。互換性に注意が必要です。）

スクリプトとの連携

<u>要素をJavaScriptで操作することで、インタラクティブな注釈ツールを作成することも可能です。たとえば、以下の例のように<u>要素がクリックされたら注釈内容をポップアップで表示する、といった実装も考えられます。

HTML

<p>この部分は<u class="annotated" data-annotation="ここが重要なポイントです">下線付きの注釈</u>です。</p>
<script>
	<!-- JavaScript code here -->
</script>

CSS

.annotated {
	cursor: pointer;
}

JavaScript

document.querySelectorAll('.annotated').forEach(elem => {
	elem.addEventListener('click', () => {
		alert(elem.dataset.annotation);
	});
});

この部分は下線付きの注釈です。

このように、単なる視覚的強調を超えた「インタラクティブな注釈」の使い方としても考えられます。

注意すべきブラウザ互換性

<u>要素は、HTML4の段階では推奨されなかった経緯もありますが、現在はモダンブラウザで問題なく解釈・表示されます。ただし、下線のスタイル変更などの詳細なCSS指定（破線、波線など）がすべてのブラウザで同じように表示されるわけではありません。

古いIE（Internet Explorer）
互換モードで表示する際などは下線のスタイル指定がうまく反映されない場合があります。
モバイルブラウザ
破線や波線などの下線スタイルが一部サポートされないケースがあります。
印刷スタイル
印刷時に下線が見えにくい（薄くなる）ブラウザもあるため、印刷スタイルシートを別途調整することをおすすめします。

アクセシビリティとSEOの観点から

HTML5以降では、見た目の強調だけでなく文書構造のセマンティクスを重視します。したがって、意味を持たせずに見た目の変更として<u>を使うと、アクセシビリティツールや検索エンジンに誤解される可能性があります。

SEO的に直接メリット・デメリットがあるわけではありませんが、リンクテキストでなくとも下線付きテキストを多用していると、ユーザーが混乱してしまい、ユーザーエクスペリエンスの低下につながる可能性があります。ユーザーにとって混乱があるページは間接的にSEOに悪影響を及ぼしかねません。

まとめ

<u>要素の基本的な役割
初心者はリンクとの混同に注意
中級者以上は、校正用・慣習的な下線の付与・インタラクティブ注釈などにも活用
アクセシビリティの確保
ブラウザ互換性と印刷時の挙動にも注意

一言で言うと…

“<u>要素は「下線付きテキスト」ではあるが、現代のHTMLでは「非文書的注釈や慣習的表示」を示すためのセマンティックな要素として使う”

これが最重要ポイントです。単に下線を表示するだけならCSSで実装し、文書構造上、意味を持たせたいときに<u>を使うというスタンスが理想的です。