Sémantique des éléments et attributs HTML

Mémo des éléments et attributs à utiliser pour contenir un certain type de données.

Par thématique (cf. Sections)

<section> : ensemble d'articles ou un simple titre + paragraphe, regroupés par thématique.
Note : Le titre est essentiel à la sémantique de la section (cf. page Sections).
<article> : articles, previews/extraits d'articles, objets media, commentaires...
<header> : entête du site, de section ou d'article. Peut englober un titre, des métadonnées, une navigation locale, une table des matières…
Note : doit être le premier enfant de l'élément qui l'englobe.
<footer> : pied de page du site ou d'article. Peut englober des métadonnées complémentaires comme les étiquettes, la catégorie, le nombre de commentaires…
Note : doit être le dernier enfant de l'élément qui l'englobe.
Note 2 : il peut y avoir un <header> sans nécessairement qu'il y ait un <footer> et vice-versa.
<nav> : navigation (souvent <header> et <footer>)
<aside> : peut contenir une définition, biographie, glossaire, chronologie, autre éclaircissement, astuce, note...
Dans une section, peut contenir une citation, une remarque, des ressources complémentaires...
<address> : informations de contact relatives à l'auteur du contenu de la section, ou au site dans son entièreté.
<details> : spécifications techniques
<h1> à <h6> : titre de section.
Plusieurs hiérarchies de titres sont possibles, tant qu'elles portent chacune sur une section différente.
<hr> : séparation thématique

Liens et relations

