<span>の代わりにアイコンに<i>タグを使用する必要がありますか？[閉まっている]

私はFacebookのソースを調べましたが、<i>タグを使用してアイコンを表示しています。

また、今日はTwitterのBootstrapを調べました。また、<i>タグを使用してアイコンを表示します。

だが、

HTML5仕様から：

I要素は、代替の音声または気分でテキストの範囲を表すか、そうでなければ、分類学的指定、専門用語、別の言語の慣用句、思想、船名、またはその他の通常の散文からオフセットされます典型的な活版印刷のプレゼンテーションがイタリック体になっている散文。

<i>タグを使用してアイコンを表示するのはなぜですか？

それは悪い習慣ではありませんか？

または、ここで何か不足していますか？

私はspanアイコンの表示に使用していますが、今までは問題なく動作しているようです。

更新：

Bootstrap 3はspanアイコンに使用するようになりました。公式ドキュメント

<i>タグを使用してアイコンを表示するのはなぜですか？

その理由は：

• ショート
• 私はアイコンを表しています（ただしHTMLではありません）

それは悪い習慣ではありませんか？

ひどい練習。これは、セマンティクスに対するパフォーマンスの勝利です。

私は少し遅れてここに飛び込んできましたが、自分で考えたときにこのページに出くわしました。もちろん、FacebookやTwitterがそれを正当化した方法はわかりませんが、ここに、それが価値あるものについての私自身の思考プロセスを示します。

結局、私はこの実践はそれほど意味のないものではないと結論づけました（それは言葉ですか？）。実際、簡潔さと「iはアイコンを表す」という優れた関連付けに加えて、単純な<img>タグが実用的でない場合、これは実際にはアイコンの最もセマンティックな選択だと思います。

1.使用法は仕様と一致しています。

それはW3が主に考えていたものではないかもしれませんが、私にとっての公式の仕様<i>はアイコンをかなり簡単に収容できるように思えます。結局のところ、返信矢印記号は別の意味で「返信」と言っています。これは、読者にとってなじみのない専門用語を表し、通常はイタリック体になります。（「こちらのTwitterでは、これが返信矢印と呼ばれています。」そして、これは別の言語からの用語です。記号言語です。

矢印記号の代わりにTwitterが（英語のページで）<i>shout out</i>またはを使用した場合<i>[Japanese character for reply]</i>、それは仕様と一致します。その後、なぜ<i>[reply arrow]</i>でしょうか。（ここでは、アクセシビリティではなく、厳密にHTMLのセマンティクスについて話しています。これについては後で説明します。）

私の知る限り、アイコンの使用法によって明示的に違反されている仕様の唯一の部分は、「タグのテキストも含まれていない場合の」「テキストのスパン」フレーズです。<i>タグが主にテキスト用であることは明らかですが、タグの全体的な意図と比べると、これはかなり細かい部分です。このタグの重要な問題は、含まれるコンテンツの形式ではなく、そのコンテンツの意味です。

これは、「テキスト」と「アイコン」の間の線がWebサイトにほとんど存在しない可能性があると考える場合に特に当てはまります。テキストはアイコンのように見えるか（日本の例のように）、アイコンはテキストのように見える（「送信」と書かれたjpgボタンや、キャプションがオーバーレイされた猫の写真のように）、またはテキストがCSS経由の画像。テキスト、画像-誰が気にする？それはすべてのコンテンツです。障害のある人間、障害のあるブラウザ、検索エンジンのスパイダー、およびその他のさまざまな種類のマシンがその意味を理解できる限り、私たちは私たちの仕事を終えました。

したがって、仕様の作成者がこれを明確にすることを考えなかった（または選択しなかった）という事実は、意味のあることから手を離してはならず、タグの精神と一致しています。この<a>タグは元々ユーザーを別の場所に移動することを目的としていましたが、現在はライトボックスがポップアップする場合があります。大きなフープですよね？仕様に追いつく前に、クリックでライトボックスをポップアップする方法を誰かが見つけていたとしても、<a><span>場合、現在の定義と完全に一致していなくてもタグではなくありました。タグの趣旨と一致しています（「ここをクリックすると何かが起こります」）。同じこと<i>-あなたがその中に入れたどんな種類の物でも、または創造的にあなたがそれを使ったとしても、

2. <i>タグが追加されます、アイコン要素に意味的な意味をします。

アイコンクラスを単独で運ぶための代替オプション<span>はです。もちろん、これには意味的な意味はまったくありません。機械が<span>何を含んでいるかを尋ねると、「私は知りません。何でもいいのです」と言います。しかし、<i>タグには、「私は通常とは異なる言い方や、なじみのない言葉が含まれている」と述べています。これは「アイコンが含まれている」とは異なりますが、実際よりもかなり近くなってい<span>ます。

3.最終的には、一般的な使用法が適切になります。

上記に加えて、マシンリーダー（検索エンジン、スクリーンリーダーなど）がいつでもFacebook、Twitter、およびその他のWebサイトが <i>がアイコンタグをがあります。彼らは、必要な手段でコードから意味を抽出することほど重要ではないので、仕様については重要ではありません。そのため、この一般的な使用法の知識を使用して、「ここにアイコンがあるかもしれません」と単に記録するか、意味のヒントを得るためにCSSを調べたり、誰が何を知っているかなど、より高度なことを行ったりします。したがって<i>、Webサイトでforアイコンを使用することを選択した場合、仕様よりも多くの意味を提供している可能性があります。

