【HTML Living Standard】u要素の使い方

u要素の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月27日

基本的な使い方

uオブジェクトは、HTMLドキュメント内でテキストに下線を表示する要素を表すオブジェクトです。HTML Living Standardにおけるこのu要素の主な役割は、単に見た目の装飾として下線を引くことではなく、テキストに特定の意味や注釈を付与することにあります。例えば、文法的に正しくないが変更が加えられないテキストや、固有名詞ではないものの、文脈上強調したい単語など、通常のテキストとは異なる慣習的な表現を示す際に利用されます。

過去には、テキストを視覚的に装飾するためにu要素が使われていましたが、現在ではスタイルに関する表現はCSSで行うことが推奨されています。そのため、純粋にデザインとして下線を引きたい場合は、CSSのtext-decorationプロパティを使用すべきです。u要素の使用は、下線がリンクと誤解される可能性があるため、慎重に検討する必要があります。この要素は、視覚的な下線がコンテンツの特定の意味合いと結びつく場合にのみ適切です。

公式リファレンス: : The Unarticulated Annotation (Underline) element

構文(syntax)


1<u>下線付きのテキスト</u>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

ul要素とu要素でリストと下線を作る


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>u要素とul要素のサンプルコード</title>
7</head>
8<body>
9    <h1>u要素とul要素の基本的な使い方</h1>
10
11    <!-- ul要素は順序なしリストを作成します -->
12    <ul>
13        <!-- li要素はリストの各項目を示します -->
14        <li>リストアイテム1: このテキストには<u>下線</u>が引かれています。</li>
15        <li>リストアイテム2: <u>重要な情報</u>を視覚的に区別する際に使われます。</li>
16        <li>リストアイテム3: こちらは通常のテキストです。</li>
17    </ul>
18
19    <!-- u要素はテキストに下線を引きます -->
20    <p>
21        これは<u>段落内のテキストに下線を引く</u>例です。
22    </p>
23</body>
24</html>

HTMLの要素と<ul>要素について説明します。

要素は、ウェブページ上でテキストに下線を引くために使用される要素です。これは、視覚的な装飾として機能し、例えば段落内の特定のキーワードに一時的な注意を促す際などに利用できます。この要素には、特別な引数や戻り値はありません。

<ul>要素は、順序のないリスト、いわゆる箇条書きを作成する際に使用される要素です。リストの各項目は、必ず<li>（リストアイテム）要素で囲む必要があります。この要素にも、引数や戻り値はありません。

サンプルコードでは、まず<ul>要素を使って順序なしリストが作成されています。このリストの中の<li>要素内には、さらに要素が入れ子になっており、一部のテキストに下線が引かれているのが確認できます。また、リストとは別に（段落）要素内でも要素が使われ、特定のテキストに下線を引く例が示されています。これらの要素を適切に組み合わせることで、ウェブページ上の情報を視覚的に整理し、ユーザーにとって分かりやすく表示することが可能になります。

要素は、単にテキストに下線を引きたい場合はCSSのtext-decoration: underline;を使用することが推奨されます。HTMLの要素は、スタイルではなく、スペルミスや固有名詞など、他の強調要素が適切でないが意味的に区別したいテキスト範囲を示すセマンティックな要素である点を理解しましょう。視覚的な下線は、ユーザーにリンクと誤解される可能性があるため、使用には注意が必要です。

一方、<ul>要素は、順序のないリスト項目を表現します。リストの各項目は必ず<li>（リストアイテム）要素で囲む必要があります。と<ul>は名前が似ていますが、それぞれが持つ役割は全く異なるため、混同しないように注意してください。HTMLでは、文書の構造と表現（スタイル）を分離し、それぞれの用途に合った適切な要素を使用することが重要です。

u要素でURLを下線表示する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>u要素のサンプル</title>
7</head>
8<body>
9    <!-- <u>要素は、意味的な重要性を持たない下線付きテキストを表示します。 -->
10    <!-- キーワード「url」に関連して、URL文字列を下線付きで表示する例です。 -->
11    <p>
12        当社のウェブサイトURL: <u>https://www.example.com</u>
13    </p>
14    <!-- 注意: リンクには<a>要素を使用し、単に見た目の下線が必要な場合はCSSを使用することが推奨されます。 -->
15</body>
16</html>

要素は、HTMLドキュメント内でテキストに下線を表示するために使用されます。この要素は、見た目として下線を引きますが、囲まれたテキストに「強調」や「重要性」といった意味的な役割を与えることはありません。

要素は引数も戻り値も持ちません。外部からの入力や出力はなく、単にテキストを下線付きで表示するだけの要素です。

提供されたサンプルコードでは、https://www.example.com と記述することで、ウェブサイトのURL文字列に下線が表示されることを示しています。

しかし、単に見た目の下線が必要な場合に要素を使うことは推奨されません。もしそのテキストがクリック可能な「リンク」であるならば、<a>（アンカー）要素を使用するべきです。<a>要素はリンクとしての意味と機能を提供します。また、見た目としてだけ下線を引きたい場合は、CSS（Cascading Style Sheets）のtext-decorationプロパティを使用することが一般的です。CSSを利用することで、文書の構造と見た目の分離を促進し、メンテナンス性や柔軟性を向上させます。

要素は、意味を持たない下線付きテキストを表示する際に使用します。サンプルコードのようにURLを下線付きで表示する場合でも、それがリンクとして機能するなら必ず<a>要素を使用してください。単に見た目の下線が必要な場合は、CSSのtext-decoration: underline;プロパティを適用することが強く推奨されます。

要素を安易に使用すると、スクリーンリーダーなどの補助技術を利用するユーザーが下線をリンクと誤解し、混乱する可能性があります。HTMLはコンテンツの意味構造を記述し、CSSは見た目を制御するという役割分担を理解し、適切な要素を使い分けることで、よりセマンティックでアクセシブルなウェブページを作成できます。見た目と意味を意識した要素の選択が重要です。