Tutoriel HTML - sommaire

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.

Nouveaux attributs de la balise input :
• optional : champ dont la saisie est facultative
• required : champ dont la saisie est obligatoire
• autofocus : champ sélectionné lors du chargement de la page
• pattern : précise le masque de saisie à respecter sous forme d'une expression régulière
• placeholder : affichage d'un texte dans le champ tant que le champ n'a pas été rempli

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.

Pour chaque images il y a deux attributs "data-*" :
• data-nom qui contient le nom de l'espèce représentée par l'image
• data-description qui contient "ver annélidé polychète tubicole" (description succincte de l'espèce)

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.

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".

Le chargement paresseux des images

La norme HTML5 propose un nouvel attribut pour les éléments IMG : loading.

Diminuer le temps d'attente de l'internaute est un facteur clé dans le succès d'un site.
De nombreuses techniques sont employées pour améliorer le temps de chargement d'une page.
L'une d'entres elles consiste à afficher en priorité tous les éléments situés au dessus de la "ligne de Flottaison". La "ligne de Flottaison" représente la partie visible d'une page web.
Concernant les images la technique du lazy Loading ou "Chargement Paresseux" permet de ne charger que les images situées au dessus de la ligne de flottaison.

Pendant longtemps réalisée via JavaScript, cette technique est désormais réalisable très simplement en HTML via l'attribut loading qui peut prendre deux valeurs :
• eager (valeur par défaut) : l'image est chargée immédiatement, qu'elle soit située dans ou hors de la fenêtre visible
• lazy : le chargement est retardé jusqu'à ce que l'usager scrolle et s'approche du bas de la fenêtre du navigateur

Le chargement paresseux est intéressant pour des images lourdes.

Exemple

Quatre images lourdes

Chaque image pèse entre 2 et 3 mégas.

Le code correspondant

Notez l'attribut loading ="lazy"