さらに、この使用法が広まった場合、将来的には仕様に含まれる可能性があります。次に、コードを調べ、<span>sを<i>'s！に置き換えます。そのため、特に現在の仕様と明確に矛盾しない場合は、仕様の方向性を理解することは理にかなっています。一般的な使用法は、他の方法よりも言語ルールを決定する傾向があります。あなたが十分に古い場合、その単語が新しいとき、「Webサイト」が公式のスペルだったことを覚えていますか？辞書にはスペースが必要で、Webは大文字にする必要があると主張しました。それには意味的な理由がありました。しかし、一般的な用法は、「何でも、それはばかげています。私は、より簡潔で見栄えが良いので、「ウェブサイト」を使用しています。」そしてやがて

4.先に進んで使用します。

だから、<i>「i」は「アイコン」で、我々は簡単に関連付けるので、それは人間に多くの意味を提供し、なぜならスペックの複数のマシンに意味を提供し、そしてそれが唯一の文字の長です。勝つ！<i>タグ内またはそのすぐ隣に（Twitterのように）同等のテキストを含めることを確認すると、スクリーンリーダーはクリックして返信する場所を理解し、CSSが読み込まれない場合はリンクを使用できます。視力とまともなブラウザにはかわいいアイコンが表示されます。これらすべてを念頭に置いて、私はマイナス面を見ることはありません。

クエンティンの答えは、iタグをアイコンの定義に使用してはならないことを明確に述べています。

しかし、ホリーはspanそれ自体には意味がないと提案しi、spanタグの代わりに賛成票を投じました。

imgセマンティックでaltタグが含まれているため、使用を提案するものはほとんどありません。しかし、img空であってもsrcリクエストをサーバーに送信するので、使用すべきではありません。こちらをお読みください

正しい方法は、

<span class="icon-fb" role="img" aria-label="facebook"></span>

これにより、altタグがないという問題が解決され、span視覚障害のあるユーザーがアクセスできるようになります。これはセマンティックで、タグの誤用（ハッキング）はありません。

私の推測：Twitterはレガシーブラウザをサポートする必要があると考えているため、そうでない場合は:before/ :after疑似要素を使用することになります。

レガシーブラウザは、前述の疑似要素をサポートしていないため、アイコンには実際のHTML要素を使用する必要があります。アイコンには「排他的」タグがないため、タグを使用するだけ<i>で、すべてのブラウザがサポートしますそのタグ。

彼らは確かに<span>あなたと同じように（これはまったく問題ありません）を使用することができましたが、おそらく上記の理由とQuentinによって言及された理由のために、Bootstrapが<i>タグを使用している理由でもあります。

スタイリングの理由で追加のマークアップを使用する場合、これは悪い習慣です。そのため、疑似要素コンテンツからスタイルを分離するが発明さです...しかし、レガシーブラウザーをサポートする必要がある場合は、このようなことを強いられることがあります。事。

PS。アイコンが「i」で始まり、<i>タグがあるという事実は完全に偶然です。

私は他の皆の答えに対して、ここでは全く異なるアプローチをとっています。私のソリューションにプレフィックスを付けて、特に標準のHTML字句タグ定義のコンテキストでは、標準と規則が破られることを意図している場合があると述べて、議論します。

それが非常に目的であることを自己説明するカスタム要素の作成を妨げるものは何もありません。

最新のブラウザーとIE 6+（shim付き）の両方でも、次のようなものをサポートできます。

<icon class="plus">

または

<icon-add>

タグを正規化してください：

 icon { display:block; margin:0; padding:0; border:0; ... }

IE9以前をサポートする必要がある場合は、shimを使用してください（以下の投稿を参照）。

このStackOverflow投稿を確認してください。

HTML5で独自のhtmlタグを作成する方法はありますか

私の議論をさらに進めるために、GoogleのAngular Directivesと新しいPolymerプロジェクトの両方がカスタムHTMLタグの概念を利用しています。

これはかなり見た目が悪いと思いました-最近Joomlaテンプレートで作業し<i>ていて、タグを使用していて、テンプレートがW3Cで失敗し続けていたためです。 HTMLではありません。

私がそれを見て、テンプレートを調べて、すべての<i>タグを<span style="font-style:italic">代わりにテンプレート全体が奇妙に見えるのはなぜか疑問に思った。

これが、<i>このようにタグを使用することが悪い考えである主な理由です。後で誰が作業を見るのかわからず、実際に実行しようとしているのは、テキストを表示するのではなく、斜体にすることを「想定」します。アイコン。私はウェブサイトにいくつかのアイコンを配置しました、そして私は次のコードでそれをしました

<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">

このようにして、すべてのアイコンを1つのクラスにまとめたので、変更を加えるとすべてのアイコンに影響します（たとえば、アイコンを大きくしたり小さくしたり、境界線を丸めたりしたいなど）。代替テキストを使用すると、スクリーンリーダーはそのことをユーザーに伝えることができます。アイコンは単に「イタリック体のテキスト、イタリック体の終わり」（スクリーンリーダーがどのように画面を読み上げるのか正確にはわかりません）ではなく、タイトルはユーザーにマウスオーバーの機会を与えます画像と、アイコンがわからない場合に備えてアイコンを示すツールチップを取得します。を使用するよりもはるかに優れています<i>-また、W3C標準に合格しています。

リンク内に絶対配置のアイコンを配置したい場合にも、これが役立つことがわかりました <a>タグ。

<img>最初にタグについて考えましたが、リンク内のこれらのタグのデフォルトのスタイル設定には、通常、境界線のスタイル設定や影の効果があります。さらに、それを使用するのは間違っていると感じます<img>「src」属性を定義せずにタグますが、背景画像のスタイルシート宣言を使用して、画像がゴーストやドラッグにならないようにしています。

この時点で、<span>またはのようなタグを考えています<i>-その場合<i>、このタイプのアイコンと同じくらい意味があります。

概して、私は直感的であることに加えて、このタグをアイコンとして機能させるために最小限のスタイルシート調整を必要とするという利点を考えています。