Accueil » Développement » HTML5 » HTML5.1

Sommaire
  1. Le HTML5.1 c'est quoi ?
  2. Les nouveautés HTML5.1
  3. Les principales balises HTML5.1
    1. Elément menu
    2. Elément picture et attribut srcset
    3. Nouveaux types d’input : week, month et datetime-local
    4. L'attribut rel=noopener
    5. Spellcheck (correcteur automatique)
    6. Affichage plein écran pour les frames (bientôt disponible)
    7. Nouvelle adaptation de la balise figcaption (bientôt disponible)
    8. Eléments details et summary
    9. Hiérarchie des titres et sections (bientôt disponible)
    10. Zero Width Images (bientôt disponible)
    11. Option Empty (bientôt disponible)
    12. Formulaire de validation (bientôt disponible)
    13. La navigation grâce à « rel » et « rev » améliorée (bientôt disponible)
    14. Utiliser des nonces cryptographiques avec des scripts et des styles (bientôt disponible)
  4. Aller plus loin

Le HTML5.1 c'est quoi ?

Il s'agit d'une version (mineure) qui a vu le jour fin 2016 mais qui apporte cependant son lot de nouveautés.

Nous allons découvrir ici les principales nouvelles fonctionnalités et leur utilité, en attendant la deuxième version pour fin 2017.

Mais avant d'aller plus loin, pensez à vous renseigner sur HTML5, si vous avez peu de notions sur ce langage. Cela facilitera votre compréhension de l'article ci-dessous.

Les nouveautés HTML5.1

Elément menu

NB : L'élément menu n'est compatible qu'avec Firefox.

A l'instar de l'élément ul, l'élément menu représente une liste non ordonnée d'éléments. Celui-ci peut contenir des options (option), une liste (li), des boutons, d'autres menus, des balises command, des input, des séparateurs hr. Mais son utilité diffère puisque l'élément menu a été conçu pour afficher des éléments intéractifs.

Concrètement, l'élément menu permet de personnaliser le menu contextuel de l'utilisateur par l'intermédiaire de l'attribut global HTML5 contextmenu.

Explication : lorsque vous effectuez un clic droit avec la souris sur une page, un menu apparaît qui indique différentes options comme par exemple la possibilité d'afficher le code source d'une page web.

Ainsi est-il possible de rajouter des éléments interactifs à l'intérieur de ce menu. Ci-dessous un exemple :

Faites un clic droit sur ce rectangle pour ouvrir un menu personnalisé. Aller à l'accueil du blog de Guyom Design

Vous constatez qu'une commande a été ajoutée, celle de revenir à la page principale de ce blog. A noter qu'il vous faudra ajouter un petit bout de code en JavaScript directement dans l'élément menuitem via l'attribut onclick de manière à ouvrir une nouvelle fenêtre comme dans cet autre exemple.


<div contextmenu="menu">Votre texte
<menu type="context" id="menu">
<menuitem type="command" 
icon="http://
www.votre_adresse.com/favicon.svg" 
onclick="window.open('http://
www.votre_adresse.com');">
Votre texte</menuitem>
</menu>
</div>  

Un autre exemple avec un sous-menu. Clic droit ici.

Cet exemple vous montre qu'il est possible d'ajouter des listes dans le menu contextuel.


