uタグ -視覚的に下線を引く｜HTML辞典
<u>タグとは？
<u>タグは、HTML文書内で「視覚的に下線を引く」ためのタグです。
装飾目的のタグ であり、意味的な強調を行うものではありません。
現在では、装飾目的での使用は推奨されず、CSS を使って下線を引くのが一般的です。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）
インライン要素として扱われ、特定の単語やフレーズを視覚的に強調するために使用されます。
閉じタグの有無
<u>は開始タグ（<u>）と閉じタグ（</u>）の両方が必要です。
基本的な記述方法
<u> を使用すると、テキストに下線が適用されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>uタグの例</title>
</head>
<body>
<p>この部分は <u>下線付き</u> で表示されます。</p>
</body>
</html>ポイント：
使用できる主な属性
<u>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。
| 属性名 | 説明 | 例 |
|---|---|---|
class | CSSのクラスを適用 | <u class="highlight">下線</u> |
id | 一意の識別子を設定 | <u id="underlined-text">下線</u> |
style | インラインスタイルを適用 | <u style="color: red;">赤い下線</u> |
<u> の使用が推奨されない理由
- リンクと誤認される可能性がある
- 一般的なWebデザインでは、リンク（
<a>）に下線が使われることが多いため、<u>を使うとリンクと誤解される可能性がある。
- 一般的なWebデザインでは、リンク（
- 装飾目的なら CSS を使うのが推奨される
- HTML5では装飾タグの使用は減っており、
<u>の代わりに CSS のtext-decoration: underline;を使うのが一般的。
- HTML5では装飾タグの使用は減っており、
✅ CSS を使った下線の適用方法
.underline-text {
text-decoration: underline;
color: blue;
}<p class="underline-text">これはCSSで適用された下線です。</p><u> と代替タグの比較
| タグ | 役割 | 視覚的な変化 | 意味の強調 |
|---|---|---|---|
<u> | 装飾目的の下線 | 下線（デフォルト） | なし |
<ins> | 追加されたテキストを示す | 下線（デフォルト） | あり（SEOに影響） |
<em> | 文章内で重要な部分を強調 | 斜体（デフォルト） | あり（SEOに影響） |
✅ 例：意味的な強調としての使用（<ins>）
<p>この文章は <ins>新しく追加された</ins> ものです。</p>- SEO的に「追加されたコンテンツ」として認識される。
✅ 例：装飾としての下線（<u>）
<p>この文章は <u>視覚的に強調</u> されています。</p>- 単なる視覚的な下線（デザイン目的）。
- SEOには影響しない。
使用上の注意点
✅ 装飾目的なら <u> より CSS を使うのが推奨される
- HTMLの構造をシンプルにするため、見た目の変更は CSS で行うのが望ましい。
.underline {
text-decoration: underline;
color: blue;
}<p class="underline">これはCSSで適用された下線です。</p>✅ リンクと混同しないように注意
- Webデザインでは、リンク（
<a>）に下線が使われることが多いため、<u>を使うとリンクと誤解される可能性がある。
関連タグ
<ins>– 追加されたテキストを示す（意味的に下線が必要な場合に推奨）<em>– 文章の意味的な強調（斜体）<b>– 視覚的な太字（装飾目的）<strong>– 文章の意味的な強調（太字）
まとめ
<u>タグは、視覚的に下線を適用するためのタグ であり、意味的な強調は行いません。
単なる装飾目的で使用する場合に適していますが、SEO的な意味を持たせるなら <ins> を使用するのが適切です。
また、デザインの調整には CSS を活用する方が推奨されます。
