HTML 5.1 dévoilé : 14 nouvelles fonctionnalités expliquées et usages pratiques

HTML5 est détenu par le World Wide Web Consortium (W3C), qui fournit des standards à travers le web afin que les protocoles du monde entier soient inter-accessibles. En novembre 2016, le W3C a mis à jour le HTML 5 de longue date, qui est la première mise à jour mineure en 2 ans. De nombreuses fonctionnalités initiales de HTML 5.1 ont été abandonnées en raison d'un design défectueux et d'un manque de support des fournisseurs de navigateurs.

Bien qu'il y ait quelques éléments et améliorations apportés à HTML 5.1, c'est toujours une mise à jour mineure. Certains des nouveaux éléments contiennent des balises combo, qui incluent maintenant <dialog>, <details>, <summary> et <picture>, offrant aux développeurs encore plus de place pour l'expression.

Le W3C a déjà commencé à travailler sur un brouillon de HTML 5.2 qui devrait être publié vers la fin 2017. En attendant, nous présentons quelques nouvelles fonctionnalités et améliorations intéressantes introduites dans la version 5.1. Vous pouvez utiliser ces fonctionnalités sans toucher à JavaScript. Tous les navigateurs ne supportent pas ces fonctionnalités, il est donc préférable de vérifier le support du navigateur avant de les utiliser en production.

14. Prévenir les attaques de phishing

La plupart des gens utilisant target='_blank' n'ont aucune idée d'un fait curieux – l'onglet nouvellement ouvert peut modifier window.opener.location vers une page de phishing. Il exécutera du code JavaScript malveillant sur la page d'ouverture en votre nom. Comme les utilisateurs font confiance à la page déjà ouverte, ils ne se méfieront pas.

Afin d'éliminer complètement ce problème, HTML 5.1 a standardisé l'utilisation de l'attribut rel="noopener" qui sépare les contextes de navigateur. Le rel="noopener" peut être utilisé dans les balises <a> et <area>.

<a href="#" target="_blank" rel="noopener"> Le lien ne causera plus de problèmes </a>

À lire : 24 outils d'animation CSS3 et HTML5 pour designers

13. Gérer la légende de figure de manière flexible

La balise <figcaption> représente une légende associée à l'élément <figure>, qui agit comme conteneur pour des visuels comme images, diagrammes, illustrations, etc. Dans les premières versions HTML, <figcaption> ne pouvait être utilisé que comme premier ou dernier enfant de l'élément <figure>.
HTML 5.1 a assoupli cette restriction, et maintenant vous pouvez utiliser <figcaption> n'importe où dans son conteneur <figure>.

<article> <h1>Le titre de l'actualité du jour </h1> <figure> <img src="petrolimage.jpeg" alt="Le prix de l'essence baisse"> <figcaption>Un homme fait le plein de sa voiture à la station-service</figcaption> </figure> <p>C'est la quatrième hausse du prix de l'essence en deux mois et la troisième pour le diesel en une quinzaine.</p> </article>

12. Vérification orthographique

L'attribut spellcheck est un attribut énuméré dont les mots-clés sont la chaîne vide, true et false. L'état true indique que l'élément doit avoir son orthographe et sa grammaire vérifiées.
La méthode element.forceSpellCheck() force l'agent utilisateur à signaler les erreurs d'orthographe et de grammaire sur l'élément de texte, même si l'utilisateur n'a jamais mis le focus sur l'élément.

<p spellcheck="true"> <label>Nom : <input spellcheck=" false" id="textbox"></label> </p>

11. L'option vide

La nouvelle version de HTML vous permet de créer un élément <option> vide. Il peut être un élément enfant de <optgroup>, <datalist> ou <select>. Vous trouverez cette fonctionnalité utile lors de la conception de formulaires conviviaux.

10. Autoriser le plein écran pour les iframes

L'attribut booléen allowfullscreen, développé pour les iframes, vous permet de contrôler si le contenu peut se présenter en plein écran en utilisant la méthode requestFullscreen(). Par exemple, prenons une iframe qui intègre un lecteur de YouTube. L'attribut allowfullscreen est requis pour permettre au lecteur d'afficher sa vidéo en plein écran.

<article> <header> <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p> <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Post privé</a></p> </header> <main> <p>Découvrez ma nouvelle vidéo !</p> <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe> </main> </article>

9. En-tête et pied de page imbriqués

HTML 5.1 vous permet d'imbriquer header et footer dans un autre header. Vous pouvez ajouter un header ou footer à l'élément header s'ils sont eux-mêmes contenus dans un contenu de sectionnement.
La fonctionnalité peut être assez utile si vous voulez ajouter des en-têtes élaborés aux éléments de sectionnement sémantiques, comme <section> et <article>.

