HTML5 qu'est-ce que l'attribut itemscope et que fait-il en termes simples?

89

Je voulais juste savoir à quoi sert essentiellement l'attribut HTML5 itemscope?

délimiter
la source
2
Cela devrait pouvoir vous l'expliquer en termes simples
Šime Vidas

Réponses:

67

L' [itemscope]attribut est un attribut booléen pour définir la portée des métadonnées contenues dans l'élément.

Il est défini dans l' API des microdonnées HTML5 :

Chaque élément HTML peut avoir un itemscopeattribut spécifié. L' itemscopeattribut est un attribut booléen.

Un élément avec l' itemscopeattribut spécifié crée un nouvel élément , un groupe de paires nom-valeur.

En d'autres termes, c'est une façon d'associer des métadonnées à un nœud DOM particulier.

Ceci est utilisé par l' API Schema.org pour associer des données aux moteurs de recherche et aux réseaux sociaux. Google+ utilise le schéma pour fournir des titres, des miniatures et des descriptions pour les pages partagées par les utilisateurs.


Il convient également de noter que [itemscope]et [itemprop]sont compatibles avec le protocole Open Graph de Facebook lors de la fourniture de métadonnées pour une page Web. Les mêmes métadonnées peuvent être répertoriées pour les moteurs de recherche, Facbook et Google+ dans un seul ensemble d' <meta>éléments plutôt que d'avoir à répertorier les mêmes informations plusieurs fois:

<html itemscope itemtype="http://schema.org/WebPage" xmlns:fb="https://www.facebook.com/2008/fbml">
  <head>
    <title>An Example Title</title>
    <meta content="An Example Title" itemprop="name" property="og:title" />
    <meta content="Lorem ipsum dolor sit amet" itemprop="description" name="description" property="og:description" />
    <meta content="http://www.example.com/image.jpg" itemprop="image" property="og:image" />
    <meta content="http://www.example.com/permalink" itemprop="url" property="og:url" />
    <link rel="canonical" href="http://www.example.com/permalink" />
  </head>
  <body>
    ...content...
  </body>
</html>

Notez que dans l'exemple, a [itemscope]été ajouté à l' <html>élément. Cela signifie que tous les [itemprop]attributs du <head>et <body>font partie de l' WebPageélément.

zzzzBov
la source
1
Il semble avoir été séparé du HTML5 final: w3.org/TR/microdata
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
34

Les moteurs de recherche tels que Bing, Google et Yahoo! utilisent maintenant itemscope et amis pour identifier les données sémantiques dans les pages Web. Sur le site Web schema.org , ils expliquent comment utiliser itemscope avec des schémas prédéfinis pour améliorer les données fournies aux moteurs de recherche.

http://schema.org/docs/gs.html

Bryan
la source