REPUBLIQUE DU NIGER

Fraternité-Travail-Progrès
Ministère des Postes des Télécommunications et de l’Economie
Numérique
Ecole Supérieure des Communications Electroniques et de la Poste

Exposé de HTML5 / CCS3

THEME :

Microformats

PRESENTE PAR : Tenu PAR :

Idrissa Seyni Issoufou M. Issaka Salifou Issa
Ibrahim Sidi Mahamane Anouar

Fevrier 2024

1
M2GL
 PLAN
INTRODUCTION

DEFINITION

HISTORIQUE

INSERTION DES MICROFORMATS

LES MICROFORMAT2

LES PRINCIPALES CLASSES DE MICROFORMATS

USAGES DES MICROFORMATS

MICROFORMAT ET HTML5

CONCLUSION

2
M2GL
Introduction :

Les microformats ont fait leur apparition en 2003 (XFN) sous l'impulsion de personnes
publiant des blogrolls (listes de blogs qui ont plu ou ont été jugés pertinents dans un domaine
précis) recherchant un moyen de faire connaître la nature des relations qu'ils entretenaient
avec les auteurs de ces blogs. Depuis, ils ont pris une ampleur remarquable et de nombreux
microformats ont été développés et améliorés pour divers supports : CV, rapports, protocole
Atom, annuaires partagés, citations, traces des discussions en ligne, formats de médias…
HTML5 les remet au goût du jour et ils restent un moyen simple, efficace et puissant
d'apporter à vos pages de la lisibilité tant pour un humain que pour une machine.

I. Définition :

Un microformat (parfois abrégé sous μF ou uF) est une approche de formatage de données
dans des pages WEB, qui cherche à rationaliser et standardiser le contenu existant, comme les
métadonnées, en utilisant des classes et attributs de balises XHTML et HTML. Cette approche
est conçue pour permettre à l'information destinée aux utilisateurs finaux, telle que le carnet
d'adresses, les coordonnées géographiques, les numéros de téléphone, les événements et
autres données ayant une structure constante, d'être traitée automatiquement par les logiciels.

Les microformats sont une manière de marquer l'information dans une page web de manière à
la rendre compréhensible par les machines, ce qui facilite l'indexation et l'affichage des
données par les moteurs de recherche et d'autres services. Les microformats utilisent des
classes HTML spécifiques pour indiquer le type d'information présente dans le contenu d'une
page.

3
M2GL
 II. Concrètement que sont les microformats ?

Les microformats apportent au langage HTML (et par extension XHTML) davantage de
sémantique. HTML possède déjà des éléments ayant du sens mais ils ne suffisaient pas à
exprimer toutes les subtilités que les microformats proposent. En effet, un microformat est
une forme de langage permettant de préciser la nature de certaines données d’une page web de
manière explicite. Concrètement, cela va vous permettre d'ajouter, sans employer de grands
moyens et sans grandes compétences, du sens au code fourni, afin de le rendre
compréhensible par les humains dans un premier temps et par les machines ensuite.

Même si le contenu des pages web était déjà capable techniquement d'être « traité
automatiquement » depuis la conception du web, il existait certaines limites. Les balises
traditionnelles de marquage étaient en effet utilisées pour afficher l'information sur le Web et
non pas pour décrire ce que voulait dire l'information. Les microformats sont destinés à
combler ce fossé en attachant de la sémantique par la standardisation de la codification des
balises HTML et XHTML, ce qui permet d'éviter d'autres méthodes plus compliquées de
traitement automatisé, comme le traitement du langage naturel ou le screen scraping.
L'utilisation, l'adoption et le traitement des microformats permet aux éléments de données
d'être indexés, cherchés, sauvegardés ou référencés de manière que l'information puisse être
réutilisée ou combinée.

Sachez que ces petits fragments de code ajoutés à certains attributs des balises HTML vous
permettent d'optimiser le sens du contenu de vos pages et du coup, d'améliorer leur prise en
compte, par exemple, par les moteurs de recherches, mais pas seulement. Avant de poursuivre
notre propos, signalons que plusieurs CMS (Systèmes de Gestion de Contenu) tirent déjà
partie des fonctionnalités des microformats : Drupal, WordPress, MediaWiki, Plume CMS
(XFN)…

III. Un peu d’histoire :

