7 に答える
<i>タグを使用してアイコンを表示するのはなぜですか?
その理由は：
- 短い
- i はアイコンを表します (ただし、HTML にはありません)。
それは悪い習慣ではありませんか？
ひどい練習。これは、セマンティクスに対するパフォーマンスの勝利です。
少し遅れてここにジャンプしますが、自分で考えているときにこのページに出くわしました。もちろん、Facebook や Twitter がそれをどのように正当化したのかはわかりませんが、これが価値のあるものについての私自身の思考プロセスです。
最終的に、私はこの慣行はそれほど無意味ではないという結論に達しました (それは言葉ですか?)。<img>実際、短いことと「i is for icon」という素晴らしい連想に加えて、単純なタグが実用的でない場合、アイコンは実際には最も意味のある選択だと思います。
1.使用法は仕様と一致しています。
W3が主に考えていたものではないかもしれませんが、公式の仕様で<i>はアイコンをかなり簡単に収容できるように思えます. 結局のところ、返信矢印記号は別の方法で「返信」と言っています。読者にとってなじみのない専門用語を表すため、通常はイタリック体で表示されます。(「ここ Twitter では、これを返信矢印と呼んでいます。」) そして、それは別の言語、つまり記号言語からの用語です。
Twitter が矢印記号の代わりに<i>shout out</i>or <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. 最終的には、一般的な使用法が正しいものになります。
<i>上記に加えて、マシン リーダー (検索エンジン、スクリーン リーダーなど) は、Facebook、Twitter、およびその他の Web サイトがアイコンにタグを使用していることをいつでも考慮し始める可能性があることを考慮する価値があります。彼らは、必要な手段でコードから意味を抽出することに関心があるほど、仕様には関心がありません。したがって、この一般的な使用法に関する知識を使用して、単に「ここにアイコンがあるかもしれない」と記録したり、意味のヒントを得るために CSS を調べたり、誰が何を知っているかなど、より高度なことを行ったりする可能性があります。したがって、Web サイトで for アイコンを使用することを選択した場合<i>、仕様よりも多くの意味を提供している可能性があります。
また、この使い方が広まれば、将来的には仕様に含まれる可能性があります。<span>次に、 s をに置き換えて、コードを調べます<i>。したがって、特に現在の仕様と明確に矛盾しない場合は、仕様の方向性と思われるものに参加することは理にかなっているかもしれません. 一般的な用法は、その逆よりも言語規則を規定する傾向があります。あなたが十分に年をとっているなら、「Webサイト」という言葉が新しいときの公式の綴りだったことを覚えていますか? 辞書は、スペースが必要であり、Web は大文字でなければならないと主張しました。それには意味的な理由がありました。しかし、一般的な用法は、「とにかく、それはばかげています。より簡潔で見栄えが良いので、「website」を使用しています。」そしてやがて、
4.それで、私は先に進み、それを使用します。
つまり、<i>仕様により、マシンにとってより多くの意味を提供し、「i」を「アイコン」と簡単に関連付けることができるため、人間にとってより多くの意味を提供します。また、 1 文字しかありません。勝つ！また、タグ内またはタグのすぐ横に同等のテキストを含めるように<i>すると (Twitter のように)、スクリーン リーダーはクリックして返信する場所を理解し、CSS が読み込まれなくてもリンクを使用できます。視力と適切なブラウザには、きれいなアイコンが表示されます。これらすべてを念頭に置いて、私はマイナス面を見ていません。
iQuentin's answer は、タグをアイコンの定義に使用すべきではないと明確に述べています。
しかし、Holly はそれ自体には意味がないことを示唆し、タグの代わりにspan賛成票を投じました。ispan
imgセマンティックでaltタグが含まれているため、使用することを提案する人はほとんどいません。ただし、img空でもsrcサーバーにリクエストを送信するため、使用しないでください。ここを読む
私が思うに、正しい方法は、
<span class="icon-fb" role="img" aria-label="facebook"></span>
altこれにより、タグがないという問題が解決されspan、視覚障害のあるユーザーがアクセスできるようになります。これはセマンティックであり、タグの悪用 (ハッキング) はありません。
私はここで他のすべての人の答えとはまったく異なるアプローチをとっています。私の解決策を前に付けて、特に標準の HTML 字句タグ定義のコンテキストでは、標準や慣習が破られることが意図されていることを述べて主張させてください。
まさにその目的を説明するカスタム要素を作成することを妨げるものは何もありません。
最新のブラウザーと IE 6+ (shim を使用) の両方で、次のようなものをサポートできます。
<icon class="plus">
また
<icon-add>
タグを正規化してください：
icon { display:block; margin:0; padding:0; border:0; ... }
IE9 以前をサポートする必要がある場合は、shim を使用します (以下の投稿を参照)。
この StackOverflow の投稿をご覧ください。
私の主張をさらに進めるために、Google の Angular Directives と新しい Polymer プロジェクトの両方が、カスタム HTML タグの概念を利用しています。
私の推測: Twitter は従来のブラウザーをサポートする必要性を認識しているため、そうでなければ:before/:after疑似要素を使用していたでしょう。
従来のブラウザーは、私が言及した疑似要素をサポートしていないため、アイコンに実際の HTML 要素を使用する必要があります。アイコンには「排他的」タグがないため、タグを使用するだけ<i>で、すべてのブラウザーがサポートします。そのタグ。
彼らは確か<span>にあなたのように a を使用できたはずです（これはまったく問題ありません）が、おそらく私が上で述べた理由とQuentinによって言及された理由から、Bootstrap が<i>タグを使用している理由でもあります。
スタイリング上の理由で余分なマークアップを使用するのは悪い習慣です。そのため、コンテンツをスタイルから分離するために疑似要素が発明されました...もの。
PS。アイコンが「i」で始まることと<i>タグがあることは、まったくの偶然です。
私はこれがかなり悪いと思った-私は最近Joomlaテンプレートに取り組んでいて、<i>元の使用法は何かをイタリック体にすることであったため、タグを使用していて廃止されたため、W3Cに失敗するテンプレートを取得し続けたため、これはCSSを介して行われますもはや HTML ではありません。
<i>それを見たとき、テンプレートを調べてすべてのタグを<span style="font-style:italic">代わりに変更し、テンプレート全体が奇妙に見える理由を疑問に思ったので、それは本当に悪い習慣です.
これが、タグをこのように使用するのが悪い考えである主な理由<i>です。後で誰があなたの作品を見るのか分からず、あなたが本当にやろうとしていたのは、テキストを表示するのではなく、テキストをイタリック体にすることであると「想定」します。アイコン。ウェブサイトにいくつかのアイコンを配置したところ、次のコードで実行しました
<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">
そうすれば、すべてのアイコンを 1 つのクラスにまとめることができるので、変更を加えるとすべてのアイコンに影響します (アイコンを大きくしたり小さくしたり、境界線を丸くしたりしたいなど)、代替テキストを使用すると、スクリーン リーダーはその人に何を伝えることができますか?アイコンは、単に「イタリック体のテキスト、イタリック体の終わり」を取得するのではなく (スクリーン リーダーが画面をどのように読み取るかは正確にはわかりませんが、そのようなものだと思います)、タイトルはユーザーにマウスオーバーする機会も与えます。画像をクリックして、アイコンがわからない場合に備えて、アイコンが何であるかを示すツールチップを取得します。使用するよりもはるかに優れています<i>- また、W3C 標準に合格しています。
<a>また、リンクタグ内に絶対位置のアイコンを配置したい場合にも、これが役立つことがわかりました。
最初にタグについて考えました<img>が、リンク内のこれらのタグのデフォルトのスタイリングには、通常、境界線のスタイリングや影の効果があります。さらに、「src」属性を定義せずにタグを使用するのは間違っているように感じ<img>ますが、画像がゴーストやドラッグしないように背景画像スタイル シート宣言を使用しています。
この時点で、<span>またはのようなタグを考えています。この<i>場合<i>、このタイプのアイコンとして非常に理にかなっています。
全体として、直感的であることに加えて、このタグをアイコンとして機能させるために必要なスタイルシートの調整が最小限で済むという利点があると思います。