<a rel="alternate"> version alternative du document courant, par exemple une traduction (utiliser l'attribut hreflang pour préciser la langue) ou un autre format de fichier (utiliser l'attribut type pour préciser le format).
Fonctionne aussi avec <link>, pour citer toutes les pages du site courant étant des versions alternatives du document courant.
<a rel="author"> auteur du document (site perso ou mail)
<a rel="bookmark"> permalien de la section
<link rel="canonical"> version "préférée" ou originale du document courant, par opposition à rel="alternate".
Google recommande de toujours préciser le lien canonique de chaque document, que ce soit avec cet élément ou par d'autres moyens.
<a rel="external"> lien externe au site
<a rel="first">, last>, prev>, next> et up> liens séquentiels pour les contenus sur plusieurs pages* <a rel="help"> aide contextuelle
<a rel="index"> table des matières
<a rel="license"> licence d'utilisation
<a rel="nofollow"> non approuvé par le posteur (n'améliorera pas le pagerank du lien)
<a rel="noopener noreferer"> empêche la page cible d'accéder au contexte de navigation et au référent. Surtout utilisé avec target=_blank par sécurité.
<a rel="tag"> étiquette
<a download=""> fichier téléchargeable
<a rel="prefetch"> moteur de recherche

Bien que les exemples suivants montrent des liens (<a>), la recommandation RDFa permet d'utiliser l'attribut rel sur n'importe quel élément :

<h1>Un article fabuleux !</h1>
<div>Par <span property="author">Jean Rochefort</span></p>
<p>Le <time datetime="2017-02-02">2 février 2017</time></p>
<img src="oiseau.jpg" alt="" rel="licence" href="http://creativecommons.org/licenses/by-sa/3.0/" />

Formulaires

<form autocomplete="off" novalidate target="_blank"> formulaire
<fieldset><legend>Votre identité</legend></fieldset> groupe de champs
<label for="" /> légende de champ
<input type="text" /> texte court (type par défaut)
<input type="password" /> mot de passe, le texte est visuellement remplacé par des astérisques
<input type="tel" pattern="" /> numéro de téléphone
<input type="url" /> url, adapte le clavier sur mobile
<input type="email" /> adresse(s) email
<input type="search" /> champ de recherche, certains navigateurs peuvent ajouter un bouton de reset
<input type="hidden" /> champ masqué
<input type="radio" checked /> bouton radio - un choix max.
<input type="checkbox" checked /> case à cocher - plusieurs choix possibles
<input type="button" /> bouton, à lier à une action
<input type="reset" /> bouton de remise à zéro du formulaire
<input type="submit" /> bouton de soumission
<input type="image" height="" width="" src="" alt="" /> bouton de soumission sous forme d'image, récupère au passage les coordonnées de l'endroit où l'on a cliqué sur l'image
<input type="file" multiple accept="image/*,video/*" /> fichier(s). En cliquant sur "Parcourir" seuls les fichiers du mime type précisé dans accept s'afficheront. L'élement <form> parent doit porter l'attribut enctype="multipart/form-data" pour que l'upload fonctionne.
<input type="date" min="" max="" step="" /> date
<input type="datetime-local" min="" max="" step="" /> date et heure
<input type="month" min="" max="" step="" /> numéro de mois
<input type="week" min="" max="" step="" /> numéro de semaine
<input type="number" min="" max="" step="" /> nombre
<input type="range" min="" max="" step="" /> curseur de quantité
<input type="color" /> couleur
<datalist id="liste"> liste de propositions rattachées à un champ texte
<textarea row="" cols="" wrap="soft"> texte long
<select multiple size="2"><optgroup><option value="" label="" selected>Mon option</option></optgroup></select> menu déroulant
<button type="submit"> même usage que les input bouton
<output for=""> résultat d'un calcul ou d'une opération (ex: formulaire de calcul de l'IMC)
<progress max="" value=""> barre de progression
<meter low="" high="" max="" value="" optimum=""> jauge. Les attributs low, high et optimum indiquent si la valeur actuelle doit être considérée comme optimale, trop basse ou trop élevée.

Phrasé

<abbr title=""> : abréviation ou acronyme. La signification de l'acronyme peut être spécifié dans l'attribut title
l'attribut title doit être utilisé sur un lien quand l'intitulé de celui-ci n'est pas très clair sur le contenu de la cible.
<cite> : titre d'une « œuvre de l'esprit » : titre d'un livre, d'un poème, d'un essai, d'un article de presse, d'une oeuvre d'art, d'une pièce de théâtre, d'une affaire juridique, d'un logiciel, d'un script, d'un film, d'une série télé, d'un jeu, d'un spectacle, d'une page web etc...
<small> : petits caractères (= conditions) : copyright, mentions légales, licence et attribution, avertissement, précision sur ce qui est inclus ou non dans le prix...
<time> : date et/ou heure.
<q> : citation courte (inline).
<blockquote> : bloc de citation. Peut contenir un footer avec la référence de la citation
<ul><li> : entrées d'un menu, d'un fil d'Ariane, d'une liste des réseaux sociaux...
<dl> : liste de définitions
<strong> : texte important. un texte imbriqué dans 2 strong est plus important que celui dans un seul
<em> : texte emphasé
<b> : mise en valeur d'un terme sans lui conférer d'importance. mots clés, nom d´un produit, chapeau d'un article
<i> : terme technique, designation taxonomique, expression d'une autre langue, pensée, nom de vaisseau
<mark> : surlignage (texte sur lequel on souhaite attirer l'attention)
<dfn> : terme défini plus loin dans le document
<sub> : indice
<sup> : exposant ou notes de bas de page
<wbr> : opportunité de coupure de ligne
<ins> : texte inséré après publication (edit)
<del> : texte retiré après publication
<s> : texte obsolète
<figure> > <figcaption> : légende
<details> > <summary> : légende du contenu
<table> > <caption> : légende de tableau
<data> : donnée sous un format non compréhensible pour un ordinateur, par exemple des chiffres écrits en toutes lettres (l'équivalent de <time> pour tout type de données)

Systèmes informatiques

<code> : fragment de code informatique, notamment nom et chemin de fichier
<pre> > <code> : bloc de code informatique
<var> : variable informatique ou mathématique
<kbd> : saisie clavier
<samp> > <kbd> : option retournée par le système
<kbd> > <kbd> : touche clavier
<samp> : message retourné par le système (sortie système)
<pre> > <samp> : idem sous forme de bloc

Langues étrangères

<ruby>, <rp> et <rt> : annotations Ruby (annotations au-dessus des kanjis pour donner leur prononciation).
<bdo> surcharge le sens de lecture
<bdi>
<span lang=en> à spécifier sur le texte dont la langue diffère du reste du document
<span dir=rtl> à spécifier sur le texte dont le sens de lecture diffère du reste du document

Embarqué

Contenu de l'attribut alt <img alt="">
Image d'illustration : description de l'image
Image à texte : le texte
Image à graphique : description du graphique, ses resultats etc
Lien / bouton contenant juste une image : rôle du lien / bouton
Image faisant suite a un texte descriptif : rien
Image décorative : rien
Image découpée en plusieurs : seule la première doit comporter une image alternative

Autres

<div hidden> à spécifier sur un élément auquel il n'est actuellement pas pertinent d'accéder

Accessibilité (ARIA)

aria-label : indique le rôle de l'élément (au cas ou celui-ci manquerait de sémantique)
role : zone du document (landmark role), structure de document, widget…
aria-hidden : masque l'élément
aria-live : indique qu'un élément s'actualise dans la page (live region)
aria-atomic : indique s'il faut décrire la live region en entier ou juste la partie qui a changé
aria-busy : suspend l'annonce de aria-live tant que sa valeur est true
aria-relevant : type de changement dans la région (ajout de contenu, suppression…)
<div tabindex=""> : rend focusable n'importe quel élément

Landmark roles

application Région correspondant à une application web (à l’inverse d’un document statique).
banner Typiquement, l’en-tête comprenant un logo et éventuellement un outil de recherche.
complementary Section complémentaire à la section principale (main), de même niveau, qui peut rester pertinente lorsqu’elle en est détachée.
contentinfo Région contenant des informations relatives au document.
form Région contenant des objets qui dans leur ensemble constituent un formulaire.
main Contenu principal.
navigation Ensemble de liens de navigation.
search Une région contenant des objets qui dans leur ensemble constituent un outil de recherche.

Structure de document

article Un article formant une partie indépendante du document.
columnheader Un en-tête de colonne.
definition Une définition.
directory Une liste de références aux membres d’un groupe (une table des matières).
document Une région correspondant à un document (à l’inverse d’une application).
group Un ensemble d’objets qui ne sont pas destinés à être inclus dans un résumé du document ou dans sa table des matières.
heading Un en-tête de section.
img Un conteneur pour un ensemble d’éléments qui forment une image.
list Une liste d’éléments non interactifs.
listitem Un élément dans une liste ou une table des matières (directory).
math Une expression mathématique.
note Une note annexe au contenu principal.
presentation Un élément de présentation dont les rôles implicites ne seront pas relayés à l’API d’accessibilité.
region Une grande partie du document assez importante pour être incluse dans le résumé ou la table des matières.
row Une ligne de cellules dans une grille.
rowheader Un en-tête de ligne de cellules dans une grille.
separator Un séparateur de contenu ou de groupes d’éléments de menus.
toolbar Une collection de contrôles fréquemment utilisés représentés sous une forme compacte.

Widgets

alert Un message d’alerte.
alertdialog Un dialogue contenant un message d’alerte.
button Un contrôle d’entrée (un bouton) destiné à déclencher des actions lorsqu’il est cliqué ou pressé.
checkbox Une case à cocher possédant trois états : vrai, faux ou mixte.
combobox Une liste de choix (conteneur).
dialog Une fenêtre de dialogue, usuellement modale, demandant un choix ou une information à l’utilisateur.
grid Une grille (un tableau) pouvant contenir des cellules organisées en colonnes et en lignes (conteneur).
gridcell Une cellule appartenant à une grille.
link Une référence à une ressource externe qui provoque la navigation vers cette ressource lorsqu’elle est activée.
listbox Une liste déroulante autorisant l’utilisateur à choisir un ou plusieurs éléments parmi une liste de choix (conteneur).
log Une région contenant des informations ajoutées au fur et à mesure dont les plus anciennes peuvent disparaître.
marquee Une région dynamique contenant des informations non essentielles qui changent fréquemment.
menu Un contrôle offrant une liste de choix à l’utilisateur (conteneur).
menubar Un menu qui est destiné à rester visible et qui est usuellement présenté à l’horizontale (conteneur).
menuitem Une option parmi un groupe contenu dans menu ou menubar.
menuitemcheckbox Un élément de menu pouvant être coché et possédant trois états : vrai, faux, mixte.
menuitemradio Un élément de menu parmi un groupe d’autres congénères, dont un seul peut être coché à la fois.
option Un élément sélectionnable dans une liste.
progressbar Une barre de progression pour les tâches qui peuvent nécessiter un certain temps.
radiogroup Un groupe de boutons radio (conteneur).
radio Un élément de bouton radio parmi un groupe d’autres congénères, dont un seul peut être coché à la fois.
scrollbar Un contrôle graphique permettant de faire défiler le contenu dans la zone visible
slider Un contrôle permettant à l’utilisateur de sélectionner une valeur parmi un intervalle donné.
spinbutton Un contrôle permettant à l’utilisateur de sélectionner une valeur à intervalles réguliers, parmi un intervalle donné.
status Un conteneur recueillant une information d’état dont l’importance ne justifie pas l’emploi d’une alerte.
`tab Un onglet parmi un ensemble.
tablist Une liste d’onglets (tab) qui sont des références respectives à des conteneurs (tabpanel).
tabpanel Un conteneur pour les ressources associées à un onglet.
textbox Un champ d’entrée texte libre.
timer Un conteneur doté d’un compteur numérique indiquant la quantité de temps écoulé depuis une date, ou restant jusqu’à une date fixée.
tooltip Un pop-up contextuel affichant la description d’un autre élément.
tree Une liste contenant une arborescence de groupes pouvant être réduits et redéployés (conteneur).
treegrid Une grille dont les lignes peuvent être réduites et redéployées (conteneur).
treeitem Un élément d’arborescence, pouvant en contenir d’autres

Interface

ariaautocomplete Indique que des suggestions d’autocomplétion sont fournies à l’utilisateur (en ligne dans le champ, en liste, les deux, ou aucune).
aria-checked Statut coché ou décoché (état).
aria-disabled Indique que l’élément est perceptible mais désactivé (état).
aria-dropeffect Indique quelles fonctions sont déclenchées lorsqu’un objet est déposé sur la cible.
aria-expanded Indique que l’élément est déployé ou réduit (état).
aria-grabbed Indique l’état de l’élément saisi, dans une opération de glisser-déposer (état)
aria-haspopup Indique que l’élément possède un menu contextuel.
aria-hidden Indique que l’élément n’est pas perceptible pour l’utilisateur (état).
aria-invalid Indique que la valeur entrée ne correspond pas à ce qui est attendu (état).
aria-label Étiquette associée à l’élément fournissant un nom reconnaissable pour l’utilisateur.
aria-level Définit le niveau d’un élément au sein de sa structure, par exemple dans les arborescences (tree) ou les imbrications.
aria-multiline Spécifie que le champ d’entrée texte accepte (ou non) plusieurs lignes.
ariamultiselectable Spécifie que l’utilisateur peut sélectionner (ou non) plusieurs valeurs parmi un ensemble.
aria-orientation Indique l’orientation d’un élément, tel qu’une barre de défilement.
aria-pressed Statut « pressé » d’un bouton (état).
aria-readonly Indique que l’élément est utilisable, mais qu’il n’est pas éditable.
aria-required Indique que l’élément est requis pour la validation du formulaire.
aria-selected Spécifie que l’élément est sélectionné (état).
aria-sort Indique l’ordre de tri des éléments dans une grille.
aria-valuemax Spécifie la valeur maximale d’un contrôle d’intervalle.
aria-valuemin Spécifie la valeur minimale d’un contrôle d’intervalle.
aria-valuenow Spécifie la valeur actuelle d’un contrôle d’intervalle.
aria-valuetext Spécifie la valeur texte alternative d’aria-valuenow lisible par un humain.

Relations

aria-activedescendant Identifie le descendant actif d’un composant.
aria-controls Identifie les autres éléments dont la présence ou le contenu sont contrôlés par cet élément.
aria-describedby Identifie le ou les éléments qui décrivent l’objet (complémentaire à aria-labelledby).
aria-flowto Identifie le ou les éléments suivants pour l’ordre de lecture, autorisant la technologie d’assistance à prendre le pas sur la hiérarchie naturelle du DOM.
aria-labelledby Identifie le ou les éléments qui confèrent une étiquette à l’objet (similaire à aria-label).
aria-owns Établit des relations de parenté lorsque le DOM ne permet pas de le faire. Note : un élément ne peut avoir qu’un seul « possesseur ».
aria-posinset Définit la position d’un élément dans un ensemble d’autres éléments de type listitem ou treeitem.
aria-setsize Définit le nombre total d’éléments dans l’ensemble courant de type listitem ou treeitem.

Métadonnées

Métas

Les éléments ci-dessous sont présentés uniquement à titre historique, dans les faits ils sont en majorité dispensables car peuvent être déclarés ailleurs dans le document (RDFa) ou au niveau serveur (referer)

<meta name="author" content="Jacques FRESNE" /> Un des auteurs de la page
<meta name="description" content="" /> Description brève du contenu de la page. Est éventuellement utilisé par les moteurs de recherche
<meta name="generator" content="" /> Logiciel ayant généré la page
<meta name="keywords" content="pêche,poisson,poissons,ligne" /> Liste de mots-clés pertinents par-rapport au contenu de la page (n'est plus tellement utilisé par les moteurs de recherche à cause des abus)
<meta name="referer" content="same-origin" />

D'autres méta-extensions ont été implémentées par d'autres acteurs du web, notamment :

<meta name="viewport" content="width=device-width,initial-scale=1"> paramètre la taille et l'échelle du viewport
<meta name="version" content="2.3.2"> numéro de version de la webapp
<meta name="application-name" content="" /> Nom de la webapp (si la page est une application et pas un document)
<meta name="application-url" content="https://gmail.com/"> page de démarrage de la webapp (Chrome)
<meta name="theme-color" content="#fff" /> couleur du thème choisie par l'utilisateur

Une liste complète est disponible sur https://wiki.whatwg.org/wiki/MetaExtensions. Cette liste précise au passage quel programme se sert de chaque data.
Plus bas dans cette section se trouvent d'autres exemples de balises meta.

Microdata

Les microdatas permettent de baliser sémantiquement le texte visible par les internautes. Ils sont essentiellement utilisés par les moteurs de recherche.

Il existe des microdatas pour baliser beaucoup de types d'informations : actions, oeuvres de l'esprit ("page web" inclus), lieux, organisations, événements, personnes… Il est aussi possible de créer son propre format de données, mais la référence reste schema.org et ses schémas de données.

Selon schema.org, plus il y a d'informations balisées, mieux c'est (à l'exception des contenus non accessibles).

Schémas courants (schema.org)

Organisation : http://schema.org/Organization
Entreprise : http://schema.org/Corporation
Personne dans un trombinoscope : http://schema.org/Person
Evénement (agenda) : http://schema.org/Event
Article de blog : http://schema.org/BlogPosting

Format

En HTML5 sont apparus des attributs permettant d'utiliser les microdata directement sur les balises HTML des données concernées :

<div itemscope> encadre les contenus balisés
<div itemprop> nom des champs
<div itemref> rattache des balises hors du scope au format
<div itemtype> url du type de format
<div itemid> id du format

Exemple avec le schéma Organization :

<div itemscope itemtype="http://schema.org/Organization">
	<a itemprop="telephone" href="tel:0954965050">
		<span class="visually-hidden">Téléphone :</span>
		09 54 96 50 50
	</a>
	<a itemprop="email">
		<span class="visually-hidden">Adresse e-mail :</span>
			contact alsacreations point fr
	</a>
	<address title="Adresse postale">
		<span itemprop="name">Alsacréations</span><br>
		<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
			<span itemprop="streetAddress">10 Place du Temple Neuf</span><br>
			<span itemprop="postalCode">67000</span> <span itemprop="addressLocality">Strasbourg</span>, <span itemprop="addressCountry">France</span>
		</span>
	</address>
</div>

Cependant aujourd'hui les principaux moteurs de recherche comprennent le format JSON-LD, et Google préfère même celui-ci aux autres formats :

    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Organization",
      "address": {
        "@type": "PostalAddress",
        "addressLocality": "Strasbourg, France",
        "postalCode": "67000",
        "streetAddress": "10 Place du Temple Neuf"
      },
      "email": "contact(at)alsacreations.fr",
      "telephone": "0954965050",
      "name": "Alsacreations"
    }
    </script>

Ce format permet de ne pas avoir à altérer les balises en y ajoutant des attributs. Cependant il ne faut pas utiliser cette méthode pour ajouter des données dans une page où ces mêmes données ne sont pas visibles aux utilisateurs humains.

RDFa

La recommandation RDFa (pour « Resource Description Framework dans des Attributs ») permet la réutilisation d'attributs HTML déjà existants (class, rel rev et href) ainsi que de nouveaux attributs (about, content, property, datatype et resource) pour baliser du contenu HTML.

Comme pour les microdatas, il faut déclarer le namespace utilisé dans la balise <html> :

<div xmlns:dc="http://purl.org/dc/terms/">

RDFa peut être utilisé avec les schémas de schema.org, bien que le format favori reste JSON-LD et pas RDFa. Le schéma de métadonnées Dublin Core (http://dublincore.org/) est aussi couramment utilisé pour décrire une ressource numérique. Ses propriétés sont préfixées dc:.

Comme on l'a vu plus haut, les balises <meta> utilisent un attribut name pour spécifier le type de données fourni dans l'entièreté du document. Avec RDFa, ces métadonnées peuvent être spécifiées sur n'importe quel élément HTML, notamment des blocs de texte et des images (pour spécifier la licence par exemple).
L'attribut name en-dehors des meta ayant déjà un rôle en HTML (nom de champ de formulaire), il faudra utiliser à la place l'attribut property pour le même rôle.

<h1>Un article fabuleux !</h1>
<div>Par <span property="author" content="Jean Rochefort">Jean Rochefort</span></p>
<p>Le <time datetime="2017-02-02">2 février 2017</time></p>

L'attribut content est facultatif, par défaut la valeur de content est celle du contenu de l'élément cible.

…
<div>Par <span property="author">Jean Rochefort</span></p>
…

En ce qui concerne les relations entre documents (attribut rel vu plus haut), on peut les appliquer aux images, en spécifiant le document lié dans l'attribut href :

<img src="oiseau.jpg" alt="" rel="licence" href="http://creativecommons.org/licenses/by-sa/3.0/" />

Pour lier une ressource à un document externe, l'attribut about peut être utilisé :

<a href="http://www.slideshare.net/fabien_gandon/rdfa-in-a-nutshell-v1">RDFa in a nutshell</a>
<a about="http://www.slideshare.net/fabien_gandon/rdfa-in-a-nutshell-v1" rel="license" href="http://creativecommons.org/licenses/by/2.5/">CC BY</a>.

Dans cet exemple on a deux liens différents : un vers le document cible, un vers la licence utilisée. Pour indiquer que la licence liée s'applique au premier document lié et pas à la page courante, on a utilisé about.

Cet attribut porte sur tout le contenu de la balise porteuse.

<html xmlns:dc="http://purl.org/dc/terms/"> 
 <head>
     <title>RDFa: Tout le monde peut avoir une API</title> 
 </head> 
 <body>
     <h1>RDFa: Tout le monde peut avoir une API</h1>
     <ul>
           <li>Author: <em property="dc:creator">Mark Birbeck</em></li>
           <li>Created: <em property="dc:created" content="2009-05-09">May 9th, 2009</em></li>
           <li>License: <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">CCAttribution-ShareAlike</a></li>
           <li>Version précédente: <a rel="dc:replaces" href="rdfa.0.8.html">version 0.8</a></li>
     </ul>
 </body>
</html>

Microformats

Les microformats ont le même rôle et un principe de fonctionnement très similaire aux microdatas, et ont été très populaires par le passé (surtout XFN).

Ils ont été lancés en réaction à la mise de côté de la spécification RDFa pendant un temps. RDFa ayant été relancé, les microformats sont désormais considérés comme obsolètes par le W3C, bien qu'une nouvelle version soit sortie récemment : microformats2.

XFN

Relations entre le propriétaire du site lié et l'auteur du lien

h-card

Profil d'un individu (carte de visite). V2 de hCard. (Source)

h-entry

Article pour syndication. V2 de hAtom. (Source)

<article class="h-entry">
  <h1 class="p-name">Microformats are amazing</h1>
  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
     on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time></p>
 
  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
 
  <div class="e-content">
    <p>Blah blah blah</p>
  </div>
</article>

h-review

Commentaires et avis utilisateurs. V2 de hReview. (Source)

h-resume

CV.

h-event

Événement.

Rich Social Snippets

Ces tags permettent de gérer l'apparence du lien une fois partagé sur un réseau social : description, format de la vignette etc…

Seuls quatre tags sont nécessaires pour que le résultat soit compatible avec la plupart des réseaux sociaux, le reste est récupéré automatiquement.

<meta property="og:title" content="Mon super titre" />
<meta property="og:description" content="Vous allez découvrir dans cet article comment écrire des accroches d'articles génériques." />
<meta property="og:url" content="https://www.monsite.fr/monsupertitre.html" />
<meta property="og:image" content="https://www.monsite.fr/img/mavignette.png" />

Icônes

Favicon classique

La déclaration suivante :

<link rel="shortcut icon" href="favicon.ico">

est ignorée par la plupart des navigateurs, qui vont immédiatement chercher la favicon à la racine du site avant de suivre le chemin indiqué. Elle est donc totalement dispensable.

Tile Windows 10

Depuis Windows 8 il est possible d'épingler un site internet en tant que tile (vignette) dans le menu démarrer.
Le style de cette vignette peut être configurée grâce à un fichier browserconfig.xml placé à la racine du site.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Icônes iOS

Comme pour Windows, il est possible d'épingler un site sur iOS (iPad, iPhone), et d'y accéder à partir du menu principal. L'icône qui apparaît doit être d'une résolution de 180x180px, la résolution maximale pour écran Retina.

<link rel="apple-touch-icon" href="icon.png">

Sémantique des éléments et attributs HTML - noelno/dovelei GitHub Wiki

Par thématique (cf. Sections)

Liens et relations

Formulaires

Phrasé

Systèmes informatiques

Langues étrangères

Embarqué

Autres

Accessibilité (ARIA)

Landmark roles

Structure de document

Widgets

Interface

Relations

Métadonnées

Métas

Microdata

Schémas courants (schema.org)

Format

RDFa

Microformats

XFN

h-card

h-entry

h-review

h-resume

h-event

Rich Social Snippets

Icônes

Favicon classique

Tile Windows 10

Icônes iOS

Sources

⚠️ GitHub.com Fallback ⚠️

Sémantique des éléments et attributs HTML - noelno/dovelei GitHub Wiki

Par thématique (cf. Sections)

Liens et relations

Formulaires

Phrasé

Systèmes informatiques

Langues étrangères

Embarqué

Autres

Accessibilité (ARIA)

Landmark roles

Structure de document

Widgets

Interface

Relations

Métadonnées

Métas

Microdata

Schémas courants (schema.org)

Format

RDFa

Microformats

XFN

h-card

h-entry

h-review

h-resume

h-event

Rich Social Snippets

Icônes

Favicon classique

Tile Windows 10

Icônes iOS

Sources

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️