HTML5 : balise TIME et autres balises sémantiques

La balise TIME

Avant la norme HTML5 il n'y avait aucune balise pour contenir une date, une heure ou une durée.

Exemple

Le concert aura lieu le au parc des Princes à Paris.
Ce spectacle débutera à et il durera au moins .

Le code HTML correspondant

<p>Le concert aura lieu le <time datetime="2020-02-07">7 février</time> au parc des Princes à Paris. <br>Ce spectacle débutera à <time datetime="20:00">20 heures</time> et il durera au moins <time datetime="PT2H30M">2 heures et 30 minutes</time>.</p>

Remarquez que le texte contenu dans la balise TIME apparait par défaut en italique.

Notez à chaque fois l'attribut datetime dont la valeur doit respecteur un certain format pour préciser aux robots s'il s'agit d'une date ou d'une heure voire d'une durée de temps :

Autres balises sémantiques

Je rappelle ici certaines balises qui existaient déjà avec la spécification HTML4 mais qui sont toujours valides.

La balise double ADDRESS

Il s'agit d'une balise de type block pour afficher les coordonnées d'un individu / un organisme.

Exemple

Je vous prie de trouver ci-joint mes coordonnées :

Charles Dupont
55 rue des poilus
62100 Calais
dupont_charles@gmail.com

Le texte apparait par défaut en italique comme si il était à l'intérieur du conteneur I mais la balise ADDRESS a en plus une valeur sémantique importante.

Le code HTML correspondant

<address> Charles Dupont <br>55 rue des poilus <br>62100 Calais <br>dupont_charles@gmail.com </address>

La balise double BLOCKQUOTE

"Bloc entre quotes". Balise utilisée pour des citations longues.
Balise de type "block".

Exemple

Extrait de l'appel du 18 juin 1940 par le général de Gaulle :

Moi, général de Gaulle, actuellement à Londres, j'invite les officiers et les soldats français qui se trouvent en territoire britannique ou qui viendraient à s'y trouver, avec leurs armes ou sans leurs armes, j'invite les ingénieurs et les ouvriers spécialisés des industries d'armement qui se trouvent en territoire britannique ou qui viendraient à s'y trouver, à se mettre en rapport avec moi.

Le code HTML correspondant

<blockquote> Moi, général de Gaulle, ... ... </blockquote>

La balise double Q

A utiliser pour des citations courtes. Balise de type "inline".

Exemple

Le grand philosophe Descartes a écrit : Tout ce qui se conçoit bien s'énonce clairement et les mots viennent à la bouche aisément.

Il s'agit d'une balise inline.Le texte balisé est encadré de guillemets.

Le code HTML correspondant

<p>Le grand philosophe Descartes a écrit : <q>Tout ce qui se conçoit bien s'énonce clairement et les mots viennent à la bouche aisément.</q>

La balise CITE

Cette balise double peut être utilisée pour indiquer un titre, un auteur, une URL, etc.
Par défaut le texte balisé est en italique. Balise de type "inline".

Exemple

Au bonheur des dames est une oeuvre de Emile Zola.

Le code HTML correspondant

<p><cite>Au bonheur des dames</cite> est une oeuvre de <cite>Emile Zola</cite>.

La balise ABBR

ABBR (comme abréviation). A utiliser pour donner le sens d'un sigle, d'un acronyme.
La définition apparait lorsque le visiteur survole le sigle sous forme d'une infobulle.

Exemple

Le code HTML correspondant

<ul>Quelques sigles célèbres : <li><abbr title ="Société Nationale des Chemins de Fer">SNCF</abbr> <li><abbr title ="Ecole Nationale d'Administration">ENA</abbr> <li><abbr title ="Président Directeur Général">PDG</abbr> </ul>

L'attribut TITLE est obligatoire.
Retour menu