下線として使うのは間違い!HTML5で新定義された<u>タグの非言語注釈とは?

HTMLではCSSを使わなくても、文字を強調したり、注釈を付け加えたりするタグがありますが、今回ご紹介するuタグもそのうちのひとつ。

しかしHTML5では、今まで使用されていた「下線」ではなく「非言語注釈」としての役割が新たに定義づけられました。

uタグの非言語注釈とは?正しい使い方は?

今回は、uタグの

・基本的な使い方
・HTML5以前のuタグとの役割の違い
・uタグを使わずに下線を引く方法

について説明します。今まで通りの使い方は、既に非推奨となっていますのでここで新しくuタグの使い方を学んでいきましょう!

uタグとは

uタグの読み方

uタグはそのまま「ユータグ」と読みます。uタグのuはunderline=下線の頭文字です。

uタグの説明

uタグは以前まではunderlineの直訳の通り「下線」を引く要素として使用されていましたが、HTML4で一度廃止されました。しかしHTML5では、綴りの誤りやその他の注釈、中国語の単語を示すときに使用するよう再定義されています。

MEMO
以前のuタグのように文章に下線を引きたい時は、CSSのtext-decorationプロパティを使用しましょう。

uタグで利用できる属性

uタグでは以下のグローバル属性のみが使用可能です。グローバル属性はHTMLの全要素で使用できる属性です。

属性 説明
  accesskey属性  キーボードのショートカットを生成し、簡易なアクセスを可能にする
class属性   要素に任意の名称を与える(同じclass名を複数の要素に与えられる)
 dir属性  テキストの書字方向を示す
・ltr:「left to right」左から右
・rtl:「rght to left」右から左
・auto:自動的に書字方向を決定する
 hidden属性  要素に関連性がないことを示す
id属性  要素に任意の名称を与える(同じidは使用できない:一意性)
 lang属性  要素の言語を定義する
style属性   要素にCSSスタイル宣言を適用する

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 12
Firefox  1
nternet Explorer  完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome  完全対応
Android版Firefox  4
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

uタグの基本的な使い方

uタグの使い方

まずはuタグの基本の使い方である、綴りのミスを指摘する使用用途を見てみましょう。uタグは再定義はされたものの、その見た目は再定義前と変わりませんそのため綴りミスなど、何かの間違いを指摘する際は、CSSで別途uタグを装飾する必要があります。

まずは装飾なしのuタグを見てみましょう。流星群は英語で”meteor swarm”と書きますが、meteorが『metor』になっている綴りのミスがあります。

See the Pen
uタグ基本
by rabbittyu (@rabbittyu)
on CodePen.

今度は綴りミスをわかりやすく指定できるように、CSSでuタグの表示を少し変更しました。CSS適用前は単なる下線でしたが、一般的に使用されているスペルミスの指摘のように、赤の波線になっています。

See the Pen
uタグ基本②
by rabbittyu (@rabbittyu)
on CodePen.

 

uタグを使わずに下線を表示する方法

ではここでuタグを使用せずに、下線を引く方法について詳しくご紹介します。下線を引くにはHTMLのタグではなく、CSSのtext-decorationプロパティを使用します。

pタグで通常の文章を書き、下線を引きたい部分をspanタグで囲います。class属性に指定する名前を他の文章でも指定すれば、CSSも一つで済みます。

See the Pen
underline
by rabbittyu (@rabbittyu)
on CodePen.

まとめ

今回はuタグの新しく定義された使い方についてご説明しました。uタグ=下線と認識されている方が殆どかと思いますが、最新版のHTML5では「注釈」という意味で再定義されました。

そのため以前のように文章に下線を引きたい場合は、その文章をspanタグで囲った後に、CSSでtext-decorationプロパティを使用しましょう。

参考文献:
MDN web docks <u>: 非言語的注釈(下線)要素
u要素・uタグとは
MDN web docks text-decoration