<div contextmenu="partage_reseaux">
<p>Votre texte.</p>
<menu type="context" id="partage_reseaux">
<menu label="Partagez sur les réseaux sociaux">
<menuitem label="Twitter" 
icon="
https://upload.wikimedia.org/
wikipedia/fr/c/c8/Twitter_Bird.svg" 
onclick="
window.open('//twitter.com/i
ntent/tweet?text=' + window.location.href);">
</menuitem>
<menuitem label="Facebook" 
icon="
https://upload.wikimedia.org/
wikipedia/commons/c/c2/F_icon.svg" 
onclick="
window.open('//facebook.com/
sharer/sharer.php?u=' + window.location.href);">
</menuitem>
</menu>
</menu>
</div>

Faites un clic droit sur le logo ci-dessous :

Une autre utilisation possible de l'élément menu est de créer un bouton de menu ou encore une barre d'outils (toolbar).

Comme la compatibilité est inexistante, l'exemple de menu ci-dessous est réalisé en CSS (cela vous donne tout de même un aperçu de ce qu'il sera possible de faire) :


<menu type="toolbar">
<li>
<menu label="menu">
<li><a href="">Rubrique</a></li>
<li><a href="">Rubrique</a></li>
<li><a href="">Rubrique</a></li>
<li><a href="">Rubrique</a></li>
</menu>
</li>
</menu>

Elément picture et attribut srcset

Le but : améliorer le chargement des images en proposant différentes tailles d'image selon la résolution d'écran de l'utilisateur et sans passer par CSS.

En se référant au tableau de compatibilité, on constate que le support est plutôt bon. Il conviendra tout de même de gérer le cas Internet Explorer.

Dans l'exemple ci-dessous, nous allons renseigner trois images avec différentes résolutions.

Un paysage en bord de mer

<picture>
<source srcset="
votre_image_haute_resolution.jpg" 
media="(min-width: 75rem)">
<source srcset="
votre_image_moyenne_resolution.jpg" 
media="(min-width: 50rem)">
<img src="
votre_image_basse_resolution.jpg" 
srcset="
votre_image_basse_resolution.jpg">
</picture>   

Dans le cas où un navigateur n'est pas compatible, alors on affiche une image par défaut (fallback) via la balise img. Pour ajouter le support de cette balise sur les navigateurs non compatibles vous pouvez utiliser ce polyfill.

Nouveaux types d’input : week, month et datetime-local

Avec l'input date, il est possible de sélectionner une date avec le jour, le mois et l'année.

Le nouvel input week permet de pouvoir choisir une semaine spécifique ainsi qu'une année. La balise se présente tout simplement sous cette forme (qui diffère selon les navigateurs) :


<input type="week">

L'input month permet de sélectionner un mois spécifique sous forme de : mois / année.


<input type="month">

L'input datetime-local permet de sélectionner une date spécifique sous forme de : jour / mois / année / heure / minute.


<input type="datetime-local">

L'attribut rel=noopener

L'objectif : Prévenir l’hameçonnage (ou phishing en anglais)

En effet, lorsqu'un nouvel onglet est ouvert avec l'attribut target, il y a un risque de sécurité. Pour tenter de résoudre ce problème, HTML5.1 a introduit ce nouvel attribut qui peut se placer au sein d'un lien hypertexte ou de la zone d'une image (<area>)


<a href="#" target="_blank" rel="noopener">
 votre lien
</a>

Le mieux étant encore de vous passer de l'attribut target.

Spellcheck (correcteur automatique)

L'attribut spellcheck permet d'activer ou de désactiver la correction orthographique automatique (en sachant que la valeur par défaut varie selon le navigateur et selon l'élément visé).

Vous avez certainement déjà remarqué que lorsqu'un mot est mal orthographié, celui-ci est souligné en rouge. Cela se produit sur les éléments de formulaire ainsi que sur les éléments HTML avec l'attribut contenteditable.

Il existe deux types de valeurs :

- True : indique que l'orthographe doit être vérifiée.

- False : indique que l'orthographe ne doit pas être vérifiée.

Ci-dessous, un exemple dans un textarea (cliquez sur le texte) :


<textarea spellcheck="true">Votre texte</textarea>

Autre exemple avec l'attribut contenteditable :

Cliquez ici pour écrire du texte. Vous pouvez aussi corriger les fotes (clic droit).

<div spellcheck="true" contenteditable>Votre texte.</div>

Eléments details et summary

Ci-dessous dans sa forme brute (cliquez sur sommaire) :

sommaire

Ceci est un texte à l'intérieur de l'élément details.


<details><p>Ceci est un texte à l'intérieur de l'élément details.</p></details>

Un autre exemple avec l'attribut open. Il permet l'ouverture par défaut du contenu.

Exemple avec attribut open

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id diam quis massa eleifend bibendum ac sed lacus. Donec nibh enim, tempor non ex ut, hendrerit aliquet lorem. Mauris venenatis varius sapien, non viverra turpis vestibulum et. Fusce eu vehicula velit.


<details open>
<summary>
<p>Votre texte</p>
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id diam quis massa eleifend bibendum ac sed lacus. Donec nibh enim, tempor non ex ut, hendrerit aliquet lorem. Mauris venenatis varius sapien, non viverra turpis vestibulum et. Fusce eu vehicula velit.</p>  
</details>

On peut imaginer créer une F.A.Q par exemple ou encore un moyen de masquer du texte (pour éviter le spoil sur un forum) :

Afficher / Masquer le texte

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.


<details>
<summary>Afficher / Masquer le texte </summary>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
</details>

Aller plus loin

Article sur les nouveautés HTML5.1 (EN).

Elément menu :