30
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

えっ、iタグってiconのiじゃないんですか?

Posted at

違います

Font Awesomeをはじめとしたアイコンフォントの実装例にはiタグが使われていることが多いですよね。

それもあってかときどきiタグを「アイコンを表すタグ」として認識している方を見かけます。1

ですが、そうではありません。
比較的わかりやすいので日本語版のMDN Web Docsを見てみましょう。2

HTML の興味深いテキスト要素 (<i>)は、何らかの理由で他のテキストと区別されるテキストの範囲を表します。例えば、技術用語、外国語のフレーズ、架空の人物の思考などです。英文においてはよく斜体で表示されるものです。

「アイコンは文章の中で区別されるべき存在である」と捉えられなくはないですが、そもそもアイコンはテキストではありません。
少なくともアイコンを表しているわけではないのは間違いないですね。

それを踏まえてアイコンには何のタグを使えば良いのか

基本的にはspanで良いはずです。

アイコンが使われるのは「前後にテキストがあり、その上で視覚的な装飾を施したい」といった場合が多いのではないでしょうか。
そのため、セマンティックな意味をもたないspanがかえって適切だと思われます。

もちろん様々なケースがあるため一概には言えませんが、筆者は大抵spanを使っています。3

おまけ:なぜアイコンにはiを使うのかを考えてみた

そもそも何故アイコンにはiが使われるようになったのかを調べてみましたが、決定的な原因は分かりませんでした。
そのため以下はあくまで筆者の推測に過ぎません。
もしご存じの方がいたらコメントで教えていただけると幸いです。

  • 1文字のタグなのでタイピングが楽
  • 役割は違えどiconの頭文字がiであるのは事実だから覚えやすい
  • hみたいにデカい影響力を持っていないし、多少変な使い方しても良いよね」の気持ちになってしまった

  1. あくまで筆者の観測範囲における話です。 

  2. 筆者はHTMLタグの役割などを確認する際は、標準仕様を参照するためにもHTML Living Standardを閲覧する場合が多いのですが、iタグに関しては若干詩的な表現で理解が難しかったため今回はMDNを引用しました。 

  3. HTMLでのアイコンの扱い方というスコープからは外れるかもしれませんが、アイコンそのものがボタンの場合はbuttonにFont Awesomeのクラスを付与しつつaria-labelをつける……といった実装をするパターンなどもあります。 

30
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?