HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのuタグ(u要素)とは?HTML5での役割の変化と使い方を実例付きで解説

HTMLの<u>要素は、HTML4の時代にはWebページ上のテキストに下線を引くための装飾用タグとして使われていました。しかし、HTML5ではその役割が再定義され、「通常のテキストとは異なる意味やニュアンスを持つテキスト」を表すセマンティックな要素へと変わりました。

具体的には、中国語の固有名詞のマーク付けや、スペルミスを指摘する際の下線など、視覚的にも意味的にも「普通のテキストではないこと」を伝えたい場面で使用します。なお、リンクであることを示す下線は<a>タグが担うため、<u>タグの使い方によってはユーザーにリンクと誤認させる恐れがある点には注意が必要です。

それでは、<u>タグの実装例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>ショートカットキー</h2>
<p>以下の<u>ショートカットキー</u>を使い分けましょう:</p>
<p><strong>切り取り</strong>: Ctrl + X</p>
<p><strong>コピー</strong>: Ctrl + C</p>
<p><strong>貼り付け</strong>: Ctrl + V</p>
<p><strong>元に戻す</strong>: Ctrl + Z</p>
</body>
</html>

出力結果

HTMLのuタグ(u要素)とは?HTML5での役割の変化と使い方を実例付きで解説

上記の例では、<u>タグで囲まれた「ショートカットキー」という部分が、周囲の通常テキストとは異なるスタイル(下線付き)で表示されます。該当する箇所を抜き出すと次のようになります。

<p>以下の<u>ショートカットキー</u>を使い分けましょう:</p>
<p><strong>切り取り</strong>: Ctrl + X</p>

補足:CSSで下線を引くのが望ましいケース

単純に見た目として下線を引きたいだけであれば、HTML5では<u>タグではなく、CSSのtext-decoration: underline;を使うことが推奨されています。<u>タグはあくまで「意味を持つ注釈」を表現するための要素であり、装飾目的での乱用は避け、適切に使い分けることが重要です。

  1. HTMLのcenterタグとは？中央揃えの基本とCSSでの代替方法を解説

    HTMLの<center>タグは、テキストやコンテンツを水平方向に中央揃えで表示するための要素です。かつては見出しや段落、表などをページの中央に配置する際に広く使われていました。 注意：<center>タグはHTML5では廃止されており、最新のWeb制作では使用が推奨されません。中央揃えを実装したい場合は、CSSを使うことが公式にも提案されています。 centerタグが非推奨となった理由 <center>タグは、「文書の構造」と「見た目の装飾」を分離するというHTMLの設計思想に反するため、HTML5で廃止されました。レイアウトやデザインに関する指定はす

  2. HTMLのcolgroupタグとは？テーブルの列をまとめてスタイルする方法

    <colgroup>タグとは<colgroup>タグは、HTMLテーブル内の1つ以上の列（カラム）をひとつのグループとしてまとめるための要素です。このタグを使うことで、グループに含まれるすべての列に対して、まとめてスタイルを適用できます。セルや行ごとに個別にスタイルを記述する必要がないため、コードがすっきりし、テーブル全体のデザイン管理も効率的になります。主な属性span − 列グループが対象とする列の数を指定します。たとえば「span=3」と設定すると、先頭から3列分が同じグループとして扱われます。使用例それでは、<colgroup>タグを使った実際の実装