質問: ### 前提 タグは、HTML5タグリファレンスによると、 > > 声や心の中で思ったことなど、他と区別したいテキストを表す > > > と定義されており、 > > 分類学上の名称、専門用語、他言語の慣用句、思考の内容、船の名前 > > その他一般的に印刷される際にイタリック体となるようなテキスト > > > に使うと書かれています。 しかし、Font Awesomeを始めとしたアイコンを置くために用いる用法をよく見かけます。 これは、内側には何も文字列を記入せずに図を入れるためだけにタグを用いるものです。 ### 発生している問題 1これは印刷時にイタリック体となるようなテキストではないが、正しい文法なのか 2この用法で文法的に正しくない場合は、SEOで不利にならないのか ### 該当のソースコード ``` ``` ### 意図 何かしらの手段でアイコンを利用したく、 Font Awesomeは便利なので使用したいと考えていますが、 SEOで不利になるようであれば別の手段(など)を使うつもりです。 ### 補足 もしSEOで不利になるようであれば、 どのような代替案があるのかもご教示くださると幸いです。
回答: 正しい文法かどうか アイコンフォントなどをi要素でマークアップすることがよくありますが、i要素の意味としてアイコンの意味は**ありません**。そもそも、アイコンはテキストですらありませんので、HTML5の文法的には怪しいと考えて良いと思います。 > > 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. > > > 参考: 4.5 Text-level semantics — HTML5 ですが、アイコンを置くためにi要素)を使うという**風習**があります。この風習が広まった背景には、以下のようなものが考えられますが、i要素)を使う決定的な意味はありません。代用が可能ならより合った要素を使用すると良いのではないかと思います。 * 要素名が1文字で打ちやすいから。 * i要素という要素名はiconの頭文字からとられているという間違った認識が広まった。 * Font Awesomeに関しては、そうしているからそうした。 Font Awesome]([Font Awesome)の場合、i要素)以外でも動作するので、span要素で代用することをお勧めします。 ``` タイトル テキスト ``` SEOで不利にならないのか SEOは、どうすれば有利になるか、不利になるか完全にわかるものではないので、一概にこうだということは言えませんが、ウェブマスター向けガイドライン(品質に関するガイドライン)に以下のような記述があることから、HTMLの文法も評価の対象にしている可能性が高いので、**HTMLの文法を守っておくに越したことはない**と思います。 > > タグの要素と alt 属性の説明をわかりやすく正確なものにします。 > > >