全然使う機会のないHTML要素にあえて光を当てる

## この記事の概要

HTML Living Standardを見ていると「一生使わないかもしれない」レベルの要素が時折存在します。
歴史的背景などは色々あるのでしょうが、たまにはスポットライトを当ててみても良いかもしれないと思い、記事にしました。

## `q`要素

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element

> The q element represents some phrasing content quoted from another source.

:::note
DeepLによる和訳：q 要素は、他のソースから引用されたフレージングコンテンツを表します。
:::

分かるような分からないような、なんとも言えない説明です。

要するに引用を表していて、この要素を使うと自動で引用符が挿入されます。[^auto-quote]
`q`要素を使わず手動で引用符を入れても何の問題も無いとのことで、本当に使う機会が無さそうです。

[^auto-quote]: Chromeで確認したところ、あくまでbefore, after要素を使って`content`として挿入しているだけだったので、上書きもできてしまいそうです。

## `i`要素

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-i-element

> The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

:::note
DeepLによる和訳：i 要素は、分類学上の名称、専門用語、他言語の慣用句、音訳、思想、洋書における船名など、別の音声や雰囲気、あるいは通常の散文とは異なる品質を示す方法で、テキストのスパンを表します。
:::

説明がほぼ分かりません。

小説でいうと、傍点が振られたり書体が変わったり、そういう表現のときには`i`要素を使うのだろうかと思っています。
しかし正直言って自信がありません。

`dfn`や`abbr`など、他のタグを使えばしっくり来る場面もありそうで、積極的に使う理由は見当たらない気がします。
また、詳しくは触れませんがアイコンフォントのために`i`を使うのは色々な意味で間違いです。

## `b`要素

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-b-element

> The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

:::note
DeepLによる和訳：b要素は、文書の要約のキーワード、レビューの製品名、インタラクティブなテキスト駆動型ソフトウェアの実用的な単語、記事の見出しなど、特別な重要性を伝えることなく、別の音声や雰囲気を暗示することもなく、実用的な目的で注意を引くテキストのスパンを表します。
:::

こちらもまた、ほとんど分かりません。

特定の単語にせよ見出しにせよ、`em`や`strong`などの方が強調の意味を分かりやすく表現できると思います。
また、見かけ上だけ強くしてセマンティックには影響を及ぼしたくないなら`span`に何かのクラスをつけて表現した方が良いはずです。

いずれにせよ、積極的に使う理由はなさそうです。

## `u`要素

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-u-element

> The u element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.

:::note
DeepLによる和訳：u 要素は、中国語の固有名詞であることを示すラベル（中国語固有名詞マーク）や、スペルミスであることを示すラベルなど、明示的に表現されてはいるが、テキスト以外の注釈が付いたテキストのスパンを表します。
:::

またもよく分かりません。
自分の読解力が著しく低いのかと不安になってきました。

単なる下線の場合`a`要素と見間違える可能性も否めません。
積極的に使う理由はなさそうです。

## `embed`要素

https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element

> The embed element provides an integration point for an external application or interactive content.

:::note
DeepLによる和訳：embed要素は、外部のアプリケーションやインタラクティブなコンテンツのための統合ポイントを提供します。
:::

1文字でないタグがようやく登場しました。

埋め込みコンテンツ用のタグですが、それらは外部アプリケーションやプラグインを通して再生されます。
ですが、最近はブラウザがプラグインを非推奨として、削除している場合もあるため、代わりに`object`や`video`、`audio`を使用した方が良いです。

## `map`要素、`area`要素

https://html.spec.whatwg.org/multipage/image-maps.html#the-map-element

https://html.spec.whatwg.org/multipage/image-maps.html#the-area-element

`map`について

> The map element, in conjunction with an img element and any area element descendants, defines an image map. The element represents its children.

:::note
DeepLによる和訳：map 要素は、img 要素および area 要素の子孫と組み合わせて、イメージマップを定義する。この要素はその子要素を表す。
:::

`area`について

> The area element represents either a hyperlink with some text and a corresponding area on an image map, or a dead area on an image map.

:::note
DeepLによる和訳：area 要素は、テキストを含むハイパーリンクとイメージマップ上の対応する領域、またはイメージマップ上のデッドエリアのいずれかを表す。
:::

この2つは実質セットです。

ゲーム的なコンテンツなどでは使えないことも無いと思うのですが、内容を読んでいると「使わない方が良いのでは？」と感じたのでここに記載しました。
アクセシビリティを損なってしまいそうなので、`a`要素で事足りるならその方が良いのではないかと考えています。

ここまで紹介してきた他の要素と比べると「使う必要がない」度合いが少ない気がします。

## 最後に

HTML Living Standardを見る際は「今まさに使っているタグの仕様」を調べることがほとんどだったので、こういう観点で見ると逆に新鮮でした。
まだHTMLに`center`などがあった頃には`i`はイタリック体を表すグラフィック表現用のタグだった、という背景を理解しつつも、どうにか帳尻をあわせている今の状況なら使わない方が良いな、という結論に至っています。

---

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

https://twitter.com/xrxoxcxox

Devトークでのお話してくださる方も募集中です！

https://jobs.qiita.com/employers/qiita-inc/dev_talks/489