Tutoriel HTML - sommaire

HTML5 - nouveaux attributs de balise

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

Nouveaux attributs de l'élément 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

Je vous renvoie à ce chapitre.
HTML 5 - formulaires nettement améliorés

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

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 manipulés par CSS et JavaScript.

Exemple

Faisons un peu de biologie aquatique !

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 une description sommaire de l'espèce

Le script

function info()
{
	var image1 =document.querySelector("#image1") ; 
	var legende1 =document.querySelector("figcaption") ; 
	var nom1 = image1.dataset.nom;
	var description1 =image1.dataset.description;
	legende1.textContent = nom1 + " "  + description1 ; 
	
	var image2 =document.querySelector("#image2");
	var legende2 =document.querySelectorAll("figcaption")[1];
	var nom2 = image2.dataset.nom ; 
	var description2 =image2.dataset.description ; 
	legende2.textContent = nom2 + " " + description2;
}

La fonction remplit chacune des balises figcaption associée à une image via la méthode 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'.
Vous pouvez donc modifier le contenu comme s'il s'agissait d'un élément TEXTAREA.

Le script

La fonction affiche le nouveau contenu de la boîte identifiée "boite" puis rend la boite non éditable. Pour modifier de nouveau le contenu de la boite actualisez la page !

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"