web-dev-qa-db-ja.com

data-value、data-title、data-original-title、original-titleなどの目的と使用法は何ですか？

GitHubなどのより新しいWebサイトでこれらの属性を見てきましたが、title属性のようなカスタマイズされたポップオーバーと常に一致しているように見えました。

<a href="/" data-value="hovering message">Option 1</a>
<a href="/" data-title="hovering message">Option 2</a>
<a href="/" data-original-title="hovering message">Option 3</a>
<a href="/" original-title="hovering message">Option 4</a>

HTML5 Doctorのデータ属性に関するドキュメントをいくつか読みましたが、その点についてはよくわかりません。

それらを使用することで、SEOやアクセシビリティの利点はありますか？そして、この特定のケースでポップオーバーを作成するために一般的に使用されているプラ​​グイン（できればjQuery）は何ですか？

htmlhtml5custom-data-attribute
16
questy

簡単に言えば、カスタムデータ属性の仕様では、「data-」で始まる属性はプライベートデータのストレージエリアとして扱われます（エンドユーザーが表示できないという意味でプライベート-レイアウトには影響しません）またはプレゼンテーション）。

これにより、有効なHTMLマークアップを記述して（HTML 5バリデーターを渡す）、同時にページ内にデータを埋め込むことができます。簡単な例：

 <li class="user" data-name="John Resig" data-city="Boston"
        data-lang="js" data-food="Bacon">
      <b>John says:</b> <span>Hello, how are you?</span>
    </li>

From： Ejohn.org '外部リンクポリシーについてはわからない。誰かが知りたい場合に備えてここに置くだけ

13
lloan

HTML5 data-*属性は、要素にデータを保存するために使用されます

この属性で操作するには、 jQuery.data（） または 。data（） メソッドを使用できます。

12
Shaddow

主なポイントは、data-属性は、後でHTMLに追加される可能性のある属性やブラウザ固有の属性と衝突しません。アイデアは、作者に遊び場、名前空間を提供することです。名前空間では、属性を何らかの意味で標準属性またはベンダー定義の属性として解釈されることを恐れることなく、プライベートな目的で使用できます。

この考えによれば、検索エンジンと支援ソフトウェアは、相互運用可能な意味がないため、このような属性を無視します。

7
Jukka K. Korpela