Le web encore plus sémantique avec HTML 5

HTML5_Logo_512Nous l'avons vu, le web devient de plus en plus sémantique avec les microdonnées (rich snippets). HTML 5, le petit frère d'HTML 4.0.1 permet d'optimiser son code et surtout de le rendre sémantiquement correcte !

Optimisation du code en HTML 5

Par rapport au HTML 4, le HTML 5 permet d'être plus rapide à l'écriture et surtout il permet d'enlever certains caractères et, des caractères en moins sont des kilos octets en moins, donc un temps de chargement plus faible, donc un meilleur référencement et un meilleur taux de visite !

L'exemple du doctype :

Voici le doctype HTML 4 transitional :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Voilà le doctype HTML 5 :

<!DOCTYPE html>

Nettement plus simple non ?

L'exemple des balises:

Les balises auto-fermantes avant HTML 5 :

<img src="URL"/>

Avec HTML 5 :

<img src="URL">

Le slash à disparu.

Optimisation sémantique avec HTML 5

Nous avons vu lors du billet sur les bases du html body que pour structurer les parties de sa page HTML il fallait au moins un id="header"; id="content" et enfin un id="footer". Avec HTML 5 plus besoin d'id puisque ces balises, et pas que,  existent désormais :

L'en-tête: <header></header>

Le pied de page: <footer></footer>

La barre de navigation: <nav></nav>

Section de page (Similaire aux div) : <section></section>

Informations complémentaires sur le coté, 
comme un widget sur WordPress: <aside></aside>

Pour définir un article: <article></article>

Les <div> ne sont pas a bannir, tout ce qui n'est pas cité ci-dessus devra être dans une div. Ne confondez pas section et div.

A partir de maintenant utilisez ces balises pour créer vos site web plus facilement et améliorer votre référencement en aidant les moteurs de recherches à comprendre votre site.

Laisser un commentaire