u 要素の u は下線を意味する underline 由来の名前のため、どうしても下線を引くという意味で認知している人が多いのではないでしょうか。もちろん、HTML5 以降、すべての HTML 要素からスタイリングという目的が排除されたことは知っていることでしょう。
では、改めて u 要素の意味は？と問われると、意外に答えられないのではないでしょうか。今回は u 要素の歴史と、現在の u 要素の意味と使い方について解説していきます。
u 要素の誕生と廃止と復活
u 要素は HTML が誕生したころから定義されていた要素で、最も古い要素の一つです。HTML 誕生から HTML4 に至るまで u 要素は下線を引くための要素として定義され、現場で使われてきたことはみなさんもご存じのとおりです。
意外に知らない人も多いようですが、HTML4 ですでに u 要素は非推奨になりました。しかし廃止ではありませんでした。
その後、HTML5 が誕生したとき、ついに u 要素は廃止になりました。HTML5 では、すべての HTML 要素からスタイリングという目的を排除することになりました。そのため、スタイリングしか役割を持っていなかった要素が廃止の対象となったわけですが、u 要素もそれに含まれていたのです。W3C の HTML5 仕様の初期の草案を見ると、u 要素が存在しないことが今でも分かります。
スタイリングしか用途を持たない要素が廃止なら、i 要素も b 要素も廃止でなければおかしいはずです。しかし、これらの要素は英語圏での印刷慣例に基づいて新たに意味が与えられることで廃止を逃れました。残念ながら、その時点では u 要素の使い道は見出されていなかったということです。
HTML5 仕様の策定が進む中で、ある時点で u 要素が復活しました。というのも、中国語圏で u 要素の必要性があったことが分かったからです。その詳細は後述します。
もともと HTML は英語圏の影響を大きく受けてきたのですが、HTML5 以降は他の言語のニーズにも対応する点が特徴的です。日本語も例外ではありません。ruby 要素は日本語のルビという用途で必要だったからこそ、HTML5 仕様に加えられたのです。
ネットで u 要素を調べると、検索上位に HTML4 の u 要素の説明が上位にヒットする場合もありますし、u 要素が廃止になった時点の情報が見つかったりするため、 HTML を学び始めたばかりの人では混乱するかもしれませんね。
中国語での u 要素の使い道
中国語では、一部の固有名詞に下線を引く印刷慣例があるようです。漢字ばかりの言語ですので、固有名詞とその他の文字とで区別しにくい場合があるのでしょう。固有名詞に下線を引いて他と区別することで読みやすくすくします。日本語に例えると、ひらがなの固有名詞に近いのかもしれません。たとえば「なぜさいたまはひだがななのか？」は単語に区切りが分かりづらく読みづらいですが、「なぜさいたまはひらがななのか」のように下線を引いたり色を変えると読みやすくなります。
中国語の場合、固有名詞なら何でもかんでも下線を引くわけではなく、主に人名、地名、王朝名、組織名、書籍名に使われます。この下線のことを proper name mark と呼ぶそうです。現在では proper name mark はあまり使われなくなったようですが、学校の教科書で使われることがあるようです。このあたりは英語版ですが Wikipedia に詳しく書かれています。
この proper name mark のために、HTML5 で u 要素が復活したといっても過言ではありません。
u 要素の定義
では現在の u 要素はどのような定義なのでしょうか。ネットで調べると「非言語的注釈」と書かれているのを見かけます。おそらくこの日本語訳の発端は MDN 日本語版の u 要素の説明でしょう。MDN 英語版の u 要素の説明を見ると「Unarticulated Annotation」と書かれています。どちらも全然意味が分かりません。決して MDN が悪いのではありません。原典となる WHATWG HTML 仕様に書かれている定義もチンプンカンプンです。中には u 要素の用途として「スペルミス」と限定的に書かれているネット記事も見受けられます。短い言葉で u 要素を説明するのは、それほど難しいということですね。
WAHTWG HTML 仕様の定義をもう少し紹介すると、u 要素は「an unarticulated, though explicitly rendered, non-textual annotation」を伴うテキストの範囲と規定されています。この英語の部分は下線を一般化して表現したものなので分かりくくなっています。あえて翻訳すると「発音はしないけれども、はっきりと表示され、本文ではない注釈」といったところでしょうか。
改めて言いますが、 「発音はしないけれども、はっきりと表示され、本文ではない注釈」 とは暗に下線のことを言っています。しかし、下線に限定しない点に注意してください。波線でも構いませんし、もっと言うと、カッコでも構いません。どう見せるのか（スタイリング）は、CSS の役割です。
なお、u 要素は注釈（アンダーラインなど）を表すのではありません。注釈を伴うテキストの範囲が u 要素です。その点、勘違いしないようにしましょう。
u 要素の使いどころ
前述の u 要素の定義を読んで使い道が分かる人はいないでしょう。WHATWG HTML 仕様にはその使い道が書かれています。前述の中国語の proper name mark 以外では、誤記を表現する場合が挙げられています。
Word で文章を書いていると、日本語の文法的に間違った箇所に青色の二重線が引かれたり、英文のスペルミスの部分に赤色の波線が引かれたりしたのを見たことがあるのではないでしょうか。
HTML 仕様が言っている誤記（スペルミス）とは、このように、文法間違いやスペルミスを読者に気づかせるといったケースのことを指しています。
では、それ以外の用途に u 要素は使えないのでしょうか？もちろん使えます。中国語の proper name mark や誤記 （スペルミス） はあくまでも一例でしかありません。HTML 仕様が言っている u 要素の使いどころとは、目に見える何かを追加することで前後の文章と区別したい箇所であると一般化されています。
「目に見える何か」とは、二重線や波線でも構いませんし鍵カッコでも構いません。とにかく何かしらの記号や線を使って他と区別したいところなら、u 要素が使えるということです。
しかし、他の要素の方が適切な場合もあります。例えば、中国語では書籍名に proper name mark が使われることがあるとはいえ、これは cite 要素のほうが適切です。そのほか、強調なら em 要素、ページのキーワードなら b 要素、参照ハイライトなら mark 要素、重要性なら strong 要素など、前後の文章と区別したい箇所と言っても、必ずしも u 要素が最適とは限らないので注意しましょう。
下線は紛らわしいので変えよう
ホームページを見ていて、下線が引いてあるからとリンクと勘違いしてクリックしたことはないでしょうか。ましてや、その下線が青色の一本線であれば、なおさらです。このように不用意に u 要素を使い、ブラウザーのデフォルトスタイルのままにしておくと、とても紛らわしいページが出来上がってしまいます。
ホームページを制作していて下線が必要なシーンはさほど多くないでしょうが、どうしても u 要素を使いたい場合、それが本当に下線を引くべきかをよく考えましょう。CSS を使えば、黒の一本の下線から別の線に変えることができます。
前述の Word の文法ミスの青の二重線と英文のスペルミスの赤の波線であれば、こんな具合に CSS を書くことができます。
<p>これを<u class="syntax">したり</u>、あれをした。</p>
<p>My hair is <u class="spelling">blac</u>.</p>
u.syntax {
text-decoration: blue double underline;
}
u.spelling {
text-decoration: red wavy underline;
}
一点、気を付けたいのは、この文法ミスやスペルミスの例は、このコンテンツが文法ミスやスペルミスを指摘していると読者が認識している場合に成り立ちます。そういった認識が読者と共有されていない場合、下手に下線を使うと読者に誤解を与えるだけになります。その点、注意しましょう。
まとめ
これだけ u 要素を詳しく語っていおいてなんなんですが、u 要素って意外に使い道がないと思いませんでしたか？正直に言うと、筆者は一度も使ったことがありません。こんなオチで恐縮です。
今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。
