Les nouveautés apportées par HTML 5

Le W3C et le WHATWG

Le W3C (World Wide Web Consortium) est l’organisation qui s’occupe de standardiser le web. Elle est constituée d’un ensemble de membres actifs qui réfléchissent à l’évolution des standards tels que l’HTML et le CSS. Ils discutent par exemple des bonnes pratiques à employer pour écrire son code HTML, ou encore de nouvelles balises qu’il serait intéressant d’ajouter au langage. Le W3C travaille donc à l’élaboration du standard qu’est “l’HTML5”.

Seulement voilà, le problème c’est qu’une telle responsabilité présente un inconvénient majeur : la lenteur du processus. La conséquence de cette lenteur est la création d’un groupe de rébellion au sein du W3C, nommé le WHATWG (Web Hypertext Application Technology Working Group). Ce groupe est constitué principalement de développeurs des navigateurs tels que Mozilla, Opera ou Apple. L’approche est ici totalement différente puisque ce groupe est beaucoup plus ouvert et surtout a pour objectif d’accélérer la standardisation (ou du moins la mise en place de standards pour les navigateurs).

De simple exécutant, il peut donc intervenir sur l’ergonomie ou le design du site. Sa fonction technique peut le conduire vers des postes proches du développement, de la conception, du conseil ou de la production.

Il peut également prétendre au poste de webmaster. 

L’HTML5 est donc le fruit des travaux du W3C et du WHATWG.

Les nouveautés dans le code HTML5

Un allégement du code

Tout d’abord, certaines balises ont été simplifiées afin d’alléger le code.
C’est le cas par exemple du Doctype (la première ligne indigeste que vous copiez/colliez en haut de chaque page HTML), de la balise <html>, de la balise <meta> de l’encodage des caractères, et des balises de feuilles de style et de script.

Alors qu’auparavant on pouvait avoir ce genre de code :
    
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd« >
<html xmlns= »http://www.w3.org/1999/xhtml » xml:lang= »fr » >
<head>
  <meta http-equiv= »Content-Type » content= »text/html; charset=utf-8″>
  <link rel= »stylesheet » type= »text/css » href= »/design.css » />
  <script type=”text/javascript” src=script.js »></script>
</head>
<body>
</body>
</html>

En HTML5, ça nous donne :
    
<!DOCTYPE html>
<html lang= »fr »>
<head>
  <meta charset= »utf-8″ />
  <link rel= »stylesheet » href= »/design.css » />
  <script src= »/script.js »></script>
</head>

Nouvelles balises :

• section : Une section est un groupage thématique du contenu.
  <section id= »articles »>…</section>
  <section id= »twitter »>…</section>
• video : Ajouter du contenu vidéo
• Article : Est une section représentant un contenu indépendant du reste du document
  <section id= »articles »>
    <h1>Articles</h1>
    <article><h1>Article 1…
    <article><h1>Article 2…
• audio : Ajouter du contenu audio
• aside : Ajouter du contenu sans rapport avec la page
  <aside>
   <h1>…..</h1>
   <p>…….</p>
  </aside>
• header : Spécifier le début de la page
          <header id= »header »>…</header>
          <section id= »news »><header>…</header></section>
• footer : Spécifier la fin de la page
• hgroup :une section regroupant un ensemble de titres
  <hgroup>
    <h1>Titre</h1>
    <h2>Sous-titre</h2>
  </hgroup>
• nav : Section avec beaucoup de liens internes au site
  <nav>
    <h1>Navigation</h1>
    <ul>
      <li><a href= »/ »>Accueil</a></li>
      <li><a href= »https://www.aurone.com/blog/category/referencement-naturel-et-seo/ »>Actualités</a></li>
      …
    </ul>
  </nav>
• progress : Afficher un niveau d’avancement
• canvas :Permet de dessiner du bitmap en Javascript

les nouveaux éléments de formulaire  : La nouveauté la plus intéressante réside dans la possibilité de pouvoir spécifier une validation du formulaire côté client. Il est par exemple possible d’indiquer si un champ est obligatoire ou pas. Le développeur pourra fixer des contraintes qui s’appliqueront sur les champs (min, max, pattern, autocomplete, etc.), et que le navigateur se chargera de faire respecter.

input : quelques nouveaux types qui permettront au navigateur d’afficher directement les widgets qui vont bien.

• datetime : Champ de type date heure
• date : Champ de type date
• time : Champ de type heure
• month : Champ de type mois
• email : Champ de type E-mail
• url : Champ de type adresse Web
• color : Champ de type couleur
• number :Le type de champ number permet de renseigner une valeur numérique.

L’attribut form: permettra de spécifier à quel formulaire se rattache un champ. Ce qui signifie que les dits champs pourront se trouver n’impore où dans la page, et plus uniquement sous la balise form corrspondante.

L’attribut autofocus : que l’on pourra attribuer à un input pour lui donner le focus dés la page chargée.

Et d’autres… :

<command>, <datalist>, <details>, <dialog>, <embed>, <figcaption>, <figure>, <keygen>, <mark>, <meter>, <output>, <progress>, <rp>, <rt>, <source>, <summary>

