HTML 5.1 dévoilé : 14 nouvelles fonctionnalités expliquées et utilisations pratiques
HTML5 appartient au World Wide Web Consortium (W3C), qui fournit des normes sur le Web afin que les protocoles du monde entier soient inter-accessibles. En novembre 2016, le W3C a mis à jour HTML 5, 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'une conception défectueuse et du manque de prise en charge par les fournisseurs de navigateurs.
Bien qu'il y ait peu d'éléments et d'améliorations apportés à HTML 5.1, il s'agit toujours d'une mise à jour mineure. Certains des nouveaux éléments contiennent des balises combinées, qui incluent désormais
Le W3C a déjà commencé à travailler sur une version préliminaire de HTML 5.2 qui devrait être publiée vers la fin de 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 prennent pas en charge ces fonctionnalités. Il est donc préférable de vérifier la prise en charge des navigateurs avant de les utiliser en production.
14. Prévenir les attaques de phishing
La plupart des utilisateurs de target='_blank' n'ont aucune idée d'un fait curieux :l'onglet nouvellement ouvert peut modifier le window.opener.location en une page de phishing. Il exécutera du code JavaScript malveillant sur la page d'ouverture en votre nom. Étant donné que les utilisateurs font confiance à la page déjà ouverte, ils ne seront pas suspects.
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 du navigateur. Le rel="noopener" peut être utilisé dans les balises et .
<a href="#" target="_blank" rel="noopener"> The link won't make trouble anymore </a>
Lire : 24 outils d'animation CSS3 et HTML5 pour les concepteurs
13. Gérer la légende de la figure avec flexibilité
La balise
HTML5.1 a assoupli cette restriction et vous pouvez désormais utiliser
<article> <h1>The Headline of todays news </h1> <figure> <img src="petrolimage.jpeg" alt="Petrol price drops"> <figcaption>A man fueling up his car at petrol station</figcaption> </figure> <p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p> </article>
12. Vérification orthographique
Le correcteur orthographique est un attribut énuméré dont les mots-clés sont la chaîne vide, vrai et faux. L'état vrai indique que l'orthographe et la grammaire de l'élément doivent être vérifiées.
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 l'accent sur l'élément.
<p spellcheck="true"> <label>Name: <input spellcheck=" false" id="textbox"></label> </p>
11. L'option vide
La nouvelle version de HTML vous permet de créer un élément
10. Autoriser le plein écran pour les cadres
L'attribut booléen Allowfullscreen, développé pour les frames, 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">Private Post</a></p> </header> <main> <p>Check out my new video!</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 l'en-tête et le pied de page dans un autre en-tête. Vous pouvez ajouter un en-tête ou un pied de page à l'élément d'en-tête s'ils sont eux-mêmes contenus dans le contenu de la section.
Cette fonctionnalité peut être très utile si vous souhaitez ajouter des en-têtes élaborés aux éléments de sectionnement sémantique, comme
Dans le code ci-dessous, le
<article> <header> <h2>Lesson: How to cook chicken</h2> <aside> <header> <h2>About the author: Tom Hank</h2> <p><a href="./tomhank/">Contact him!</a></p> </header> <p>Expert in nothing but Cooking. The cookbook sideshow.</p> </aside> </header> <p><ins>Pour the marinade into the zip-top bag with the chicken and seal it. Remove as much air as possible from the bag and seal it. </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 lorsque l'image n'est pas destinée à l'utilisateur. Si un élément img est utilisé à des fins autres que l'affichage d'une image, par exemple dans le cadre d'un service permettant de compter le nombre de pages vues, 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. Formulaire de validation
La nouvelle méthode reportValidity() permet de valider un formulaire et de récupérer les résultats, et signale 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, la saisie « mot de passe » doit être marquée d'une erreur car elle est obligatoire mais vide.
<h2>Form validation</h2>
<p>Enter details</p>
<form>
<label>
Mandatory input <input type="password" name="password" required />
</label>
<button type="submit">Submit</button>
</form>
<script>
document.querySelector('form').reportValidity()
</script> 6. Le menu contextuel du navigateur
Dans HTML 5.1, vous pouvez utiliser la balise