Trucsweb.com

Trucsweb.com

HTML

HTML5

RDFFav

HTML5 - Liste des balises

Liste des nouvelles balises, attributs et fonctionnalité HTML5 avec tableau des compatibilité.HTML5, XHTML5, WHATWGHTML5 - Liste des balises

HTML5

Logo WHATWG

Le HTML5 (HyperText Markup Language 5) est la dernière révision du HTML. Cette version est finalement devenu une recommandation de la W3C le 28 octobre 2014 dernier après 7 ans de travaux. Avec deux modèles, le HTML5 bien sûrs mais aussi et heureusement le XHTML5, plus strict mais extensible! C’est que l’initiative vient en fait du « Web Hypertext application Technologie working Groupe (WHATWG) », une collaboration non officielle des différents développeurs de navigateurs web dont Mozilla, Opéra et Apple. Principalement pour répondre à la lenteur de la W3C de mettre à niveau son HTML4 et notamment pour répondre aux nombreuses fonctionnalités apportées par Internet Explorer.

Ça fait un bout de temps que je veux faire une référence des éléments HTML5, j’ai bien fait d’attendre que la W3C en fasse une véritable recommandation. Ce qui est donne encore plus de poids pour le viel adage « Vaut mieux tard que jamais »!.

Le HTML5 a effectivement été attendu longtemps, avec plusieurs attentes et on peut dire qu’il a rendu la marchandise à plusieurs égards, notamment le nouveau module Javascript! Je reste cependant sceptique quant à sa prétention d’en faire un langage davantage sémantique souvent au détriment de la rigueur et du bon sens. Par chance la W3C en a profité pour concocter une version XHTML5 avec certes sa grande rigueur mais surtout un module complet pour rendre le HTML5 extensible à la manière XML. Il faut avertir le lecteur que le HTML5 englobe un nombre important de module ou API tous plus spécialisés les uns que les autres que je ne traiterais pas ici en détail.

Bon, on peut déjà dire que le merveilleux CSS3 a comblé et surtout grandement optimisé la gestion du style et du coup sauvé le HTML. Combiné avec les nouvelles fonctionnalités Javascript on peut certainement dire qu’il a fait mal au populaire jQuery, plus aussi indispensable qu’avant le HTML5. Le HTML5 restes un langage structurel mais sans apporter de réelle solution à son problème historique de grille. Bien sûr le CSS3 faits encore le travail mais on aurait aimé avoir une balise <grid> (grille) par exemple tant qu’à créer des balises complètement inutiles comme <figcaption>! C’est pourquoi les « framework » comme Bootstrap risque d’être utile encore longtemps.

Langage structurel

Le HTML5 a toutefois fait un merveilleux travail au niveau structurel et à ce titre la sémantique me semble de bon augure. Un exemple vaut mille mots.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Structure HTML5</title>
  </head>
  <body>
    <header>
      <h1>En-tête (header)</h1>
      <nav role="menubar">...</nav>
    </header>
    <main role="main">

      <article>
        <header>
          <h2>Titre</h2>
        </header>
        <p>...</p>
        <footer>
          ...
        </footer>
      </article>

      <section>
        ...
      </section>
    </main>
    <aside>
      ...
    </aside>
    <footer>
      <p>Pied de page (footer)</p>
    </footer>
  </body>
</html>
XHTML5

Pour utiliser la structure XHTML 5 il faut préciser le type de contenu (Content-Type) dans l’entête HTTP : « Content-Type: application/xhtml+xml » (à distinguer de l’entête HTML <head>). Et bien sûr le document doit être aux normes XML. Strict sans exception et plus difficile à rendre. Avec toutefois l’avantage de permettre les extensions du langage XML, comme ajouter vos propres balises (exemple : <mabalise></mabalise>) ;

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
  <head>
    <title>Exemple</title>
  </head>
   <body>
     <!-- Contenu de la page respectant la syntaxe XML. -->
   </body>
</html>
Les balises

Tout comme les pages HTML ou XHTML, les documents HTML5 nécessitent une déclaration <!DOCTYPE html> au début de tout document HTML sauf pour les documents XML interprétés en mode standard par défaut.

Référence ou hyperlien vers un autre document HTML ou autres fichiers compatibles.
Voir : Lien vers une adresse de courrier électronique

Partie indépendante du site, comme un commentaire.
article

Associé à la balise qui le précède.
aside

