3 
<p>...the favourite color of Purple is purple...</p>

1つ目の「パープル」は社名、2つ目は色名、

html5仕様に従ってこれをマークアップするにはどうすればよいですか?

前もって感謝します

4

2 に答える 2

4

いくつかのオプションがあります。

  1. そのままにしておくと、HTMLは、ドキュメント構造（段落、見出し、リストなど）の記述に関係のないセマンティクスには実際には関係しません。より詳細なドキュメントまたはアプリケーションのセマンティクスを表現したい場合は、WAI-ARIAを参照してください。
  2. ウェブサイトまたはアプリの一部として紫という単語の2つの使用法を区別することが重要な場合は、1つclassまたは複数のdata-*属性を使用してください
  3. 単語に標準的な機械可読形式があり、何らかの方法で値をコンピューターで解析したい場合は、data要素を使用します。
  4. サイトコンテンツを消費するユーザーまたはシステムにとって2つの用途を区別することが重要な場合は、HTML5のセマンティック拡張機能であるMicrodataを使用してください。（HTMLのXML方言を使用している場合は、RDFaも参照してください）
  5. 差し迫ったニーズに応じて、上記のアプローチのいずれかを組み合わせてください。

アプローチを決定するには、自分自身に問いかける必要があります。

  • HTMLのセマンティックボキャブラリーを拡張する必要があるのはどのような目的ですか？
  • それは私自身の使用のためですか、それとも他の人が使用するために情報を公開しようとしていますか？
  • 他の人のために公開する場合、どの共有語彙を使用しますか？

コード例：

クラス属性

それらの目的は、マークアップに追加情報を追加することです。属性はCSS仕様ではなくclass、HTML仕様にあることに注意してください。

<p>...the favourite color of <span class="company">Purple</span>
  is <span class="color">purple</span>...</p>

もちろん、このようにマークアップした後に行うべき明らかなことは、「すべての企業を強調表示する」などのことを行うためのページツールを提供することです。人々はこのclass属性を汎用のセマンティック拡張メカニズムの基礎として使用していますが、このアプローチについては、microformatsを参照してください。

データ属性

属性を使用すると、スクリプトで処理するためのdata-*カスタム属性をマークアップに追加して、将来のバージョンのHTMLで使用されるカスタム属性を誤って使用しないようにすることができます。

<p>...the favourite color of <span data-typeofthing="company">Purple</span>
  is <span data-typeofthing="color">purple</span>...</p>

属性を使用して何か便利なことを行うのはページ上のスクリプト次第でありdata-*、ブラウザや他のWebクライアントはそれらを無視します。

カスタムデータ要素

データ要素は、不正確な自然言語表現だけでなく、正確な機械可読表現を持つもののためのものです。会社がティッカーシンボルで一意に識別でき、RGBが色を処理すると仮定します。

<p>...the favourite color of <data value="purp">Purple</data>
  is <data value="rgb(128,0,128)">purple</data>...</p>

dataブラウザはおそらく要素に対して特別なことは何もしません。ほとんどの場合、data要素をmicroformats、RDFa、またはMicrodataと組み合わせて使用​​します。

マイクロデータ

組織スキーマの使用：

<p>...the favourite color of 
  <span itemscope itemtype="http://schema.org/Organization">
    <span itemprop="name">Purple</span>
  </span>
is purple...</p>

私が知っている色については何もありませんが、それがあなたにとって重要であるならば、あなたはいつでもそれのためにあなた自身のスキーマを公開することができます。このアプローチは、ある種の共有語彙がある場合にのみ、実際に誰にでも利益をもたらします。

于 2012-06-29T01:22:35.473 に答える
1

どの要素？

最初のタスクは、「エンティティ」(会社名と色名) を囲むために使用する要素を決定することです。ほとんどの場合、spanここで使用する必要があります。疑問がある場合は、 を使用してspanください。他の要素を使用できるいくつかのケースがあります (コンテンツによって異なります):

  • b要素は、エンティティが何らかのキーワードである場合に使用される可能性があります (「特別な重要性を伝えることなく、別の声やムードを暗示することなく、実用的な目的で注意を引くテキストのスパン」)
  • エンティティが作品 (本、映画、歌など) のタイトルである場合、cite要素を使用する必要があります。
  • エンティティが同じ段落または最も近い先祖セクション要素で定義されている場合、dfn要素が使用される可能性があります
  • 場合によっては、i要素が適切である可能性があります

用語が略語/頭字語である場合は、abbr要素( / /に加えてresp.の代わりに) を使用します。span bdfni

aこの要素を使用して、エンティティ名を関連する Web ページにリンクすることをお勧めします。属性は、コンテンツ/コンテキストに応じて、追加のrelメタデータを提供する場合があります ( relHTML5 仕様にリストされている値、またはmicroformats wiki に登録されている値を使用できます)。rel

どの属性？

グローバル属性を見てください。

microformatsclassを使用する場合は、この属性を使用します。もちろん、他の名前を使用することもできますが、それらは自分自身 (ドキュメント、CSS、JS) またはマークアップを読む他の人 (ドキュメント、スクレイピング) にのみ役立ちます。class

人名や会社名などのエンティティ名の場合、そのような名前は翻訳されるべきではないため、おそらくキーワードでtranslate属性を使用する必要があります。no

は追加情報を提供する場合があります ( /titleには特別なセマンティクスがあることに注意してください) が、重要な情報についてはそれに依存しないでください。dfnabbr

langエンティティ名が外国語の場合に使用します。

コンテンツに意味のある注釈を付ける方法は?

一緒に使用することもできる 3 つの一般的な選択肢があります(違いの簡単な要約については、この回答 (「3 番目のステップ」)を参照してください)。

  • マイクロフォーマット
  • RDFa
  • マイクロデータ

追加の要素が必要になる場合があります。その場合は、 を使用しますspan。

于 2012-10-23T18:07:33.090 に答える