``タグは「ただの下線」ではない。HTML5が定義する「非明示的注釈」の正しい作法
フロントエンド開発の現場で、``タグを見かけたとき、あなたはどんな感情を抱きますか？「あ、テキストにアンダーラインを引きたいんだな」と、CSSの`text-decoration: underline`の代わりとして使おうとしていませんか？
もしそうなら、今日でその認識をアップデートしましょう。HTML5における``タグは、単なる見た目の装飾ではありません。「非明示的な注釈（Unarticulated Annotation）」を示すための、極めてセマンティックな要素なのです。
なぜ「ただの下線」として使ってはいけないのか
HTMLの仕様書（WHATWG）において、``タグは以下のように定義されています。
> 「スペルミスを示す波線や、固有名詞であることを示すなど、通常のテキストとは異なる注釈を伴う範囲」
つまり、「このテキストは通常の文脈とは少し毛色が違うよ」ということを伝えるためのマークアップです。これを単なるデザイン目的で使ってしまうと、スクリーンリーダーなどの支援技術が「ここには何らかの意味があるはずだ」と誤った解釈をしてしまい、ユーザー体験を損なうリスクがあります。
ブラウザのレンダリングエンジンは、デフォルトで``に下線を引きますが、これには「強調（``）でもなく、斜体（``）でもない、別の注釈がある」という警告が含まれていると考えてください。
実務で遭遇する「正しいユースケース」
では、具体的にどんな時に使うべきか。現場でよくあるのは、以下のようなケースです。
1. スペルミスの指摘: テキスト内の誤字脱字を明示する際、赤の波線を引く（CSSと組み合わせる）。
2. 固有名詞の注釈: 専門用語や、特定の文脈で意味が変わる言葉に補助的な印をつける。
3. レガシーなUIの再現: 特定のシステムで「検索キーワード」などを強調する際のUI仕様として採用されている場合。
重要なのは、「見た目（下線）はCSSで制御し、意味（注釈）はタグで担保する」という分離の哲学です。
実践：CSSで制御する「意味のある下線」の実装
ただの真っ直ぐな線ではなく、スペルミスのような「波線」を表現したい場合、現代のフロントエンドなら`text-decoration-style`を使うのがスマートです。
以下のコードは、実務でそのままコピペして使える、意味論的にも正しい実装例です。
このドキュメントには、いくつか意図的な修正箇所が含まれています。
例えば、この単語は タイプミス を示しています。
チームへのアドバイス：レビューで意識すべきこと
後輩のコードレビューをする際、``タグを見つけたら、まずは以下の問いかけをしてみてください。
「これは『意味としての注釈』ですか？ それとも『単なるデザイン』ですか？」
もし後者であれば、迷わず``タグとCSSクラス（例：`.text-underline`）への書き換えを促すべきです。逆に、``を使っているのなら、「なぜそこに注釈が必要なのか」という意図を確認してください。
エンジニアとして「タグの役割」を厳密に使い分けることは、SEOやアクセシビリティだけでなく、コードの保守性にも直結します。適材適所のマークアップができてこそ、真のプロフェッショナルです。
まとめ：セマンティクスは常に誠実であれ
``タグは、一見すると地味で時代遅れなタグに見えるかもしれません。しかし、HTML5の仕様を正しく理解し、文脈に合わせて使い分けることで、あなたの書くHTMLはより「雄弁」になります。
技術はただ動けばいいわけではありません。その裏側に意図があるかどうか。それが、凡庸なコーダーと、世界で評価されるエンジニアを分かつ決定的な差になります。
さあ、今日から``タグを使うときは、胸を張って「これは注釈である」と言えるような実装を心がけてみてください。その小さな積み重ねが、あなたのフロントエンド・エンジニアとしての矜持を形作るはずです。
コメント