Dans le code ci-dessous, le <article> contient un <header> qui a un <aside> qui contient lui-même un <header>.

<article> <header> <h2>Leçon : Comment cuisiner le poulet</h2> <aside> <header> <h2>À propos de l'auteur : Tom Hank</h2> <p><a href="./tomhank/">Contactez-le !</a></p> </header> <p>Expert en rien d'autre que la cuisine. Le spectacle du livre de cuisine.</p> </aside> </header> <p><ins>Versez la marinade dans le sac zip-top avec le poulet et scellez-le. Retirez autant d'air que possible du sac et scellez-le. </ins></p> </article>

8. Images de largeur nulle

La nouvelle version HTML vous permet d'ajouter une image de taille nulle. Cette fonctionnalité est utilisée quand l'image n'est pas destinée à l'utilisateur. Si un élément img est utilisé pour d'autres fins que l'affichage d'une image, par exemple, dans le cadre d'un service pour compter le nombre de vues de page, utilisez les attributs width et height avec la valeur 0. Pour les images de largeur nulle, il est recommandé d'utiliser des attributs vides.

<img src="theimagefile.jpg" width="0" height="0" alt="">

7. Validation de formulaire

La nouvelle méthode reportValidity() vous permet de valider un formulaire et de récupérer les résultats, et de signaler les erreurs aux utilisateurs directement dans le navigateur. Les agents utilisateurs peuvent signaler plus d'une violation de contrainte, si l'élément souffre de plusieurs problèmes en même temps. Comme dans ce cas, l'entrée « password » devrait être marquée avec une erreur car elle est obligatoire mais vide.

<h2>Validation de formulaire</h2> <p>Entrez les détails</p> <form> <label> Entrée obligatoire <input type="password" name="password" required /> </label> <button type="submit">Soumettre</button> </form> <script> document.querySelector('form').reportValidity() </script>

6. Le menu contextuel du navigateur

Dans HTML 5.1, vous pouvez utiliser la balise <menu> pour définir un menu composé d'un ou plusieurs éléments <menuitem>, puis le lier à n'importe quel élément en utilisant l'attribut contextmenu. L'id de l'élément <menu> doit avoir la même valeur que l'attribut contextmenu de l'élément auquel nous voulons ajouter le menu contextuel.

Chaque <menuitem> peut avoir l'une des trois formes :

• radio – Sélectionner une option d'un groupe
• checkbox – Sélectionner ou désélectionner une option
• command – Exécuter une action au clic

<h2 contextmenu="popup-menu"> Clic droit pour obtenir la démo du menu contextuel. </h2> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked="true">Case à cocher 1 </menuitem> <menuitem type="command" label="Commande" onclick="alert('ATTENTION')">Case à cocher 2</menuitem> <menuitem type="radio" name="group1">Bouton radio a</menuitem> <menuitem type="radio" name="group1" checked="true">Bouton radio b</menuitem> <menuitem type="checkbox" disabled>Élément de menu désactivé</menuitem> </menu>

5. Utiliser des nonces cryptographiques avec les scripts et styles

Un nonce cryptographique est un nombre généré aléatoirement qui ne peut être utilisé qu'une seule fois, et doit être régénéré pour chaque requête de page. Cet attribut nonce peut être utilisé dans les éléments <script> et <style>.

Il est généralement utilisé par la Content Security Policy d'un site web pour décider si un certain style ou script doit être implémenté sur la page. Dans le code donné, la valeur est codée en dur, mais dans un scénario réel, sa valeur est générée aléatoirement.

<script nonce='d3ne7uWP43Bhr0e'> Le code JavaScript </script>

4. Relation de lien inverse

L'attribut rev a été défini dans HTML 4, cependant il n'a pas été inclus dans HTML5. Le W3C a décidé d'inclure à nouveau l'attribut rev pour les éléments <a> et <link>. L'attribut rev spécifie la relation du document courant et du document lié dans le sens inverse. Il a été inclus pour prendre en charge le format de balisage de données structurées largement utilisé, RDFa.

Prenons un exemple de deux documents, chacun contenant une leçon, le lien entre eux peut être défini avec les attributs rel et rev comme montré…

//Document avec URL "chapter1.html" <link href="Lesson2.html" rel="next" rev="prev"> //Document avec URL "chapter2.html" <link href="Lesson1.html" rel="prev" rev="next"> <link href="Lesson3.html" rel="next" rev="prev">

3. Afficher/Masquer des informations

Les nouveaux éléments <details> et <summary> vous permettent d'ajouter des informations étendues à un contenu. Vous pouvez afficher ou masquer un bloc d'informations supplémentaires en cliquant sur l'élément. Les informations supplémentaires sont masquées par défaut.

