web-dev-qa-db-ja.com

HTML5で<icon>要素を使用できますか？ W3Cバリデーターに失敗します

W3Cバリデータサービスにアクセスして、<icon>要素の使用について文句を言う場合は、次の例を試してみてください。

<!doctype html>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="utf-8"/>
</head>
<body>
    <icon></icon>
</body>
</html>

私はそれから戻ってくるエラーは次のように言います：

エラー：このコンテキストでは、要素アイコンは要素本体の子として許可されていません。 （このサブツリーからのさらなるエラーの抑制。）

行8、列2から。行8、列7へ

要素本体のコンテンツモデル：フローコンテンツ。

「子として許可されていません」と書かれている部分は、<icon>要素自体が実際に存在する可能性がありますが、他の何かを対象としているため、構造的には適合しません。しかし、 MDN HTML elements reference に移動すると、<icon>要素がリストされません。

ただし、それを使用すると機能し（Fontawesomeアイコンを表示するために使用できます）、HTML5が独自の要素（およびディレクティブに任意の要素名を使用するAngularjs支持者）を許可することを示唆する方法を見ると、実際に使用するのは悪いでしょう実際に？

SEOにとって悪いことでしょうか？読者は文句を言うだろうか？パーサーは文句を言うでしょうか？将来性がないのでしょうか？

seohtmlhtml5validationw3c-validation
3
Digital Ninja

2つのこと：

  1. CSSファイルをリンクするのと同じ方法で、<head></head>に参照リンクを含めます：<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  2. <icon>を<i class="material-icons">cloud</i>として参照します

詳細については、 W3Schools Icon Tutorial をご覧ください。

添付
私は@unorに認めています。<span>はアイコンを参照する別の方法です。深刻なものがあるようです <i>と<span>の間の議論 ですが、両方の方法が機能しているようです。 W3Cによる<span>の使用が正しいと言う人がいることは理解できます。結局のところ、彼らはすべての仕様を設定しました。しかし...大規模なグローバル企業（別名Google）が<i>...を使用している場合、<i>の使用はすぐには終了しません。

<i>タグをサポートするソース：
W3.CSSアイコンmentions<i>と<span>の両方が可能使用（ただし、例では<i>を使用）
Google：Material Icons Guide

<span>タグをサポートするソース：
W3Cアイコンフォント
CSSのコツ：アイコンフォントの使用方法のHTML
BootstrapのUseIconic Font Recommendation は、HTMLの場合は<span>、SVGの場合は<img>を示します。
Font Awesome：Basic Use は、<span><i></i></span>タグをラッピングすることで両方を使用することを示しています（これは私には少し冗長なようですが）。

私たちの最良の選択肢は、プログラミング言語とアイコンの使用に基づいた決定だと思います。

1
elbrant