Pour définir un son, comme la musique ou les autres flux audio (streaming).

Utilisé pour afficher des éléments graphiques, il faut utiliser un script pour l’animer.

Définit un bouton. Cette balise est uniquement supportée par Internet Explorer 9. Il n’est donc pas recommandé de l’utiliser.
command

Précise les détails supplémentaires qui peuvent être masqués ou affichés sur demande.
details

Définit un contenu incorporé, comme un plug in.
embed

Légende pour la balise <figure>.

Définit des images, des diagrammes, des photos, du code, etc.

Définit le pied de page d’un article ou un document. Contient généralement le nom de l’auteur, la date à laquelle le document a été écrit et / ou ses coordonnées.

Spécifie une introduction, ou un groupe d’éléments de navigation pour le document.

Balise supprimée.
hgroup

Permet de générer une clé (sécurisé).

La balise d’entête link permet de spécifier les relations entre les pages du site ou encore de lier des documents externes. Notamment les fichiers CSS.
link

Définit le contenu principal de la page, il doit être unique dans la page.
main

Associé à une balise <img>, elle permet de définir un « image-map » c’est-à-dire des zones <area> cliquables sur une image.
map

Définit un texte marqué.
mark

En fait ce n’est pas une nouvelle balise, instauré par Firefox 8, cette balise dépréciée, qui permet de définir un menu contextuel a été réintroduite par le HTML5. Absolument incompatible à l’heure actuelle.
menu

Balise d’entête, elle permet de définir les métadonnées (titre, description...).

Permet d’utiliser les mesures avec un minimum et maximum connus, pour afficher une jauge.

Définit une section dans la navigation.

Permet d’afficher un contenu dans le cas où le JavaScript serait désactivé.

Permet d’intégrer au document HTML des objets externe (audio, vidéo, Applets Java, ActiveX, PDF, et animation Flash).

Définie une listes d’item (li) numérotées avec retraits.

Représente le résultat d’un calcul.
output

p

Définit une barre de progression sur le travail en cours d’exécution.
progress

q

Définit les sections dans un document. Tels que les chapitres, en-têtes, pieds de page, ou toutes autres sections du document.
section

Définit une date ou une heure, ou les deux. Cette balise a été abandonnée en octobre 2011 en faveur de la balise data avant d’être réintroduite.

Insérer un sous-titre (au format WebVTT) à une vidéo affichée avec la balise vidéo.

Balise supprimée.

Insérer un contenu vidéo en streaming.
video

Nouveaux attributs

Quelques nouveaux attributs spécifiques à une balise, quelques-unes globales mais une ribambelle d’attributs pour les éléments d’un formulaire par contre. Encore limitée au niveau de la compatibilité mais qui promet beaucoup.

Pour la balise <html> :
  • manifest : URL de déclaration (manifest) des fichiers pour un usage hors ligne.
Pour la balise <iframe> :
  • sandbox : Spécifie des restrictions sur le contenu de l’iframe
  • seamless : Indique que l’iframe doit être parfaitement intégrée dans le document.
  • srcdoc : le code HTML du document affiché dans l’iframe.
Pour la balise <a> :
  • media : permet de spécifier pour quel media ou device il est optimisé.
  • type : définit le MIME de la cible URL.
Pour la balise <area> :
  • hreflang : spécifie le langage de l’url.
  • media : permet de spécifier pour quel media ou appareil il est optimisé.
  • rel : Indique la relation entre le document courant et l’URL cible.
  • type : définit le MIME de la cible URL.
Pour la balise <link> :
  • sizes : Définit la taille, hauteur et largeur.
Pour la balise <menu> :
  • label : Label visible du menu.
  • type : Définit le type de menu à afficher. La valeur par défaut est « list ».
Pour la balise <meta> :
  • charset : Définit la table de caractères pour l’encodage de la page.
Pour la balise <ol> :
  • reversed : si présent, change l’ordre d’affichage.
Pour la balise <script> :
  • async : définit si le script doit être exécuté de manière asynchrone ou pas.
Pour la balise <style> :
  • scoped : Si présent, le style est appliqué uniquement sur le parent et les fils.
Ainsi que les attributs globaux qui s’appliquent à toutes les balises :
  • contenteditable
  • contextmenu
  • data-*
  • draggable
  • hidden
  • on* (gestionnaires d’événements)
  • spellcheck