Cette liste aussi est loin d’être exhaustive mais vous permet de visualiser les principaux changements. On peut noter entre autre que l’attribut target dans les liens est à nouveau disponible alors qu’elle était déprécié jusqu’à maintenant.

Nous développons votre site avec un code HTML5 moderne

Balises supprimées :

Beaucoup de changement ont été effectués. Même s’il y a beaucoup de nouveautés, il y a des balises qui elles sont désormais dépréciées :

• basefont
• big
• center
• font
• s
• strike
• tt
• u

Elles sont supprimées car c’est aux CSS de faire le boulot.

Les balises frame, frameset et noframes sont supprimés ! Elles étaient déjà dépréciées car elles créaient des problèmes d’accessibilité.

• acronym : Supprimé car elle créait beaucoup de confusion
• applet : obsolète en faveur de object

La balise noscript : est disponible uniquement dans la version HTML.

API HTML 5 :

HTML 5 permet d’utiliser 8 nouvelles API qui permettront de créer de nouvelles applications et qui peuvent être utilisées ensemble avec de nouveaux éléments introduits pour les applications dont :

• une API de dessin 2D utilisé avec la nouvelle balise canvas
• une API pour jouer des vidéos et des sons/musiques utilisé avec les nouvelles balises video et audio
• une API utilisée pour les applications hors-lignes
• une API d’édition en combinaison avec le nouvel attribut contenteditable
• une API de drag and drop en combinaison avec l’attribut draggable
• une API qui permet l’accès à l’historique et permet aux pages d’en ajouter pour prévenir les problèmes de bouton retour-en-arrière

Connexion et distribution P2P :

HTML 5 se voit doté de la capacité de réaliser des connexions entre utilisateurs PeerToPeerConnection(), et également grâce aux websocket. Grâce à la création de nouvelles balises, on voit que l’on va pouvoir améliorer le référencement de son site grâce notamment à aside, nav, header et footer…

Questions fréquentes sur HTML5

Qu’est-ce que HTML5 ?

HTML5 est la version moderne du langage HTML, utilisé pour structurer le contenu des pages web. Il a introduit des balises sémantiques (header, nav, main, article, section, footer), la lecture native de l’audio et de la vidéo, l’élément canvas pour le dessin, de nouveaux types de champs de formulaire et de nombreuses API JavaScript. Depuis 2019, le W3C et le WHATWG ont convenu que la norme HTML de référence est le « HTML Living Standard » du WHATWG.

Quelle différence entre HTML5 et le HTML Living Standard ?

La différence entre HTML5 et le HTML Living Standard est surtout une question de nom et de mode de publication. HTML5 désignait une version figée de la norme, publiée par le W3C en 2014. Le HTML Living Standard, maintenu par le WHATWG, est une spécification évolutive mise à jour en continu, sans numéro de version. C’est aujourd’hui la seule référence officielle, mais le terme « HTML5 » reste couramment utilisé pour parler du HTML moderne.

Pourquoi les balises sémantiques HTML sont-elles importantes pour le SEO ?

Les balises sémantiques HTML sont importantes pour le SEO parce qu’elles indiquent clairement le rôle de chaque partie d’une page : en-tête, navigation, contenu principal, article, encadré ou pied de page. Une hiérarchie de titres cohérente, de h1 à h6, et des balises adaptées aident les moteurs de recherche et les outils d’IA à comprendre et extraire le contenu. Elles améliorent aussi l’accessibilité pour les lecteurs d’écran utilisés par les personnes malvoyantes.

Faut-il encore utiliser Flash pour les vidéos et animations ?

Flash ne doit plus être utilisé : Adobe a arrêté Flash Player le 31 décembre 2020 et tous les navigateurs modernes ont cessé de le prendre en charge. Les vidéos s’intègrent désormais avec la balise video de HTML5, ou via des plateformes comme YouTube ou Vimeo, et les animations se réalisent en CSS, en SVG, avec l’élément canvas ou en JavaScript. Ces technologies fonctionnent sur mobile et sont mieux comprises par les moteurs de recherche.

Quelles API HTML5 sont les plus utiles pour un site web moderne ?

Les API HTML5 les plus utiles pour un site web moderne sont l’API History, qui gère les URL des applications monopages, Web Storage pour stocker des données dans le navigateur, la géolocalisation, les Web Workers pour les traitements en arrière-plan et les Service Workers, qui permettent le fonctionnement hors ligne et les notifications des applications web progressives (PWA). L’attribut loading= »lazy » permet aussi de charger les images en différé pour accélérer l’affichage.

Comment HTML5 contribue-t-il à l’accessibilité d’un site web ?

HTML5 contribue à l’accessibilité d’un site web grâce à ses balises sémantiques (header, nav, main, article, footer) et à ses éléments natifs comme button, label ou dialog, que les lecteurs d’écran interprètent correctement. Bien utilisés, avec des textes alternatifs pour les images et une hiérarchie de titres logique, ils réduisent le besoin d’attributs ARIA. C’est la base pour se rapprocher des critères WCAG, sur lesquels reposent le RGAA en France et les exigences européennes.