Une des caractéristiques principales de HTML5 est qu'il ne cassera
rien au support existant pour les versions précédentes. Tout le code
HTML4 continuera
de fonctionner. Si on veut faire mieux, il suffira d'introduire les
doses de HTML5 là où c'est nécessaire. Rien ne doit être modifié pour
utiliser
ces nouvelles fonctionnalités, HTML5 se base sur sa version
précédente. Par exemple, pour ajouter un peu de Web sémantique à des
pages HTML4 déjà existantes,
il suffit de changer le doctype du document et de se laisser aller à
ajouter les quelques balises et attributs qu'il faut.
Commençons tout d'abord par modifier le doctype. En HTML5, il est
très simple, il est seul et unique, il ne fait que quinze octets dans
les encodages sur huit bits :
<!DOCTYPE html>| Balise | Signification |
|---|---|
| <section> | Une section représente un document générique ou une section d'une application. Par exemple, il pourrait s'agir d'un titre et du texte subordonné, comme toute section du présent article. |
| <nav> | Il s'agit d'une section particulière d'une page, celle qui contient les liens dits de navigation. Il n'est pas nécessaire de mettre tous les liens d'une page dans une telle balise, seuls les plus gros blocs de liens devraient y trouver place. |
| <article> | Une partie qui se suffit à elle-même d'une page, qui pourrait être redistribuée telle quelle, sans ce qui l'entoure, comme un post sur un blog ou un forum. |
| <aside> | Des éléments qui sont reliés au contenu mais sans en faire partie trouvent place dans ces balises. Dans un livre, cela correspond au texte mis dans les colonnes sur les côtés, par exemple. |
| <hgroup> | L'en-tête d'une section, utilisé pour grouper des éléments h1 à h6 quand la page possède plusieurs niveaux de titres. |
| <header> | Des aides à la navigation, tout l'en-tête du site. On attend généralement que cet élément contienne le titre principal h1 de la page, mais ce n'est pas requis. On peut aussi y placer un espace de recherche ou la table des matières de la page. |
| <footer> | Le bas de la page. Par exemple, on pourrait placer dans une telle balise la fin de cette page, avec un lien vers le forum, une page de contact, le copyright, etc. |
| <time> | Une heure sur une horloge à 24 heures, une date précise dans le calendrier grégorien. |
| <mark> | Une portion de texte marquée pour référence ultérieure. |
On va se baser sur l'en-tête simplifié d'un blog pour cette section.
| Avant |
|
 | Ce code est tout à fait valide en HTML5 ! Cependant, le standard définit des balises beaucoup plus précises pour exprimer la signification du contenu. |
Aucun commentaire:
Enregistrer un commentaire