Tutoriel HTML - sommaire

HTML5 - de nouvelles balises fort utiles

La balise mark

L’élément mark va être utilisé pour mettre en relief certains textes qui vont être pertinents dans un certain contexte.

Exemple

HTML signifie HyperText Markup Language.
CSS signifie Cascading Style Sheet.

Les acronymes apparaissent sur fond jaune.

Le code correspondant : <p><mark>HTML</mark> signifie HyperText Markup Language. <br><mark>CSS</mark> signifie Cascading Style Sheet.

Cette balise pourrait avoir un rôle sémantique important dans le cadre du SEO (référencement naturel) ???

La balise TIME

Une balise sémantique !

Avant la norme HTML5 il n'y avait aucune balise pour contenir une date, une heure ou une durée.

La balise TIME permet de réprésenter :
• une heure
• une date du calendrier grégorien
• une durée de temps

Cette balise est très intéressante pour le référencement naturel d'une page ; Le robot d'indexation retrouve facilement une date.

Exemple

Le concert aura lieu le 7 févrierau parc des Princes à Paris.
Ce spectacle débutera à 20 heures et il durera au moins 2 heures et 30 minutes.

Le code HTML correspondant

L'attribut "datetime"

Remarquez que le texte contenu dans la balise TIME apparait par défaut en italique.

Notez à chaque fois l'attribut datetime dont la valeur doit respecteur un certain format pour préciser aux robots s'il s'agit d'une date ou d'une heure voire d'une durée de temps :

• date au format YYYY-MM-DD
• heure au format HH:MM:SS
• durée : préfixe P (comme "périod") ; date et heure séparée par T ; durée en heures suive de H, durée en minutes suivie de M et durée en secondes suivie de S

Masquer une partie du texte

Pour éviter que la page soit trop longue une partie du contenu peut ne pas être affichée lors du chargement de la page.

La solution CSS

Vous connaissez, je pense, la solution CSS : par défaut la boite contenant le paragraphe a une petite hauteur ; l'éventuel surplus de texte est masqué (overflow : hidden). Mais si survol de la boite la hauteur de celle-ci devient "auto" donc tout le contenu s'affiche.

Code CSS

Code HTML

Le rendu dans un Iframe

La solution jQuery

L'extension UI de ce fameux Framework propose le widgetaccordion().
L'extension jQuery UI est traitée dans le tuto "javaScript & jQuery" dans ce même site. Tutoriel JavaScript & jQueyr

Solution HTML

HTML propose dans sa version 5 une solution élégante : emploi de deux nouvelles balises details & summary

Exemple dans un Iframe

Le code HTML correspondant

La balise summary doit être contenue dans la balise details.
Au chargement de la page seul le contenu à l'intérieur de summary s'affiche et un triangle noir orienté vers la droite s'affiche.
Dès que vous cliquez sur le triangle tout le contenu s'affiche, le triangle noir s'oriente vers le bas.
Cliquez à nouveau sur le triangle, alors le contenu est replié et le triangle retrouve son orientation initiale.

La balise PICTURE

Il est absurde d'afficher sur l'écran minuscule d'un smartphone une image haute résolution (donc une image lourde).
Ces images qui pèsent plus d'un demi méga doivent être réservées aux grands écrans et encore si elles sont affichées "plein écran".
Grâce à la nouvelle balise PICTURE il est possible d'afficher telle ou telle autre image en fonction de la résolution de l'écran. C'est à dire que vous pouvez réaliser au sein de cette balise des tests.

Exemple d'utilisation de cette balise

Dans l'exemple ci-dessous il y a trois versions de la photo :

• image "aravis_grand.jpg" : 2560 par 1540 pixels ; poids : 800 KO
• image "aravis_medium.jpg : 1020 par 710 pixels ; poids : 180 KO
• image "aravis_petit.jpg" : 500 par 340 pixels ; poids :50 Ko

"aravis_grand.jpg" est l'image d'origine.
"aravis_petit.jpg" est une copie redimensionnée avec PAINT et à laquelle j'ai rajouté un texte : "petite image".
Notez que si vous divisez par 3 le nombre de pixels en largeurs (et en conservant les proportions) le poids de l'image est divisé par 9 !!!
Dans une deuxième étape j'ai rogné l'image à gauche et à droite avec que le rapport largeur par hauteur corresponde mieux aux petits écrans. Et donc en définitive le poids de la petite image tombe à 70 Ko (au lieu de 1200 à l'origine).

PICTURE : élément d'image adaptative

Réduisez la largeur de la fenêtre pour observer le changement de source !

Le code correspondant

CSS :
picture {width : 90% ; margin : 10px auto; }
img{width : 80%; display : block ; margin : 10px auto; }

HTML : ... <figure> <figcaption>Le col des Aravis en hiver : </figcaption> <picture> <source srcset="../images/aravis_grand.jpg" media="(min-width: 800px)"> <img src="../images/aravis_petit.jpg" /> </picture> </figure> ...

Si la largeur de la fenêtre est au minimum de 800px alors la source est "aravis_grand.jpg" SINON la source est "aravis_petit.jpg".
Remarquez que la balise PICTURE doit contenir les éléments SOURCE et IMG. La balise IMG précise la source de l'image si le test est faux.
La balise SOURCE a deux attributs au moins : srcset, media.
La valeur de l'attribut media est une requête média ("media query" en anglais).

Exemple plus complexe

Il est possible d'avoir deux tests voir plus.

Le code HTML

Ici alternative entre trois images selon la largeur de la fenêtre :
• Si largeur écran >= 1200px alors affichage de "aravis_grand.jpg"
• Sinon et si largeur >= 800px alors affichage de "aravis_medium.jpg"
• Sinon affichage de "aravis_petit.jpg"

Le rendu dans un Iframe

Vous pouvez tester cette page sur votre PC portable puis sur votre tablette puis sur votre smartphone.
Ou bien uniquement sur votre PC en réduisant progressivement la largeur de la fenêtre.

Remarque générale

Il faut faire preuve de bon sens. Il ne faut pas abuser de la balise PICTURE car le code HTML qui en découle est lourd.
Il faut réserver l'emploi de cette technologie aux quelques images lourdes de votre site dont il faut éviter le chargement dans le cadre de internet mobile.