HTML sémantique 1/20

Transcription

1 HTML sémantique 1/20

2 Rappels Rôles HTML - CSS Microformats Microdonnées RDFa Rich Snippets Conclusion Sommaire 2/20

3 Rappels 2 types de web : Web des documents Web des données (web sémantique) (X)HTML sémantique => donner du sens aux informations des pages web 3/20

4 Rôles HTML - CSS HTML : Gérer et organiser le contenu Dire ce qui doit être affiché sur la page (texte, liens, images ) et où = fond CSS Gérer l apparence de la page web Comment afficher l information = forme 4/20

5 Erreurs sémantiques courantes Erreur Pourquoi? Utilisation des balises <tr> et <td> pour de la mise en page Choix de la balise de titre <hx> en fonction de la taille qu elle applique au texte Utiliser <em> ou <cite> (resp. <strong> et <mark>) pour mettre le texte en italique (resp. gras et surligné) Utiliser des balises tels que <i> ou <b>pour mettre du texte en italique ou en gras Utilisation abusive des balises générique <span> et <div> Ex: <div class= titre > Ce sont des éléments dont le but est d y placer des données tabulaires Ne mettre un <h2> seulement si un <h1> est présent précédemment dans le document (de même pour <h3>, etc.) Utiliser les propriétés CSS pour le faire (font- style: italic, font- weight: bold et backrground- color: yellow) W3C : [ ] the element has now been given the specific semantic purpose of representing text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is italic text Mais la mise en forme = CSS W3C : You should not use b and i tags if there is a more descriptive and relevant tag available. If you do use them, it is usually better to add class attributes that describe the intended meaning of the markup, so that you can distinguish one use from another. Peut poser des problèmes de localisation par exemple Se demander si un élément existe déjà représentant le même concept Ex: <h1> 5/20

6 Autres raisons de faire de la sémantique Compatibilité des appareils obsolètes, téléphones portables Personnes handicapées (lecteurs audio, navigateurs adaptés ) Test possible : afficher la page HTML sans son CSS A noter : HTML 5 introduit de nouvelles balises (<header>, <footer>, <nav>, <section>, <article>, <aside>, <hgroup>, <time> ) 6/20

7 Les microformats en HTML Volonté de standardiser le contenu des pages HTML µf : extension au HTML Ensemble de formats de données, simples et ouverts construits sur des standards existants et largement adoptés Simples conventions pour incorporer la sémantique dans le HTML pour un domaine spécifique Métadonnées à travers les attributs class, rel et rev 7/20

8 Exemple de microformat : hcard Microformat simple pour publier les détails de contact de personnes, sociétés, organisations et lieux Classe vcard : nom de classe racine qui indique la présence d une hcard Classes url, fn, org : propriétés de la hcard 8/20

9 hcard <div id="hcard- Simon- Maxime- Prieul" class="vcard"> <span class="fn n"> <span class="given- name">simon</span> <span class="additional- name">maxime</span> <span class="family- name">prieul</span> </span> <div class="org">udem</div> <a class=" <div class="adr"> <div class="street- address">4635 St- Urbain</div> <span class="locality">montréal</span>, <span class="region">qc</span> <span class="country- name">canada</span> </div> </div> 9/20

10 Autres microformats Evénements (hcalendar) Coordonnées géographiques (geo) Articles d actualités (hnews) Recettes de cuisine et cuisson (hrecipe) CVs (hresume) Mots- clé (rel- tag) Relations sociales entre individus (XFN) 10/20

11 Utilité des microformats Standardiser la hiérarchisation des données Facilité de partager et réutiliser ces données Faciliter leur compréhension par des programmes informatiques Permettre la transformation de ces données (export de contact dans Microsoft Outlook ) 11/20

12 Microdonnées Fonctionnalité HTML5 Notion de Vocabulaires à partir de vocabulary.org/ Ajouter une microdonnée à un texte = ajouter des attributs aux éléments HTML existants (itemscope, itemtype, itemprop) Le contenu texte de la balise correspond à la valeur de la propriété 12/20

13 Exemple de microdonnées <section itemscope itemtype= vocabulary.org/person > <h1 itemprop= name ></h1> <p itemprop= association >UdeM</p> <p> <a itemprop= url href= >Mon site</a> </p> </section> Itemtype indique quel vocabulaire on utilise Itemscope indique la portée avec laquelle les microdonnées sont définies Itemprop indique quelle propriété du vocabulaire est précisée Ici : name=nom, association=association à une organisation, url : page Web D autres propriétés existent pour le vocabulaire Person, comme nickname, photo, title, role, association, address 13/20

14 Utilité des microdonnées Utilité similaire aux microformats, auxquels elles sont d ailleurs similaires Notons que le projet Schema.org (qui définit des vocabulaires) est supporté par Google, Yahoo!, Bing 14/20

15 RDFa Ajouter des données structurées dans une page HTML Recommandation du W3C Tout comme les microformats, utilise les attributs HTML class, rel et rev Utilise de plus les attributs HTML id et href Ajoute ses propres attributs about, property, content, datatype et resource Utilisation des espaces de noms 15/20

16 Exemple de RDFa <div typeof= foaf:person xmlns:foaf= > <p property= foaf:name ></p> <p> <a rel= foaf:mbox href= mailto:simon.prieul@gmail.com >simon.prieul@gmail.com</a> </p> </div> 16/20

17 Rich Snippets Microformats, microdonnées ou RDFa => seront utilisées par Google pour enrichir les extraits sous le titre des pages résultats Rich Snippet Tool : contrôler la validité du balisage Rich Snippets populaires : nombre d évaluateurs du produit, note globale, prix, recette, informations sur album 17/20

18 Conclusion Sémantique de HTML 5 Trois façons d enrichir la sémantique du HTML Microdonnées semble être le format du futur (supportés par les trois moteurs de recherche principaux, plus simple que RDFa) 18/20

19 Bibliographie semantique semantique/html5- microdonnees/introduction/ semantique/rdfa/introduction/ rich- snippets- un- incontournable- de- la- strategie- seo/ /20

20 Des questions? Merci de votre attention! 20/20