Les nouveaux tag en HTML5

Introduction

Exemples

Introduction

Les nouveaux Tags HTML5 ont été créés afin de permettre une meilleure clarté de la structure d'un document HTML en définissant des rêgles précises sur la gestion des éléments HTML.

Voici un aperçu de ces différents nouveaux tags :

<article>

Cette balise définit un contenu externe.(exemple billet de blog)

<aside>

Cette balise définit un contenu mis à part (comme une sidebar par exemple).

<audio>

Cette balise représente un contenu audio. Elle permet de lire un contenu audio (avec controle de l'audio : pause, colume, timeline ...).

<canvas>

La balise canvas permet d'afficher des graphiques créés en javascript.

<command>

Elle permet de créer un bouton de commande (radio, checkbox, button ...) mais il faut la placer à l'intérieur de la balise menu sinon le bouton de commande ne s'affichera pas.

<datalist>

Cette balise représente une liste d'options.

<details>

Cette balise permet de décrire un document ou des parties d'un document.

<embed>

Elle permet d'afficher un contenu tel que du flash, quicktime, media player ...

<figcaption>

Définit la légende d'un élément du tag figure.

<figure>

Ce tag définit un groupe de contenu des médias et leur légende (exemple un ensemble d'image et une légende).

<footer>

Définit un pied de page d'une section ou de la page.

<header>

Définit une entête d'une section ou de la page.

<hgroup>

Définit un ensemble d'élément h1 à h6.

<keygen>

Présente une clé générée selon un certain chiffrage.

<mark>

Permet de marquer du texte pour mettre par exemple en évidence certaines parties d'un texte.

<meter>

Définit une mesure limité par 2 valeurs (minimale et maximale).

<nav>

Définit une section de navigation.

<output>

Définit différents types de sortie (comme par exemple d'un script).

<progress>

Définit la progression d'une tache de tous type.

<rp>

Utilisé dans le tag ruby et permet d'afficher un message si le tag ruby n'est pas supporté par le navigateur.

<rt>

Permet de définir les explications d'annotations ruby.

<ruby>

Permet d'écrire des annotations ruby.

<section>

Définit une section dans le document.

<source>

Définit une source média. Ce tag doit être utilisé dans les tags audio ou vidéo.

<summary>

Ce tag contient le "header" d'un tag details qui décrit les détails d'un ou d'une partie de document.

<time>

Permet de définir une heure ou une date.

<video>

Permet de jouer un media audio ou vidéo.

<wbr>

Ce tag définit où un mot peut être tronqué pour un retour à la ligne. Cela permet d'éviter que ce soit le navigateur qui le fasse à la mauvaise place.

Quelques Exemples

Tout ces nouveaux tags c'est bien joli mais comment les utiliser? voici quelques exemples.
Attention tous ces nouveaux tags ne sont pas tous implémentés, de plus, il faudra bien mettre en display:block les tags HTML5 dans notre CSS, afin de pouvoir les utiliser.

Exemple de page type

exemple de structure de page en HTML5

Exemple <figcaption> et <figure>

1 2 3
Légende utilisant figcaption

Exemple <video>

retourner en haut de la page