HTML 5, éclaircissements
Il y a pas mal de choses qui se disent sur l'HTML 5 mais on se retrouve souvent au devant d'incertitudes ou de problèmes de compréhension. Cet article n'est pas là pour vous apprendre à utiliser cette nouvelle version d'HTML mais contribuera à expliquer un peu mieux ses concepts.
Pour revenir un peu aux sources de l'HTML 5, c'est le W3C (World Wide Web Consortium), organisme qui n'est là que pour gérer la standardisation de plusieurs langages (HTML, CSS, SVG et bien d'autres encore), qui l'a mis au monde.
Les modifications apportées à HTML au travers de cette nouvelle version reposent surtout sur la sémantique des pages web. Pour expliquer de façon brève « la sémantique », c'est le sens donné à quelque chose. En HTML, ce sont l'ensemble des balises qui permettent de distinguer (en terme de sens) les contenus d'une page.
Dans un premier temps, le Doctype prends une autre forme. C'est à dire qu'on a simplement à indique que le document est du HTML. Il n'est plus nécessaire de spécifier un DTD (Définition de Type de Document) qui décrit le modèle d'un document (XML ou SGML).
<!DOCTYPE html>Cette "sémantisation" poussée dans l'HTML 5 fait disparaître les balises qui ne joue que sur le visuel. Ainsi, les balises telles que <center>, <u>, <s>, etc ont disparues. La raison est simple : c'est le rôle du CSS de gérer le rendu visuel d'un élément.
Un grand nombre de balises ont été créées pour décrire plus précisement le contenu affiché. Pour donner quelques exemples, on peut maintenant distinguer l'entête d'une page web avec la balise <header> de son pied de page (<footer>) . On est aussi capable de définir le menu de navigation avec la balise <nav>. Si on se trouve sur un blog, on pourra utiliser la balise <article> pour englober un article, avec une balise <section> destinée au contenu.
Code tiré de Wikipédia :
<header class="ma-class-en-css">
<!-- menu du haut -->
<nav class="ma-class-en-css">
<ul>
<li><a href="mon url" title="titre du lien">nom de mon lien</a></li>
<li><a href="mon url" title="titre du lien">nom de mon lien</a></li>
<li><a href="mon url" title="titre du lien">nom de mon lien</a></li>
</ul>
</nav>
</header>
<article class="ma-class-en-css">
<h1>titre de mon article</h1>
<p>texte de mon article</p>
<section class="ma-class-en-css">
<h2>sous-titre mon article</h2>
<p>texte de mon sous-titre</p>
<figure class="ma-class-en-css">
<a href="mon url"><img src="url de mon image" alt="nom de mon image"></a>
</figure>
</section>
</article>On notera la création de balises telle que <video> qui permettra de prendre en charge l'affichage d'une vidéo sans passer par une panoplie de lecteurs et de formats (petite pensée pour FLV), mais ça ne sera sans aucun débat.
En plus de ces balises, de nouveaux attributs font leur apparition. Quelques uns d'entres doivent permettent de faciliter l'écriture de scripts Javascript. Par exemple, la gestion du drag&drop avec des évènements générés par le DOM nous rendra la vie beaucoup plus simple.
Finalement il suffira de connaitre le sens des nouvelles balises et d'attendre que nos merveilleux navigateurs en tiennent compte pour utiliser HTML 5.
Sur html5demos.com sont disponibles des exemples.
Cet article a été rédigé par Simon Vieille, développeur français animé par la culture du libre et du hacking.
Il intervient à Tinternet & Cie, une association d’éducation numérique populaire. Depuis septembre 2022, il est lead developer à Trinaps, un opérateur télécom local et indépendant.
Murph v1.23 et Custom Menu v3.11
Je n'ai pas écrit d'articles depuis quelques temps car mes semaines sont très chargées. Pour…
Murph v1.20 is out! 📣
Une nouvelle version de Murph a été publiée le 27 juillet 2023 🥳 Murph est un framework ope…
Capture, un reverse proxy pour analyser les requêtes de vos applications
Capture est un reverse proxy HTTP qui se place entre votre application cliente et une API. C…