Nouveaux attributs pour éléments de formulaire
Pour la balise <button> :
  • autofocus : Indique que le bouton doit avoir le focus pendant le chargement de la page.
  • form : spécifie à quel formulaire le bouton appartient.
  • formaction : Spécifie où envoyer le form-data quand un formulaire est soumis. Remplace l’attribut action du formulaire.
  • formenctype : Indique comment le form-data doit être encodé avant d’être envoyé à un serveur. Remplace l’attribut enctype du formulaire.
  • formmethod : définit comment il faut envoyer le form-data.
  • formnovalidate : si présent, indique que le formulaire ne doit pas être validé quand il est envoyé.
  • formtarget : spécifie où ouvrir/exécuter l’action.
Pour la balise <fieldset> :
  • name : définit le nom du fieldset.
  • disabled : désactive le fieldset.
  • form : définit le formulaire du fieldset.
Pour la balise <form> :
  • autocomplete : auto complétion.
  • novalidate : si présent le formulaire n’est pas validé lorsqu’il est soumis.
Pour la balise <input> :
  • autocomplete : auto completion.
  • autofocus : définit le focus lors du chargement de la page.
  • form : spécifie à quel formulaire le champ appartient.
  • formaction : Remplace l’attribut "action" du formulaire. Indique l’URL à laquelle envoyer les données du formulaire.
  • formenctype : Remplace l’attribut "enctype" du formulaire. Indique comment la forme-données doit être encodé avant d’être envoyé au serveur.
  • formmethod : Remplace l’attribut "method" du formulaire. Définit la méthode HTTP d’envoi des données à l’URL.
  • formnovalidate : Remplace l’attribut "novalidate" du formulaire. S’il est présent le champ de saisie ne devrait pas être validé lors de son envoi.
  • formtarget : Remplace l’attribut "target" du formulaire. Indique la fenêtre cible utilisée lorsque le formulaire est soumis.
  • height : Définit la hauteur.
  • list : Désigne un "datalist" contenant des options prédéfinies pour le champ de saisie.
  • max : Indique la valeur maximale du champ d’entrée.
  • min : Indique la valeur minimale du champ d’entrée.
  • multiple : Si présent, l’utilisateur peut entrer plusieurs valeurs.
  • pattern : Définit un motif.
  • placeholder : Un conseil pour aider les utilisateurs à remplir le champ de saisie.
  • required : Indique que la valeur du champ de saisie est nécessaire pour soumettre le formulaire.
  • step : Indique l’intervalle entre les valeurs.
Pour la balise <textarea> :
  • autofocus : focus l’élément textarea.
  • dirname : Indique le nom du textarea.
  • form : définit une ou plusieurs formulaires pour le textarea.
  • maxlength : nombre maximum de caractères.
  • placeholder : définit une astuce pour aider l’utilisateur.
  • required : Indique que la valeur du champ de saisie est nécessaire.
  • wrap : définit comment le texte est affiché dans le textarea.
Nouveaux types d’élément de formulaire

Voilà qui est des plus pratiques, une des premières lois de programmation, la validation. Les navigateurs sont toutefois très lents à les supporter. Je dirais même que les mobiles et l’iPod les supportent davantage. Ce qui en fait un gadget esthétique sans plus, à la limite ergonomique. Prometteur mais d’ici là, la validation côté serveur reste la seule solution viable...

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • tel
  • number
  • range
  • email
  • url
  • search
  • color
Compatibilité du HTML5

Le HTML5 est aujourd’hui raisonnablement supporté par la plupart des plate-formes. Google Chrome domine et s’auto met à jour! La plupart des dernières générations de navigateurs supporte assez bien le HTML5. Pour s’assurer que les versions précédentes soit au maximum supportées, on parle essentiellement de la plupart des versions de Internet Explorer, mais aussi Safari, ou encore de la Ford T des Navigateurs, la solide et vielle version 3 de Firefox, il faut déjà déclarer les nouvelles balises pour les traiter de façon « display: block; » (le navigateur interprète les nouvelle balise inconnue de façon « inline »)

/* Firefox 2+ et IE6+ */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, keygen, main, meter, nav, output, progress, section, source, video { 
  display: block;
}
mark, rp, rt, ruby, summary, time{ 
  display: inline
}

Pour au moins sauver les meubles. Mais pour fonctionner, il faut créer au préalable les éléments dans le DOM avec ce Javascript qui doit être exécuté en tout premier :