Dans votre code, vous devez mettre la balise <summary> à l'intérieur de la balise <details> comme montré. Après la balise <summary>, vous pouvez ajouter le reste du contenu que vous voulez masquer.

<section> <h3>Message d'erreur</h3> <details> <summary>Ce fichier n'a pas été téléchargé en raison d'une erreur réseau.</summary> <dl> <dt>Nom du fichier :</dt><dd>Passcode.txt</dd> <dt>Taille du fichier :</dt><dd>8 KB</dd> <dt>Code d'erreur :</dt><dd>342a</dd> </dl> </details> </section>

2. Plus de types d'entrée

Les éléments input HTML ont été étendus avec trois nouveaux types d'entrée – week, month et datetime-local.
Comme leur nom l'indique, les deux premiers permettent aux utilisateurs de sélectionner une semaine ou un mois. Selon le support du navigateur, les deux sont rendus sous forme de calendrier déroulant qui vous permet de sélectionner soit une semaine particulière, soit un mois d'une année.

Le datetime-local spécifie un champ de saisie date et heure, sans fuseau horaire. Les données peuvent être sélectionnées de manière similaire à l'entrée month ou week, et l'heure peut être saisie séparément.

<section> <h2> Semaine, Mois et Datetime-local </h2> <form action="action_page.php"> Choisissez une semaine : <input type="week" name="year_week"> <input type="submit"> </form> <form action="action_page.php"> Anniversaire (mois et année) : <input type="month" name="bdaymonth"> <input type="submit"> </form> <form action="action_page.php"> Arrivée (date et heure) : <input type="datetime-local" name="bdaytime"> <input type="submit" value="Envoyer"> </form> </section>

1. Images responsives

Le W3C a introduit de nouvelles fonctionnalités pour implémenter des images responsives sans utiliser CSS. Ce sont…

L'attribut d'image srcset

L'attribut srcset vous permet de définir plusieurs sources d'images alternatives qui varient en densité de pixels. Il permettra au navigateur de sélectionner une image de qualité appropriée selon l'appareil de l'utilisateur. Par exemple, il serait agréable d'afficher une image de résolution inférieure pour les utilisateurs avec des appareils mobiles sur un réseau plus lent.

Vous pouvez utiliser l'attribut srcset avec son modificateur x qui décrit le ratio de pixels pour chaque image. Comme le montre l'exemple, si le pixel de l'utilisateur est égal à 3, l'image haute résolution sera affichée.

<img src="clicks/low-res.jpg" srcset=" clicks/low-res.jpg 1x, clicks/medium-res.jpg 2x, clicks/high-res.jpg 3x" >

Au lieu de différents ratios de pixels, vous pouvez choisir d'afficher des images de tailles différentes en utilisant le modificateur w. Dans ce cas, l'image haute résolution est définie à 1600px.

<img src="clicks/low-res.jpg" srcset=" clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, clicks/high-res.jpg 1600w" >

L'attribut d'image sizes

La plupart du temps, les auteurs aiment afficher différentes images pour différentes tailles d'écran. Cela peut être fait en utilisant l'attribut sizes. Il vous permet de transformer la largeur de l'écran en espace alloué pour une image, puis de choisir l'image appropriée en utilisant l'attribut srcset. Par exemple…

<img src="clicks/low-res.jpg" sizes="(max-width: 25em) 60vw, 100vw" srcset="clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, clicks/high-res.jpg 1600w" >

Dans ce cas, l'attribut sizes définit la largeur de l'image comme 100 % de la largeur du viewport lorsque la largeur du viewport est supérieure à 25em, ou 60 % de la largeur lorsqu'elle est inférieure ou égale à 25em.

L'élément picture

L'élément picture vous permet de déclarer des images avec plusieurs sources pour différentes tailles d'écran. Cela peut être fait en enveloppant <img> avec l'élément <picture> et en décrivant plusieurs éléments enfants <source>.

À lire : 35+ frameworks HTML et CSS utiles pour les web designers

La balise <picture> seule n'affichera rien. Vous devez déclarer la source d'image par défaut comme valeur de l'attribut src, et les sources d'image alternatives vont dans l'attribut srcset comme montré…

<picture> <source media="(max-width: 25em)" srcset=" clicks/small/low-res.jpg 1x, clicks/small/medium-res.jpg 2x, clicks/small/high-res.jpg 3x "> <source media="(max-width: 60em)" srcset=" clicks/large/low-res.jpg 1x, clicks/large/medium-res.jpg 2x, clicks/large/high-res.jpg 3x "> <img src="clicks/default/medium-res.jpg"> </picture>