Accueil

Traduction

Tutoriel HTML - sommaire

Tutoriel HTML - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

HTML5 - nouveaux attributs de balise

Avec HTML5 on peut associer à tout élément des attributs data-* et aux éléments de type block l'attribut contenteditable.

Dans le chapitre précédent nous avons vu que la balise INPUT type ="text" dispose désormais de nouveaux attributs.

Les attributs data-*

C'est l'un des grandes nouveautés de HTML5. Le développeur peut associer à chaque élément des données en créant ses propres attributs.
Seule condition : le nom de chaque attribut doit commencer par "data-".
C'est pour cette raison que l'on parle des attributs data-*.
Ces attributs personnalisés peuvent ensuite être utilisés par CSS et JavaScript.

Exemple

Faisons un peu de biologie aquatique !

?
?

Les images apparaissent ombrées.

Le code CSS

Les image ayant l'attribut "data-non" seront ombrées.
Les éléments figure centrés horizontalement dans la page.

Le code HTML

Les images sont contenues dans une balise FIGURE.

Le script

La fonction remplit chacune des balises figcaption associée à une image.
Pour la première image avec la méthode traditionnelle getAttribute()
Pour la deuxième image avec la nouvelle propriété JavaScript dataset.
La syntaxe est alors : élément.dataset.attribut

Attention dans cette syntaxe l'attribut personnalisé doit être débarassé du préfixe "data-" .

Rendre une boite éditable

Avec HTML5 tous les éléments peuvent devenir éditables et non plus seulement les zones de texte des formulaires (balises INPUT & TEXTAREA).

Exemple politique (lol)

Vous pouvez corriger, compléter le texte contenu ci-dessous dans un DIV.

Poutine est un fou dangereux !

Code CSS & HTML

La boîte DIV a l'attribut contenteditable= 'true' !

Le script

La fonction affiche le nouveau contenu de la boîte identifiée "boite".