<script>
  document.createElement("article");
  document.createElement("aside");
  document.createElement("audio");
  document.createElement("canvas");
  document.createElement("command");
  document.createElement("datalist");
  document.createElement("details");
  document.createElement("embed");
  document.createElement("figcaption");
  document.createElement("figure");
  document.createElement("footer");
  document.createElement("header");
  document.createElement("keygen");
  document.createElement("main");
  document.createElement("mark");
  document.createElement("meter");
  document.createElement("nav");
  document.createElement("output");
  document.createElement("progress");
  document.createElement("rp");
  document.createElement("rt");
  document.createElement("ruby");
  document.createElement("section");
  document.createElement("source");
  document.createElement("summary");
  document.createElement("time");
  document.createElement("video");
</script>

<script>
// Autre exemple par Dmitri Lau */
"abbr article aside audio bdi canvas data datalist details figcaption figure "+
  "footer header hgroup main mark meter nav output progress section " +
  "summary template time video"
  .replace(/w+/g, function(a){ document.createElement(a) });
</script>
Polyfill, Shiv ...pour IE

Internet Explorer a historiquement fait cavalier seul. Ce n’est pas qu’il a erré, mais il a assurément manqué le bateau du HTML5. Déjà IE a perdu le gros de son marché depuis quelques années, un maigre 9,48 % aujourd’hui, 7,97 % en juin dont 4% pour IE11 sur les Trucsweb.com (8571 visiteurs)! On se retrouve un peu comme avec Netscape de l’époque, avec des versions IE6, IE7, IE8, IE9, IE10, IE11 et probablement une dernière version IE 12, ou « Spartan », la cerise sur le gâteau.

Pourquoi pas un commentaire conditionnel! Je ne suis pas fervent des patch mais ça reste efficace et seul Internet Explorer 8 et moins peut lire ce commentaire. Ici l’exemple « The shiv » de Sjoerd Visscher, pionnier dans le domaine (ici sur Google) :

<!--[if IE]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Microsoft a aussi ses scripts de mise à niveau, par exemple des navigateurs MSIE5 version 5 à 8 avec les navigateurs modernes. Voir la liste complète.

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

À la manière Bootstrap, un fichier « Shiv » doublé d’un « respond » pour les requêtes de média (media query) min/max-width. Cette fois sur maxcdn.

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

Il existe des dizaines de librairies et de scripts plus ou moins complexes pour étendre la compatibilité des fonctionnalités les plus diverses. Une bonne référence est la compilation de Paul Irish « HTML5 Cross Browser Polyfills » dont le clasique Modernizr v3

Navigateur de bureau
  Chrome Firefox Internet Explorer Opera Safari
Courrante 43 38 11 29 8.0
Vielle 42 37 10 28 7.0
41 36 9 27 6.0
40 35 8 26 5.1
39 34 24
38 33 23
37 32 22
Tablette
  Android BlackBerry Chrome Firefox Internet Explorer iOS Opera
Courrante 5.0 2.1 39 35 11 8.0 26
Vielle 4.4.3 34 34 10 7.0 12.10
4.4 33 6.0 11.50
4.0 28 5.1
3.2 24 4.2
Mobile
  Android BlackBerry Chrome Firefox iOS Opera Windows Phone
Courrantes 5.0 10.3 39 35 8.0 26 8.1
Vielle 4.4.3 10.2 34 34 7.0 12.10 8
4.4 7 33 6.0 11.50 7.5
4.0 28 5.1
1.6 24 4.2
4.1
3.1
Consoles
Sony Playstation 4 Passable
Sony Playstation TV (NetFront NX) Passable
Xbox One (Internet Explorer 10) Passable
Nintendo Wii U (NetFront NX) Passable
Xbox 360 (Internet Explorer 9) Aucun
Nintendo Wii (Opera) Aucun
Sony Playstation 3 (NetFront) Aucun
Portable
Nvidia SHIELD (Android 4.3) Complet
Nintendo New 3DS (NetFront NX) Passable
Sony Playstation Vita (NetFront NX) Passable
Nintendo 3DS (NetFront) Aucun

Légende
Complet - Passable - Partiel - Aucun

Source : HTML5test how well does your browser support HTML5?.

Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    8/10 sur 1 revues.
           Visites : 26507 - Pages vues : 27488
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @