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.
Le développeur web peut donc désormais créer ses propres attributs de balise.

Les attributs data-*

Seule condition pour créer un attribut personnalisé : le nom de cet 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

	img[data-nom] {box-shadow : 10px 10px 10px gray; width : 50% ; height :auto ;}
	figure {margin : 10px auto 10px auto}

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 éléments figcaption 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"