HTML6 : qu’est-ce que c’est et quand arrive-t-il ?

Quand pouvons-nous attendre HTML6 ? Eh bien, WHATWG – l’organisme de normalisation qui conduit les changements de la spécification HTML – a décidé de mettre en œuvre une approche de normalisation de type « document vivant ». Cela signifie que ce que nous appelons « HTML6 » ne sera probablement pas une énorme mise à jour, mais consistera plus probablement en de plus petits changements à la spécification qui se produisent plus souvent.

Cependant, les spécifications HTML sont révisées et améliorées en permanence. Les fournisseurs de navigateurs sont toujours occupés à mettre en œuvre les dernières fonctionnalités pour les diffuser dans le monde entier, ce qui signifie que nous avons toujours de nouvelles choses à essayer (peut-être en même temps que l’essai de l’un des meilleurs constructeurs de sites Web). Il y a des changements qui se dirigent vers vous et qui méritent d’être notés – lisez la suite pour deux changements de jeu.

Pendant que vous êtes ici, vous pourriez également vouloir explorer notre guide du débutant sur les balises HTML, ou parcourir notre choix des meilleures API HTML. De plus, pour plus d’améliorations à votre processus, assurez-vous que votre service d’hébergement web est parfait pour vous, et que vos médias sont tous sauvegardés en toute sécurité dans une option de stockage en nuage de premier ordre.

Modalités natives

Un changement faisant son chemin dans les navigateurs est l’élément <dialog>. Celui-ci agit comme un équivalent natif des fenêtres modales alimentées par JavaScript, qui sont un modèle de conception commun sur de nombreux sites.

<dialog open> <p>This is a HTML-powered dialog box.</p></dialog>

Il peut être ouvert et fermé en basculant l’attribut open. Par défaut, elle s’affiche en survolant l’endroit où elle a été placée dans la page. L’appel de sa méthode openModal par JavaScript utilisera alors une interface de type modal plus familière.

Par défaut, l’arrière-plan devient grisé et le contenu en dessous n’est plus interactif.

<dialog> <form method="dialog"> <input type="submit" value="Yes" /> <input type="submit" value="No" /> </form></dialog>

Les formulaires à l’intérieur d’un dialogue modal peuvent avoir un attribut de méthode de dialog, qui soumettra la valeur et repassera la valeur à l’objet dialogue lui-même. Cela fait de <dialog> un excellent outil pour confirmer des actions ou d’autres petites interactions.

L’élément est standardisé, et actuellement, seuls les navigateurs Internet Chrome et Samsung ont un support complet. Ceux qui n’en ont pas afficheront toujours le contenu d’une boîte de dialogue, mais elle sera placée à l’intérieur de la page à la place.

Menus plus intelligents

Certaines applications web permettent aux utilisateurs d’effectuer des groupes d’actions dans leur interface. Ceux-ci affecteraient la page actuelle sous une certaine forme, comme l’ajout d’un élément à une liste.

Auparavant, ceux-ci seraient marqués comme un <ul> – une liste non ordonnée d’actions qu’un utilisateur pourrait prendre. Alors que le <ul> est destiné à une liste d’éléments d’affichage, il n’est pas le mieux adapté aux éléments interactifs.

<menu type="toolbar"> <li><button>Cut</button></li> <li><button>Copy</button></li> <li><button>Paste</button></li></menu>

Un menu détient un ensemble d’actions, qui seraient déclenchées par des éléments <bouton> à l’intérieur de ceux-ci. En dehors de cela, l’élément <menu> ne se comporte pas différemment d’une liste d’éléments habituelle. Au fur et à mesure que l’adoption des navigateurs s’améliore, cela peut aider les technologies d’assistance à trouver ces éléments interactifs plus facilement.

Il y a beaucoup de petits changements qui apparaissent constamment dans la spécification et qui font leur chemin dans les navigateurs. Gardez un œil sur les pages de mise à jour de chaque navigateur et jetez un coup d’œil à la norme vivante WHATWG.

Cette information est initialement parue dans le magazine Web Designer. Explorez tous les articles de Web Designer sur CB.

• 8 balises HTML que vous devez utiliser (et 5 à éviter)
• Comment unifier votre UX sur toutes les plateformes
• 16 superbes sites web à défilement parallaxe

.