11 avril 2013

Les nouvelles balises html5

11.4.13 - 0

 

Le brouillon officiel de HTML5 a été publié officiellement le 23 avril 2009 et depuis de nombreuses avancées ont été accomplies, les navigateurs supportant toujours plus de fonctionnalités et de nouveautés. La nouvelle génération du langage de balisage HTML remplacera à long terme HTML 4, XHTML 1.x et XHTML 2 qui a été abandonné. Profitons de cette occasion pour faire un tour d'horizon de ces nouvelles balises HTML5.

Balise Description
<article> La balise <article> défini une section de la page indépendante relative au traitement d'un sujet spécifique comme un nouveau billet dans un blog. Cette balise peut s'accompagner d'une section d'en-tête, d'un pied de page, de différentes sections.
9+
14+
20+
5.1+
12+
<aside> La balise <aside> permet de déclarer une section associée soit à la balise <article> soit au document. Utilisée pour définir des informations complémentaires au sein d'une balise affichant un contenu spécifique
9+
14+
20+
5.1+
12+
<audio> La balise <audio> permet de lire des fichiers sons ou des flux audio directement dans la page en proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause et contrôle du volume. Lorsque le fichier audio n'est pas trouvé ou que son format n'est pas supporté, le lecteur n'est pour certains navigateurs pas visible.
9+
mp3
14+
mp3
ogg
wav
20+
mp3
ogg
wav
5.1+
mp3
wav
12+
ogg
wav
<bdi> Permet d'isoler du texte dont la direction est différente du reste du texte qui l'entoure.
14+
20+
5.1+
12+
<canvas> La balise <canvas> représente une zone de dessin pouvant afficher des graphiques en utilisant l'API qui lui est associée et qui met à disposition de nombreuses méthodes accessibles en javascript pour la création de formes et d'effets.
9+
14+
20+
5.1+
12+
<command> La balise <command> permet de définir une action réalisable par l'utilisateur. Elle se différencie des balises <button> et <input> par son utilisation dans le cadre particulier d'un menu de commandes, qui rend son emploi adapté spécifiquement à une boite à outil ou une liste d'actions utilisateur.
9+
14+
20+
5.1+
12+
<datalist> Détermine une liste de données sélectionnables.
14+
20+
12+
<details> La balise <details> permet de déclarer une section dont le titre est visible mais dont le contenu est masqué par défaut. Elle s'emploie pour par exemple regrouper des références à la fin d'un article que l'utilisateur peut visualiser s'il le souhaite.
20+
<embed> Définir un conteneur pour l'affichage d'applications externes telles que des plug-in ou de contenus interactifs (animations flash, documents pdf html ...).
9+
14+
20+
5.1+
12+
<figcaption> La balise <figcaption> permet d'associer un titre ou une légende à l'élément <figure> (élément décrivant une illustration en relation avec le contenu principal d'une page).
9+
14+
20+
5.1+
12+
<figure> définit un bloc d'informations pouvant contenir des images, des diagrammes, des photos, du code ..…
9+
14+
20+
5.1+
12+
<footer> Définit le pied de page d'une section ou du document.
9+
14+
20+
5.1+
12+
<header> Représente l'en tête d'une section ou du document.
9+
14+
20+
5.1+
12+
<hgroup> Défini une section regroupant un ensemble de titres lorsque plusieurs niveaux de titres (de type <h1> ... <h6>) sont présents.
9+
14+
20+
5.1+
12+
<keygen> Permet de générer au sein d'un formulaire une paire de clés de sécurité pour permettre le cryptage et le décryptage de données échangées. La clé privée est conservée en local tandis que la clé publique est retournée au serveur.
14+
20+
5.1+
12+
<mark> Met en valeur un texte marqué en le surlignant.
9+
14+
20+
5.1+
12+
<menu> La balise <menu> a été initialement mise en place pour l'affichage d'un menu englobant une liste d'éléments sur une colonne, les valeurs inclues dans celui-ci pouvant être des éléments de type liste <li> ou des valeurs classiques.
14+
20+
<meter> La balise <meter> permet d'afficher une mesure au sein d'une plage de valeurs déterminées dans le contexte visuel d'une jauge. Il est possible de définir au niveau de la plage de valeurs une valeur basse ("low") en dessous de laquelle les mesures sont considérées comme faibles et une valeur haute ("high") au dessus de laquelle les mesures sont considérées comme élevées. Ces deux indicateurs permettent également de conditionner la couleur d'affichage (rouge, jaune ou verte) de la jauge.
20+
12+
<nav> Définit une section dédiée à la navigation dans le site, comme un menu.
9+
14+
20+
5.1+
12+
<output> La balise <output> est un élément utilisable au sein de formulaires pour afficher le résultat d'un calcul à partir de champs saisissables par l'utilisateur. Ce champ est en lecture seule et s'actualise dès que l'une des valeurs sur laquelle le calcul se base change.
14+
20+
5.1+
12+
<progress> La balise <progress> permet de montrer l'état d'avancement d'une tâche ou d'une action au moyen d'une barre de progression. Il est possible d'animer la progression de la barre en utilisant le javascript, soit sur des évènements spécifiques, soit sur un simple timeout (comme dans l'exemple).
14+
20+
12+
<ruby>, <rt> et <rp> Annotations ruby.
9+
14+
20+
5.1+
12+
<section> La balise <section> définie une section générique regroupant les éléments d'un même thème au sein d'un document.
9+
14+
20+
5.1+
12+
<source> Permet de définir des contenus alternatifs pour le fichier vidéo (en cas de non support du format).
9+
14+
20+
5.1+
12+
<summary> La balise <summary> permet de donner un titre spécifique à une section <details> (proposant un contenu masqué par défaut et consultable en cliquant sur le titre de la section).
20+
<svg> La balise <svg> permet d'intégrer directement dans une page web des dessins scalaires. Il est adapté à la génération de cartes et de graphiques (dessins 2D ou 3D, histogrammes, camembert ...) et peut être employé pour réaliser des animations.
9+
14+
20+
5.1+
12+
<time> Définit de façon complète la sémantique d'une date ou d'une heure.
12+
<track> Permet d'insérer un sous-titre (au format WebVTT) à une vidéo affichée avec la balise video.
14+
20+
<video> La balise <video> permet de lire des fichiers ou des flux vidéo directement dans la page en proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause, positionnement dans la vidéo et contrôle du volume. Lorsque le fichier vidéo n'est pas trouvé ou que son format n'est pas supporté, le lecteur n'est pour certains navigateurs pas visible.
9+
h264
14+
webm
ogg
20+
webm
ogg
h264
5.1+
h264
12+
webm
<wbr /> Permet de définir des indications en cas de retour à la ligne au sein d'un texte.
9+
14+
20+
5.1+
12+

Newsletter

Abonnez-vous à notre newsletter pour recevoir les nouveautés.

0 commentaires:

© 2014 Déveur. WP Theme-junkie converted by Bloggertheme9
Powered by Blogger.
back to top