Les microformats ont émergé d'un mouvement pour rendre les éléments de données
reconnaissables (comme les événements, les détails de contacts ou les endroits
géographiques), aptes à pouvoir être traités automatiquement par le logiciel, tout en étant
4
M2GL
directement lisibles par les utilisateurs finaux. Les microformats basés sur le lien ont été les
premiers à émerger.

Au fur et à mesure de la croissance de la communauté des microformats, CommerceNet, une

organisation à but non lucratif qui promeut le commerce électronique sur internet, a aidé de
différentes manières à sponsoriser et à promouvoir la technologie et le support de la
communauté des microformats. CommerceNet a aussi aidé à cofonder le site de la
communauté des microformats [Link].

En 2007, des annonces ont laissé penser que la version 3 du navigateur Firefox tout comme la
version 8 d'Internet Explorer supporteraient nativement les microformats.

IV. Insertions des Microformats :

Comme énoncé précédemment, le langage HTML nous fournit suffisamment d'éléments afin
d'ajouter, sans autre artifice, nos microformats. Deux attributs, principalement, nous
permettront de faire cela :

 L'attribut rel, signifiant « relation ». Utilisé uniquement dans une balise <a> ou
<link>, il permet, par le truchement des microformats, de préciser le type de relation
entre la page source (celle dans laquelle on trouve le lien) et la page cible (celle vers
laquelle pointe le lien). Exemple connu utilisé pour la définition de la feuille de style
dans l'entête d'un document HTML :

<link href="theme/default/[Link]" rel="stylesheet">

 L'attribut class, utilisé principalement à des fins d'identification d'élément pour la

modification du style de la page via les CSS, mais permettant également d'ancrer des
microformats. Exemple :

<a href="//[Link]/[Link]" class="nickname">Jojaba</a>

Il existe un troisième attribut, l'attribut rev signifiant « relation inverse » exprimant la relation
entre la page cible et la page en cours. Comme il est souvent mal utilisé, nous préférons ne
pas traiter cet attribut dans ce tutoriel, d'autant que certains aspects de cet élément seront
dépréciés à l'avenir.

5
M2GL
Une dernière chose à savoir à propos de ces attributs (rel et class), ils peuvent prendre
plusieurs valeurs, qu'on séparera par des espaces.

Exemple :

<ahref="//[Link]/[Link]"class="fnnnickname">Jojaba</
a>

Les trois valeurs de l'attribut class sont ici : fn, n et nickname.

