その``、ただの「イタリック体にするタグ」だと思っていませんか？
フロントエンドの現場でコードレビューをしていると、未だに「とりあえず文字を斜体にしたいから``や``でいいや」という実装をよく見かけます。あるいは、``という要素の存在は知っていても、その真のセマンティクス（意味的役割）を正しく理解して使えているエンジニアは意外と少ないものです。
今回は、Webのアクセシビリティと検索エンジン最適化（SEO）の観点からも無視できない「``要素」の正しい作法と、現場でのスタイリングの向き合い方について、シニアの視点から掘り下げて解説します。
—
``要素の正体：HTML仕様が定める「引用元」の定義
W3Cの仕様書を紐解くと、``要素は「作品のタイトルを示すためのもの」と定義されています。ここで言う「作品」とは、単なる引用文の出典だけではありません。
- 書籍、論文、記事のタイトル
- 映画、演劇、楽曲のタイトル
- 絵画や彫刻などの芸術作品の名称
- ソフトウェアの名称（※文脈による）
重要なのは、「引用文そのもの（`
`や`
`）」を囲むためのタグではないということです。あくまで、「これは誰の、何の作品を指しているのか」というメタ情報を示すためのタグです。なぜブラウザはデフォルトでイタリック（斜体）にするのか？
多くのブラウザでは、``の中身をデフォルトでイタリック体としてレンダリングします。これは、欧米のタイポグラフィにおいて「作品名にはイタリックを用いる」という慣習があるためです。
しかし、ここで多くのエンジニアが罠に陥ります。「イタリックにしたくないから」という理由だけで``を避けたり、CSSで無理やり標準体に戻したりするのは、セマンティクスを軽視した行為です。ブラウザのデフォルトスタイルはあくまで「初期設定」に過ぎません。HTMLは意味を記述し、CSSは見た目を制御する。この基本に立ち返りましょう。
—
現場で即戦力になる実装パターン
では、実務でどう使うのが最も美しいのか。推奨されるパターンをサンプルコードとして提示します。
優れたデザインシステムは、単なるUIパーツの集まりではなく、チームのコミュニケーションを円滑にする言語である。
出典：
『モダンなデザインシステム論』
（著：田中 太郎）
この実装がなぜ「正解」なのか？
1. `cite`属性の活用: `
`に`cite`属性を入れることで、機械（クローラーや支援技術）に対して「この引用元のURLはここだ」という情報を明示しています。
2. `font-style: normal`の賢い利用: 「イタリックが嫌だから」とタグを変えるのではなく、CSSで制御する。これにより、スクリーンリーダーに対しては「これは作品名である」というセマンティクスを維持したまま、サイトのデザイン要件を満たすことができます。
3. `figure`と`figcaption`との組み合わせ: 引用文と出典元を意味的にグループ化することで、文書の構造がより明確になります。—
シニアエンジニアからのワンポイント・アドバイス
現場で``を使う際、もう一つだけ気をつけてほしいことがあります。それは「何でもかんでも``にしない」という点です。
例えば、ブログの著者名（「文：山田太郎」など）は、作品名ではないため``を使うべきではありません。著者の情報を出したいのであれば、`
`要素や、単純な``に`rel=”author”`などを検討するのが妥当です。HTMLを正しく書くということは、「このコンテンツが何であるか」をブラウザや検索エンジンに正しく翻訳してあげる作業です。タグ一つひとつに意味を込める癖をつけるだけで、数年後に自分の書いたコードを見返した時の「保守のしやすさ」が段違いに変わります。
もし、「これって``を使うべきか迷うな……」というケースがあれば、まずは「これは作品名と言えるか？」と自問自答してみてください。その一瞬の迷いが、あなたのコーディングスキルを確実に一段上のステージへと押し上げてくれるはずです。
さて、次はどのタグを深掘りしましょうか？ 何か特定のタグで悩んでいることがあれば、いつでも相談してくださいね。
コメント