Par exemple, dans le texte « Les oiseaux se sont perchés à 52.48,-1.89 », c'est une paire de
nombres qui peut être comprise grâce à son contexte comme un système de coordonnées
géographiques. En les entourant de balises span ou div (ou d'autres éléments HTML) avec des
noms de classes spécifiques (dans ce cas geo, latitude et longitude, faisant tous partie de la
spécification du microformats geo) :

Les oiseaux se sont perchés à

<span class="geo">
<span class="latitude">52.48</span>,
<span class="longitude">-1.89</span>
</span>

On peut dire exactement aux machines ce que représente chaque valeur, et elles peuvent
ensuite les indexer, les chercher sur une carte, les exporter sur un terminal GPS, etc.

Les différents types de microformats disponibles

Maintenant que nous connaissons l'endroit où insérer les microformats dans nos pages
HTML, passons aux différentes manières de les utiliser. Trois composantes essentielles : les
microformats simples, les design patterns (modèles de conception) et les microformats
composés. Voici une liste non exhaustive pour chaque type que nous traiterons dans ce
tutoriel :

 Microformats simples : Rel-License, Rel-Noffolow, Rel-Tag, Rel-Bookmark, XFN.

On utilise l'attribut rel pour leur mise en oeuvre.

6
M2GL
  Design Patterns : Abbr Pattern, Datetime Pattern, Value Class Pattern. Ces « Modèles
de conception » permettent de combler le manque de sémantique du langage HTML et
seront utilisés dans les microformats composés.
o Abbr Pattern : Utilisé pour marquer un texte abrégé, avec l'attribut title
fournissant la version complète ou la signification de l'abréviation.

Ex : <abbr title="Full Text">Abbreviated Text</abbr>

o Datetime Pattern : Utilisé pour représenter des informations temporelles,
avec l'attribut datetime en format ISO 8601 et le contenu lisible pour les
utilisateurs.
Ex :
<time datetime="YYYY-MM-DDTHH:MM:SS">Readable
Date/Time</time>
o Value Class Pattern : Utilisé pour indiquer qu'un élément a une valeur
particulière, souvent utilisé pour des valeurs significatives dans un contexte
donné.

Ex : <p class="value">This is a value</p>

 Microformats composés : hCard, hCalendar, hAtom, hReview, hResume. On utilisera

davantage l'attribut class pour ce type-là. Comme leur nom l'indique, ils sont
composés de plusieurs microformats imbriqués et parfois dépendant les uns des autres.

V. Le MicroFormat2 :

On distingue deux (2) versions de microformat jusqu’à aujourd’hui :

 Les microformat classiques,

 Les microformat2.

Microformats2 est la nouvelle étape pour la communauté pour améliorer comment les
microformats sont traités et définis. La version 2 a plusieurs implémentations open source qui
sont utilisées en production et plus facile d’a publiées.

 Etapes Incrémentales :

7
M2GL
Voici la première différence entre microformats 2 et le Classique

Sous forme de texte :

Barnaby Walters

Avec HTML :

<a href="[Link] Walters</a>

Avec Microformat Classique :

<span class="vcard"><a class="fn n url" href="[Link]

Walters</a></span>

Avec Microformat 2 :

<a class="h-card" href="[Link] Walters</a>

 Propriétés relatives

Quand vous faites class=h-card a un élément, cela implique que cet élément est une personne
(nom, prénom, photo de profil, lien, etc…). Sans que ne de donniez explicitement quelle
partie représente le nom, le prénom, la photo de profil, etc…, l’analyseur syntaxique permet
de le savoir automatiquement.

 Les classes préfixées

Les microformats classiques utilisent des noms de classes qui ressemblent aux autres (Ex:
vcard, n ou note). Il y a juste un problème avec cette nomenclature, car il peut y avoir un
conflit entre les noms des classes. En ce sens un développeur qui n’a pas connaissance des
microformat pourrait créer une classe qui porte le même nom qu’une classe de microformat
standard, ce qui posera un ‘’ problème ‘’ vu que l’affichage, le traitement, l’interprétation et la
compréhension ne sera pas la même du point de vue de la machine.

8
M2GL
C’est pour pallier ce problème que les classes préfixées ont vu le jour. Les noms de classes de
microformats2 sont en dehors de crochets de style pour que l’analyseur sémantique puisse
découvrir quel nom de classe rechercher afin de faciliter la maintenance. Il y’a 5 préfixes :

 h-x : nom de classe principal (racine ou root) spécifie qu’un élément est un
microformat.

Ex : <span class="h-card">

 p-x : spécifie qu’un élément est de type texte.

Ex : <span class="p-name">My Name</span>

 u-x : traite l’élément telle une URL.

Ex : <a class="u-url" href="/"></a>

 dt-x : traite l’élément telle une date/time.

Ex: <time class="dt-published" datetime="2013-05-02 12:00:00" />

 e-x : inclut l’intégralité de l’élément dans le HTML.

Ex : <div class="e-content">

VI. Les principales classes de microformats :

Plusieurs microformats ont été développés pour permettre le marquage sémantique de

différentes formes d'informations :

 h-x :

o hMedia : info medi concernant les images, video et audio ;

o hRecipe : recettes de cuisine et cuisson ;
o hReview-aggregate : agrégation de critiques et notes ;
o hAtom : pour marquer des fils web Atom (standard) provenant du HTML
standard ;
o hCalendar : pour les événements ;

9
M2GL
 o hCard : pour l'information de contact ; comprend :
o adr - pour les adresses postales,
o geo - pour les coordonnées géographiques (latitude, longitude) ;
o hListing : pour les petites annonces ;
o hNews : pour les actualités ;
o hProduct : pour les produits ;
o hReview : pour les critiques ;
o hResume : pour les curriculums vitae ;

 rel-x :

o Rel-License : Utilisé pour spécifier la licence du contenu lié.

Ex: <a href="URL" rel="license">License Text</a>

o Rel-Nofollow : Indique aux moteurs de recherche de ne pas suivre le lien et de ne

pas transférer de réputation au lien cible. Une tentative pour décourager du spam
provenant de tiers (par ex. le spam sur les blogs).

Ex : <a href="URL" rel="nofollow">Link Text</a>

o Rel-Tag : Utilisé pour représenter un lien comme étant un mot-clé ou une

étiquette.

Ex : <a href="URL" rel="tag">Tag Text</a>

o Rel-Bookmark : Indique qu'il s'agit d'un lien vers une ressource que l'utilisateur
souhaite marquer ou enregistrer pour un accès rapide.

Ex : <a href="URL" rel="bookmark">Bookmark Text</a>

o rel-directory : pour la création et l'inclusion de répertoire distribué ;

o XFN (XHTML Friends Network) : Permet de spécifier la relation entre la page

actuelle et la page liée, telle que "ami", "connaissance", etc.

Ex : <a href="URL" rel="friend">Friend Text</a>

10
M2GL
  xFolk - pour les liens tagués ;
 XHTML Friends Network (XFN) - pour les relations sociales ;
 XOXO - pour les listes et les plans.
 Design Pattern :

Pour passer a des microformats plus complexes il a fallu inventer des modèles permettant
de combler les lacunes sémantiques du HTML. Les modèles de conception ont été conçus
pour cela, ils sont en outre là pour rendre ce qui est lisible par un humain également
compréhensible par une machine.

o Abbr Design Pattern

Le principe est simple : encadrer un texte lisible par un humain par des balises <abbr> et
indiquer dans l'attribut title la valeur qui devra être prise en compte et interprétée par la
machine. On peut, et c'est souvent le cas dans les microformats composés, les associer à un
attribut class. Nous verrons plus tard ce à quoi correspond la valeur country-name de
l'attribut class pour l'exemple suivant :

<abbr title="Etats-Unis d'Amériques" class="country-name">USA</abbr>

La valeur pour country-name sera Etats-Unis d'Amérique et non USA. Nous verrons dans
le prochain design pattern, que la balise <abbr> sera également utilisée pour définir
correctement horaires et dates.

o Datetime Design Pattern

Il s'agit ici de présenter de manière sémantiquement correcte une date. Nous verrons plus
loin que ce modèle est utilisé par bon nombres de microformats composés (hCard,
hResume, hAtom…). Pour mettre ce modèle en œuvre il faut encadrer la date lisible par un
humain par des balises <abbr>, ajouter l'attribut class associé à la balise et indiquer la date
et l'heure au format ISO 8601 dans l'attribut title lisible, elle, par une machine. Cela pourra
donc donner la chose suivante :

<abbr title="2011-04-08" class="dtstart">Jeudi 8 avril 2011<abbr>

11
M2GL
 Dans cet exemple la date ISO 8601 est 2011-04-08, la propriété dtstart correspond au début
d'un évènement. On aurait pu ajouter l'heure de la manière suivante :

<abbr title="2011-04-08T15:30" class="dtstart">Jeudi 8 avril 2011 à 15 heures 30<abbr>

Bien entendu, d'autres valeurs peuvent être ajoutées, telles que les secondes, le fuseau
horaire, etc.

 class="vcard" - élément racine [obligatoire]

o class="adr" - composé des sous-propriétés suivantes :

 class="type" - valeurs possibles : work, home, pref, postal, dom, intl
 class="post-office-box" - boîte postale
 class="street-address" - rue
 class="extended-address" - information complémentaire pour l'adresse
 class="region" - département
 class="locality" - commune
 class="postal-code" - code postal
 class="country-name" - pays
o class="agent" - administrateur, assistant, secrétaire sous forme de hCard
imbriquée
o class="bday" - date de naissance au format ISO (voir Datetime Design Patterns)
o class="category" rel="tag"
o class="email"
 class="type" - valeurs possibles : Internet, x400, pref (favorie)
 class="value"
o class="fn" - nom formaté (en principe : Prénom Nom) [obligatoire]
o class="geo" - géolocalisation
 class="latitude"
 class="longitude"
o class="key" - pour spécifier une clé publique ou un certificat d'authentification
o class="label" - pour spécifier le texte formaté correspondant à l'adresse de
destination
o class="logo"
o class="mailer"
12
M2GL
 o class="n" - si fn se compose de deux mots, la définition de n est facultative.
 class="honorific-prefix" - préfixe honorifique
 class="given-name" - nom usuel
 class="additional-name" - nom supplémentaire
 class="family-name" - nom de famille
 class="honorific-suffix" - suffixe honorifique
o class="nickname" - pseudonyle
o class="note" - information supplémentaire
o class="org"
 class="organization-name"
 class="organization-unit"
o class="photo" - Lien vers la photo
o class="role" - Information concernant le rôle de la personne
o class="sound" - Un son lié à la vcard
o class="title" - L'intitulé du métier
o class="tel" - Téléphone
 class="type" - valeurs possibles : voice (vocal), home (résidence), msg (à
messagerie), work (professionnel), pref (numéro
favori), fax, cell (portable), video (visioconférence), pager (bipeur), bbs (bu
lletin board system, forum), modem, car (voiture), isdn, pcs (service de
communication personnel)
 class="value" - numéro de téléphone
o class="tz" - Fuseau horaire
o class="uid" - identifiant unique
o class="url" - une adresse Web

VII. Usages des microformats :

Utiliser les microformats dans le code HTML fournit des données de mise en forme et
sémantiques supplémentaires qui peuvent être utilisées par les applications. Celles-ci peuvent
être des applications qui rassemblent des ressources de données à propos de ressources en
ligne, comme les crawlers web, ou des applications de bureau comme les clients-email ou les
logiciels de gestion d'agenda.

13
M2GL
 Plusieurs extensions de navigateurs, comme « Tails Export » ou « Operator » pour Firefox,
permettent à l'utilisateur de détecter les microformats dans un document HTML et de les
exporter dans un format compatible avec des gestionnaires de contacts et des utilitaires de
calendriers, tels que Microsoft Outlook.

VIII. Microformat et Html5 :

Mais que nous réservent les microformats à l'avenir ? Intéressons-nous à présent à leur
implémentation dans le code HTML5…

HTML5 apporte son lot de nouveautés. Les nouveaux éléments donnent davantage de sens à
la structuration de la page et les microformats n'auront qu'à en tirer parti. Plusieurs éléments
vont permettre de se passer de certains Design Pattern ou certaines propriétés.

Par exemple, l'élément <time> pourra remplacer le Design Pattern Datetime,

l'élément <article> pourrait être une alternative à la propriété racine hentry de hAtom…

Concernant les attributs rel et rev (nous n'avons pas parlé de cet attribut-là dans ce tutoriel et
pour cause), le premier est bien pris en charge par HTML5, en revanche, rev a été purement et
simplement retiré de la spécification et donc n'est plus pris en compte.

Autre petit désagrément livré avec HTML5, l'attribut profile a également été supprimé. On a
déjà trouvé la parade en proposant un nouveau microformat : rel-profile. Celui-ci permet de
définir le profil XMDP en le plaçant dans une balise <a> ou une balise <link> à l'endroit où il
est nécessaire de définir les microformats.

Enfin, un nouveau terme apparaît dans HTML5 : Microdata. Ce sont des attributs
supplémentaires permettant de préciser certains aspects sémantiques des éléments. Ils sont
donc tout à fait dans la même ligne que les microformats puisqu'ils ajoutent
des microdonnées. En voici quelques-uns :

 L'attribut itemscope identifie et annonce des blocs qui seront balisés.

 L'attribut itemprop est une version spécifique aux noms de champs remplaçant
l'attribut class.
 L'attribut itemref permet d'inclure des propriétés à un endroit quelconque de la page
non descendant d'itemscope. Il prend plusieurs id séparées par un espace

14
M2GL
 (exemple : itemref="address phone" inclura les éléments ayant comme
id address et phone).
 L'attribut itemtype permet de spécifier le type d'élément

(exemple : itemtype="[Link]

Pour ce faire une idée de ce que ces microdata pourraient apporter à l'avenir dans le
microformatage, voici un petit exemple d'hCard :

<!DOCTYPE html>

<html lang="fr">

<head>

<title>Tony Starck</title>

</head>

<body>

<section itemtype="[Link] itemscope>

<h1 itemprop="fn">Tony Stark</h1>

<div itemprop="adr" itemscope>

<p itemprop="street-address">56, rue du fer</p>

<p itemprop="locality">Ironheim</p>

<p itemprop="postal-code">67 999</p>

</div>

<a href="[Link] itemprop="url">Ma

biographie</a>

</section>

</body>

</html>

15
M2GL
Conclusion :

En conclusion, les microformats offrent une approche efficace pour rationaliser et

standardiser le formatage des données sur le web, permettant une meilleure compréhension
par les machines et facilitant l'indexation et l'affichage des informations par les moteurs de
recherche. L'utilisation judicieuse des attributs HTML tels que <code>rel</code> et
<code>class</code> ainsi que l'évolution vers Microformats2 représentent des avancées
significatives dans la création de pages web sémantiquement riches.

16
M2GL