Le HTML : les bases

Créer une page simple

Commencer avec le contenu

Créez un simple fichier html vide, avec votre éditeur de texte ou votre éditeur de code.

Saisissez le contenu suivant dans votre fichier, sans aucun balisage qui décrirait sa structure et enregistrez-le.

MMI Bordeaux, l’école des nouveaux médias

La formation pluridisciplinaire que nous proposons a ouvert ses portes à Bordeaux en septembre 2002.

Depuis 2005, les DUT s’inscrivent dans l’Espace européen de l’enseignement supérieur et dans le schéma LMD (Licence Master Doctorat).

Prévisualisez cette page dans votre navigateur.

Les textes sont affichés à la suite ; les sauts de lignes sont ignorés. Ce que le navigateur ignore :

  • Les caractères « espaces » multiples,
  • les sauts de lignes,
  • les caractères « tabulations »,
  • les balises non reconnues.

Convention de nommage

Il est utile de connaître quelques règles pour nommer vos fichiers :

  1. utilisez l’extension appropriée (htm ou html pour vos fichiers html),
  2. n’utilisez jamais le caractère « espace » dans le nom de vos fichiers,
  3. évitez les caractères spéciaux, comme ?, %, #, /, :, ;, ., etc.,
  4. les noms de fichiers sont sensibles à la casse,
  5. privilégiez des noms courts.

Comment fonctionne le balisage : éléments et attributs

Par exemple :

<h1>Brand Battle</h1>

Le nom de la balise apparaît dans la balise ouvrante et à nouveau dans la balise fermante.

Dans une balise, le nom des éléments est insensible à la casse, aussi <img>, <Img> ou <IMG> auront le même rendu. Cependant par convention il est recommandé de les écrire en minuscule.

Certains éléments sont vides

Certains éléments n’ont pas de contenu et fournissent une simple directive. Ils sont appelés les éléments vides.

Par exemple :

Brand Battle<br>MMI Bordeaux

Qu’en est-il de la barre oblique en plus ?

Si vous observez le code source de certaines pages web, vous verres des éléments vides écrits comme ceci : <img/> ou <br/>, ou <meta/>. Cette barre oblique n’est pas obligatoire, c’est un héritage historique du XHTML, et les développeurs continuent de l’utiliser pour assurer une rétro-compatibilité avec les navigateurs qui n’ont pas d’interpréteur XHTML. Cette forme d’écriture reste valide W3C.

Les attributs

Les attributs sont des instructions qui clarifient ou modifient un élément. Ils apparaissent dans la balise ouvrante, après le nom de l’élément.

Il peut y avoir plus d’un attribut dans une même balise. Dans ce cas, les attributs sont séparés par un « espace » et peuvent être déclarés dans n’importe quel ordre.

  • La plupart des attributs on besoin d’avoir une valeur associée, qui suit le nom de l’attribut avec un signe « égale » (=) ; certains attributs sont un simple mot descriptif, sans valeur associée.
  • La valeur d’un attribut doit être un nombre, un mot, une chaîne de caractère, une adresse URL, ou une dimension.
  • Les guillemets ne sont pas strictement obligatoires mais fortement recommandés. Les guillemets simples ou doubles sont acceptés.
  • Les noms des attributs et leurs valeurs sont définies par les spécifications HTML.
  • Certains attributs sont obligatoires.

Éléments imbriqués

Positionner des éléments à l’intérieur d’autres éléments est appelé « imbriquer ». Assurez-vous que les balises de fermetures ne se chevauchent pas.

<div>
    <h1>Titre de la page</h1>
    <p>Ceci est un <em>texte avec emphase</em>.</p>
</div>

Commentaires HTML

Pour laisser une note dans un document HTML, marquez-la comme un commentaire :

 <!-- Début de la navigation principale -->
<ul>
...
</ul>
<!-- fin de la navigation principale -->

Les textes compris entre les balises ne sont pas affichés dans le navigateur. Gardez en tête qu’ils restent visibles dans le code source de la page.

Structure HTML minimale d’un document

Il est recommandé qu’un document HTML ait la structure minimale suivante :

<!doctype html>
<html lang="fr-FR" >
<head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
</head>
 
<body>
    <!-- contenu de la page -->
</body>
 
</html>

Le Doctype

Ce n’est pas un élément à proprement parler, plutôt l’exception qui confirme la règle, c’est la déclaration du type du document.

La déclaration du Doctype informe les navigateurs que le document est écrit selon les spécifications HTML5.

L’élément racine « html »

L’ensemble du document est contenu dans l’élément « html ». On appelle cet élément l’élément racine, car il contient tous les autres éléments et ne doit être contenu dans aucun autre.

L’élément « head »

A l’intérieur de l’élément « html », le document est divisé en deux parties : l’élément « head » et l’élément « body ».

L’élément « head » contient des éléments qui se rapportent au document et ne sont pas affichés dans les navigateurs, comme le titre, les appels aux feuilles de style ou aux scripts, ou encore les meta-données.

Les éléments « meta »

Les éléments « meta » fournissent des informations à propos du document, les meta-données. Dans notre cas, elle spécifie le type d’encodage de caractères utilisé pour le document.

D’autre types de meta-données sont  par exemple :

  • l’auteur,
  • le statut de publication,
  • la description,
  • etc.

L’élément « title »

L’élément « title » est obligatoire. Il est affiché dans les onglets des navigateurs, dans les listes de favoris, et il est utilisé par les moteurs de recherche.

L’élément « body »

L’élément « body » contient le contenu du document. Le contenu, c’est tout ce que vous voulez voir affiché dans les navigateurs.

Exercice

Modifiez votre fichier en ajoutant les éléments HTML obligatoires, et prévisualisez le résultat.

<!doctype html>
<html lang="fr-FR" >
<head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
</head>
 
<body>
    millenial school

    Tout le monde se demande comment communiquer  efficacement avec les millenials. Nous formons les millenials à  communiquer efficacement avec tout le monde.

    En plus d'être digital natives (natifs numériques),  ils maîtrisent les réseaux sociaux, sont capables de construire une  stratégie de communication, de produire du contenu vidéo, des  infographies, et de coder.
</body>
</html>

Baliser le texte

Les balises de base

Avec les balises de titrage (<h1>, <h2>, …) et de paragraphes (<p>), le navigateur peut afficher le contenu correctement.

<!doctype html>
<html lang="fr-FR" >
<head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
</head>
 
<body>
    <h1>millenial school</h1>

    <p>Tout le monde se demande comment communiquer  efficacement avec les millenials. Nous formons les millenials à  communiquer efficacement avec tout le monde.</p>

    <p>En plus d'être digital natives (natifs numériques),  ils maîtrisent les réseaux sociaux, sont capables de construire une  stratégie de communication, de produire du contenu vidéo, des  infographies, et de coder.</p>
</body>
</html>

L’objectif du HTML est d’ajouter du sens et de la structure à notre contenu. Ce n’est pas de décrire comment le contenu doit être affiché.

Votre travail quand vous balisez un document HTML est de choisir les éléments HTML qui fournissent la description la plus significative du contenu.

Par exemple le titre principal du document doit être balisé avec un <h1> car c’est le titre le plus important de la page.

Ne vous souciez pas de la façon dont il va être affiché, vous pourrez le changer très facilement à l’aide des feuilles de style. Le plus important est que vous choisissiez les éléments en vous basant sur ce qui fait sens pour votre contenu.

En plus d’apporter du sens à votre contenu, le balisage permet d’y apporter de la structure.  La manière dont les éléments se suivent ou sont imbriqués crée des relations entre eux. On appèle cette structure le DOM (pour « Document Object Model« ).

La structure sous-jacente du document fournit aux navigateurs des indices sur la façon de manipuler le document.

Identifier les éléments textes : en bloc et en ligne

Même si cela va sans dire, il est important de noter que des éléments comme un titre ou un paragraphe impliquent implicitement un retour à la ligne, et pas d’être affichés à la suite comme dans notre exercice précédent.

C’est pourquoi par défaut ces éléments sont affiché en « bloc » (« block element« ). Les navigateurs les considèrent comme des entités contenues dans des petits rectangles empilés dans la page. Chaque élément bloc commence sur une nouvelle ligne, et par défaut un espace est usuellement ajouté au dessus et en dessous de l’élément par les navigateurs.

Par opposition certaines balises, dites « en ligne » (« inline element« ) comme la balise « emphase » (« <em> ») ou la balise « lien » (« <a> ») n’imposent pas de commencer sur une nouvelle ligne, mais au contraire de continuer dans le flux du paragraphe.

Les élément type « bloc » sont surlignés en rouge ; Les éléments « en ligne » sont surlignés en bleu.

Les styles par défaut

Une autre chose que vous devez avoir en tête est que chaque navigateurs restituent la hiérarchie visuellement en rendant les titres plus gros et plus espacés par exemple.

Comment les navigateurs déterminent la façon dont les éléments doivent être affichés ? Ils utilisent une feuille de style (appelée « User Agent Stylesheet« ) qui décrivent les comportements d’affichage par défaut !

Chaque navigateur dispose de sa propre feuille de style par défaut. Elles ne sont pas toutes identiques.

Baliser le texte

Les paragraphes

 <p>...</p>

C’est l’élément le plus rudimentaire pour un document texte. Il indique un paragraphe. Visuellement les navigateurs affichent les paragraphes en commençant sur une nouvelle ligne, avec un espacement par défaut.

Les paragraphes peuvent contenir du texte, des images, des liens ou autres éléments en ligne, mais ils ne peuvent pas contenir des éléments blocs, comme des titres, des listes, ou autres…

Les titres

 <h#>...</h#>

Utilisés pour définir les titres hiérarchiquement, ils disposent en fait de six niveaux (h1, h2, … jusqu’à h6).

Les navigateurs s’en servent pour définir la structure hiérarchique du document. Les aides techniques s’appuient dessus pour permettre aux utilisateurs de naviguer d’une section à l’autre du document.

Un document ne doit disposer que d’un seul titre de niveau 1 (h1) et la hiérarchie des titres doit être respectée (pas de h3 sans un h2 qui le précède…).

Sauter une ligne

Il existe une balise « Aller à la ligne » !
C’est une balise orpheline qui sert juste à indiquer qu’on doit aller à la ligne. Vous devez obligatoirement la mettre à l’intérieur d’un paragraphe. 

<br>

Vous pouvez théoriquement mettre plusieurs balises<br />d’affilée pour faire plusieurs sauts de lignes, mais on considère que c’est une mauvaise pratique qui rend le code délicat à maintenir. Pour décaler un texte avec plus de précision, on utilisera le CSS.

La ligne horizontale

<hr>

Utilisée pour séparer deux sections thématiques, elle ajoute un séparateur logique à votre contenu.

Par défaut les navigateurs affichent une ligne horizontale ombrée.

La mise en valeur

Mettre un peu en valeur

Pour mettre un peu en valeur votre texte, vous devez utiliser la balise « em ». 

<em>...</em>

Comme vous pouvez le voir, utiliser la balise<em>a pour conséquence de mettre le texte en italique. En fait, c’est le navigateur qui choisit comment afficher les mots. On lui dit que les mots sont assez importants et, pour faire ressortir cette information, il change l’apparence du texte en utilisant l’italique.

Mettre bien en valeur

Pour mettre un texte bien en valeur, on utilise la balise<strong>qui signifie « fort », ou « important » si vous préférez. Elle s’utilise exactement de la même manière que<em>.

<strong>...</strong>

Vous voyez sûrement le texte s’afficher en gras. Là encore, le gras n’est qu’une conséquence. Le navigateur a choisi d’afficher en gras les mots importants pour les faire ressortir davantage.

La balise<strong>ne signifie pas « mettre en gras » mais « important ». On pourra décider plus tard, en CSS, d’afficher les mots « importants » d’une autre façon que le gras si on le souhaite.

Marquer le texte

La balise<mark>permet de faire ressortir visuellement une portion de texte. L’extrait n’est pas forcément considéré comme important mais on veut qu’il se distingue bien du reste du texte. Cela peut être utile pour faire ressortir un texte pertinent après une recherche sur votre site par exemple. 

<mark>...</mark>

Par défaut,<mark>a pour effet de surligner le texte. On pourra changer l’affichage en CSS (décider de surligner dans une autre couleur, d’encadrer le texte, etc.). C’est le même principe que ce que je vous disais pour les balises précédentes : elles indiquent le sens des mots et non pas comment ceux-ci doivent s’afficher.

Les listes

Les listes non ordonnées
<ul>
    <li>Serif</li>
    <li>Sans-serif</li>
    <li>Script</li>
    <li>Display</li>
</ul>

Elles sont par défaut affichées avec des puces. Mais vous pouvez aisément modifier cela avec vos feuilles de style.

Vous pouvez mettre n’importe quel type de contenu à l’intérieur des items d’une liste.

Les listes ordonnées
<ol>
    <li>Première étape</li>
    <li>Étape suivante</li>
    <li>Dernière étape</li>
</ol>

Utile pour les listes qui doivent être affichées dans un ordre spécifique, comme des instructions pas-à-pas par exemple, ou un itinéraire…

Elles sont affichées par défaut avec des indices numériques pour chaque élément de la liste.

Vous pouvez faire commencer une liste ordonnée à l’indice qui vous arrange, en le spécifiant comme attribut :

<ol start="17">
    <li>Dix-septième étape</li>
    <li>Étape suivante</li>
    <li>Dernière étape</li>
</ol>
Les listes de descriptions
<dl>
    <dt>Mon premier item</dt>
    <dd>Texte correspondant à mon premier item et s'y rapportant comme une description ou autre.</dd>
 
    <dt>Mon deuxième item</dt>
    <dd>Texte correspondant à mon deuxième item et s'y rapportant comme une description ou autre.</dd>
 
    <dt>Mon troisième item</dt>
    <dd>Texte correspondant à mon troisième item et s'y rapportant comme une description ou autre.</dd>
    <dd>Second texte correspondant à mon troisième item et s'y rapportant comme une description ou autre.</dd>
</dl>

Utilisées pour tout type de paire « nom » / « valeur », comme des termes et leur définition par exemple, ou des questions-réponses. Leur structure est un peu différentes des deux autres types de listes, puisqu’elle associe des valeurs à des termes, ou labels.

L’élément « dl » n’accepte pour enfant que les éléments « dt » et « dd« . Il est permis d’avoir plusieurs définitions associées à un seul terme.

Les citations longues
 <blockquote>...</blockquote>

Si vous avez une citation longue, ou un texte provenant d’un autre source, balisez les avec “blockquote”. Cette balise peut recevoir des balises de type paragraphes, tires, listes, …

Le texte préformaté
 <pre>...</pre>

Nous avons vus que les navigateurs ignorent les espace vides multiples et les sauts de lignes. Mais dans certains cas, comme des exemples de codes, ou des poésies, ces espacements peuvent être importants dans la compréhension du contenu. L’élément “pre” préserve l’affichage de ces espaces et sauts de lignes.

Par défaut le contenu de cette balise est affiché dans une police monospace, comme “courier“. Bien entendu il est possible de changer cela via les feuilles de style.

Les liens

<a>...</a>

L’élément a (pour “anchor“) correspond à un lien hypertexte.

Utiliser l’attribut href pour renseigner l’adresse du lien cible.

<a href="https://www.mmibordeaux.com/">Aller sur le site de MMI</a>
<a href="https://www.mmibordeaux.com/"><img src="https://www.mmibordeaux.com/assets/images/logo-3.png" alt="Le site del'IUT MMI"></a>

L’attribut href

URL absolues

Elles fournissent l’URL complète du document cible, incluant le protocole (http ou https par exemple).

<a href="https://www.mmibordeaux.com/">Aller sur le site de MMI</a>

Cela permet de faire des liens vers des sites externes par exemple.

URL relatives

Elles fournissent le chemin d’accès relatif au document en cours, vers le document cible.

<a href="recettes/le-marbre-au-chocolat.html">La recette du marbré au chocolat</a>

Elles permettent de créer des liens au sein du même site.

Quelques règles pour vos chemins relatifs :

  • Dans le même répertoire : href="page.html« 
  • Dans un répertoire enfant : href="sous-repertoire/page.html"
  • Dans le répertoire parent : href="../page.html" ou href="../../page.html"
  • à partir du répertoire racine du site : href="/repertoire/page.html"

Ancres : Pointer un élément spécifique de la page

<a href="#ingredients">Les ingrédients de la recette du marbré au chocolat</a>
<!-- ... ce lien va rediriger l'utilisateur vers l'élément portant l'attribut id="ingredients" -->
<h2 id="ingredients">Les ingrédients</h2>

Ancres : Pointer un élément spécifique d’une autre page

<a href="/recettes/marbre.html#ingredients">Les ingrédients de la recette du marbré au chocolat</a>
<!-- ... ce lien va rediriger l'utilisateur vers l'élément portant l'attribut id="ingredients" de la page "marbre.html" située dans le répertoire "recettes" à la racine du site web -->

Ouvrir le lien dans une nouvelle fenêtre du navigateur

 <a href="https://www.mmibordeaux.com/" target="_blank">Aller sur le site de MMI</a>

Les liens “e-mail”

<a href="mailto:arnaud@reaccess.fr">Contacter Arnaud Teyssèdre</a>

Les liens “téléphone”

<a href="tel:+33688776655">Appeler Arnaud Teyssèdre</a>

Exercice : balisage sémantique

Balisez correctement le contenu suivant :

Prévisualisation du contenu

Rédactionnel source

La vraie recette du marbré au chocolat
Le gâteau marbré au chocolat, un classique de notre enfance. Qui n’a jamais alterné les couches de pâte pour obtenir un gâteau marbré, puis recouvert de chocolat pour en faire le gâteau de son anniversaire ? Qui n’a jamais eu un morceau de Savane (la version industrielle du marbré au chocolat) pour le goûter ?

Il faut quand même reconnaître quelque chose : le marbré au chocolat occupe très bien les enfants… et les parents ! Je me rappelle de ma maman qui m’apprenait avec patience comment faire un gâteau marbré ! Lors de la confection, on s’applique à faire les 2 pâtes bien comme il faut, pour pas qu’il y ait de grumeaux. Puis on s’applique à bien alterner les couches de pâte pour que cela fasse les beaux motifs… Puis on s’applique à le manger doucement et calmement, sans parler… sous peine de s’étouffer !

Parce que oui, il faut le dire : le gâteau marbré, généralement, c’est assez sec ! Disons que cela permet au gâteau de se tenir longtemps mais quand même… Généralement on n’a pas intérêt à en prendre une trop grosse bouchée et à bien respirer par le nez car on a toutes nos chances de voir filer une miette du mauvais côté… Personnellement, je préfère le marbré au chocolat moelleux à souhait, alors je surveille toujours la cuisson de très très près !

L’autre jour, triste du résultat de mon marbré sans sucre ajouté, qui tenait plus du gâteau mouillé et amer que de la madeleine de Proust de mon enfance, j’ai décidé de faire un vrai marbré au chocolat noir, parce que j’en avais envie. Parce qu’une petite part au goûter, avec une tasse de thé, ça fait plaisir… Et ça réconforte !!

Je me suis donc mise en quête de LA recette de marbré au chocolat. J’en croise régulièrement car c’est tout de même un grand classique. Je vois souvent les mêmes images sur Pinterest, et c’est celui de Pascale, reine du cake s’il en est, qui a retenu mon intention. Outre le fait que ce soit un marbré au chocolat facile à réaliser, il contenait de la crème ce qui devait lui conférer un côté plus moelleux que le lait (qui a tendance à rendre la pâte difficile à cuire). J’ai aussi croisé la recette au lait ribot, que j’ai mis dans un coin de ma tête, mais comme j’avais de la crème liquide à liquider (haha)… Le résultat donne un marbré au chocolat moelleux à souhait !!!

J’ai juste baissé un peu la quantité de sucre dans le gâteau de Pascale car je deviens de plus en plus sensible au sucré… Elle recommande 230g, j’ai laissé ces quantités dans la recette.

Le véritable Marbré au chocolat
Type de plat: Goûter
Cuisine: Française
Temps de préparation: 25 minutes
Temps de cuisson: 1 heure
Temps total: 1 heure 25 minutes
Portions: 8 personnes
Un grand classique, incontournable des goûters : le marbré au chocolat

Imprimer
Ingrédients
Pâte à marbré
4 oeufs
230 g de sucre
120 g de crème liquide entière
220 g de farine
2 c. à café de levure rase
100 g de beurre demi-sel
100 g de chocolat noir
Sirop pour imbiber
5 cl d' eau
15 g de sucre
Instructions
Préchauffer votre four à 165°C. Beurrer votre moule à cake.
Dans un bol, mélanger 2 œufs avec la moitié du sucre, soit 115 g.
Dans un second bol, mélanger le reste du sucre et les 2 œufs restants.
Dans chaque bol, ajouter la moitié de la crème, soit 60 g.
Dans chaque bol, ajouter la moitié de la farine, soit 110g et la moitié de la levure, soit 1 cuil. à café rase. Bien mélanger.
Dans un bol, ajouter la moitié du beurre fondu et tiédi (60 g) et mélanger à nouveau.

Faire fondre le chocolat au bain-marie avec le reste du beurre. L'incorporer dans le bol restant et mélanger.

Dans votre moule à cake, verser un tiers de la pâte nature. Lisser la surface à l'aide d'une maryse.
Ajouter la moitié de la pâte au chocolat et lisser à nouveau.
Ajouter à nouveau un tiers de la pâte nature et lisser.
Ajouter le reste de la pâte au chocolat et lisser la surface.
Enfin, terminer par le restant de la pâte nature et lisser la surface.

Enfourner pour 50 à 60 minutes environ. Cela dépend vraiment de votre four. Il faut qu'une pique ressorte sèche du gâteau.

Pendant la cuisson du cake, porte à ébullition l'eau. Ajouter le sucre et mélanger pour obtenir un sirop.
Dès la sortie du four, badigeonner la surface du cake de ce mélange, à l'aide d'un pinceau.
Laissez tiédir votre cake puis le démouler sur une grille.

Notes
Ce gâteau est délicieux ainsi. Pour plus de gourmandise, vous pouvez faire fondre du chocolat noir, au lait ou praliné et en recouvrir le gâteau.

Les images

Les différents formats d’images

Quand vous avez une image « entre les mains », vous avez la possibilité de l’enregistrer dans plusieurs « formats » différents. Le poids (en Ko, voire en Mo) de l’image sera plus ou moins élevé selon le format choisi et la qualité de l’image va changer.

Certains formats sont plus adaptés que d’autres selon l’image (photo, dessin, image animée…). Notre but ici est de faire le tour des différents formats utilisés sur le Web pour que vous les connaissiez et sachiez choisir celui qui convient le mieux à votre image.

Toutes les images diffusées sur Internet ont un point commun : elles sont compressées. Cela veut dire que l’ordinateur fait des calculs pour qu’elles soient moins lourdes et donc plus rapides à charger.

Le JPEG

Les images au format JPEG (Joint Photographic Expert Group) sont très répandues sur le Web. Ce format est conçu pour réduire le poids des photos (c’est-à-dire la taille du fichier associé), qui peuvent comporter plus de 16 millions de couleurs différentes.

Les images JPEG sont enregistrées avec l’extension.jpgou.jpeg.

Notez que le JPEG détériore un peu la qualité de l’image, d’une façon généralement imperceptible. C’est ce qui le rend si efficace pour réduire le poids des photos.
Quand il s’agit d’une photo, on ne peut généralement pas détecter la perte de qualité. Par contre, si ce n’est pas une photo, vous risquez de voir l’image un peu « baver ». Dans ce cas, il vaut mieux utiliser le format PNG.

Le PNG

Le format PNG (Portable Network Graphics) est le plus récent de tous. Ce format est adapté à la plupart des graphiques (je serais tenté de dire « à tout ce qui n’est pas une photo »). Le PNG a deux gros avantages : il peut être rendu transparent et il n’altère pas la qualité de l’image.

Le PNG a été inventé pour concurrencer un autre format, le GIF, à l’époque où il fallait payer des royalties pour pouvoir utiliser des GIF. Depuis, le PNG a bien évolué et c’est devenu le format le plus puissant pour enregistrer la plupart des images.

Le PNG existe en deux versions, en fonction du nombre de couleurs que doit comporter l’image :

  • PNG 8 bits : 256 couleurs ;
  • PNG 24 bits : 16 millions de couleurs (autant qu’une image JPEG).

La compression du JPEG est plus puissante sur les photos. Une photo enregistrée en JPEG se chargera toujours beaucoup plus vite que si elle était enregistrée en PNG. Je vous conseille donc toujours de réserver le format JPEG aux photos.

Le GIF

C’est un format assez vieux, qui a été néanmoins très utilisé (et qui reste très utilisé par habitude). Aujourd’hui, le PNG est globalement bien meilleur que le GIF : les images sont généralement plus légères et la transparence est de meilleure qualité. Je vous recommande donc d’utiliser le PNG autant que possible.

Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu’à plusieurs millions de couleurs).

Néanmoins, le GIF conserve un certain avantage que le PNG n’a pas : il peut être animé.

Il existe un format adapté à chaque image

Si on résume, voici quel format adopter en fonction de l’image que vous avez :

  • Une photo : utilisez un JPEG.
  • N’importe quel graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits ou éventuellement un GIF.
  • N’importe quel graphique avec beaucoup de couleurs : utilisez un PNG 24 bits.
  • Une image animée : utilisez un GIF animé.

Les erreurs à éviter

Bannissez les autres formats

Les autres formats non cités ici, comme le format BITMAP (*.bmp) sont à bannir car bien souvent ils ne sont pas compressés, donc trop gros. Ils ne sont pas du tout adaptés au Web. On peut en mettre sur son site mais le chargement sera vraiment extrêmement long !

Choisissez bien le nom de votre image

Si vous voulez éviter des problèmes, prenez l’habitude d’enregistrer vos fichiers avec des noms en minuscules, sans espace ni accent, par exemple :  mon_image.png.

Vous pouvez remplacer les espaces par le caractère underscore (« _ »).

Insérer une image

L’élément img dit au navigateur : place une image ici.

Lorsque votre navigateur voit un élément img, il effectue une requête au serveur pour obtenir le fichier image à afficher. Par défaut elle sera affichée en ligne, c’est à dire dans le flux du texte. Et par défaut aussi le bord du bas de l’image sera aligné avec la ligne basse du texte. C’est un élément vide, qui ne nécessite pas de contenu.

<p>Cet été faites vos pizza <img src="pizza.jpg" alt=""> au grill !</p>

Les figures

Ce sont des éléments qui viennent enrichir le texte pour compléter les informations de la page.

Les figures peuvent être de différents types :

  • images ;
  • codes source ;
  • citations ;
  • etc.

Bref, tout ce qui vient illustrer le texte est une figure. Nous allons ici nous intéresser aux images mais, contrairement à ce qu’on pourrait croire, les figures ne sont pas forcément des images : un code source aussi illustre le texte.

Création d’une figure

En HTML5, on dispose de la balise  <figure>. Voici comment on pourrait l’utiliser :

<figure>
    <img src="images/blocnotes.png" alt="Bloc-Notes">
</figure>

Une figure est le plus souvent accompagnée d’une légende. Pour ajouter une légende, utilisez la balise  <figcaption>à l’intérieur de la balise  <figure>, comme ceci :

<figure>
    <img src="images/blocnotes.png" alt="Bloc-Notes">
    <figcaption>Le logiciel Bloc-Notes</figcaption>
</figure>

Bien comprendre le rôle des figures

Un peu plus tôt dans ce chapitre, je vous ai dit que les images devaient être situées dans des paragraphes (placées à l’intérieur d’une balise  <p></p>). Ce n’est pas tout à fait vrai.

Si vous faites de votre image une figure, l’image peut être située en-dehors d’un paragraphe.

<p>Connaissez-vous le logiciel Bloc-Notes ? On peut faire des sites web avec !</p>
 
<figure>
    <img src="images/blocnotes.png" alt="Bloc-Notes">
    <figcaption>Le logiciel Bloc-Notes</figcaption>
</figure>

Quand dois-je placer mon image dans un paragraphe et quand dois-je la placer dans une figure ?

  • Si elle n’apporte aucune information (c’est juste une illustration pour décorer) : placez l’image dans un paragraphe.
  • Si elle apporte une information : placez l’image dans une figure.

La balise <figure>a un rôle avant tout sémantique. Cela veut dire qu’elle indique à l’ordinateur que l’image a du sens et qu’elle est importante pour la bonne compréhension du texte. Cela peut permettre à un programme de récupérer toutes les figures du texte et de les référencer dans une table des figures, par exemple.

Enfin, sachez qu’une figure peut très bien comporter plusieurs images. Voici un cas où cela se justifie :

<figure>
    <img src="images/internetexplorer.png" alt="Logo Internet Explorer">
    <img src="images/firefox.png" alt="Logo Mozilla Firefox">
    <img src="images/chrome.png" alt="Logo Google Chrome">
    <figcaption>Logos des différents navigateurs</figcaption>
</figure>

Les images SVG

On ne peut pas évoquer les images sur une page web sans évoquer SVG (pour “Scalable Vector Graphics“).

Au lieu d’être composés d’une grille de pixels, les SVG sont faits de formes et de chemins, définis mathématiquement, et écrits en texte.

De même que le HTML dispose d’élément pour les paragraphes (p) ou pour les tableaux (table), SVG dispose d’éléments pour définir des formes telles que les rectangles (rect) les cercles (circle), ou les chemins (path).

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 180">
    <rect width="300" height="180" fill="purple" rx="20" ry="20"></rect>
    <text x="40" y="114" fill="Bonjour !" font-family="Verdana-Bold" font-size="72">
        Bonjour !
    </text>
</svg>

Ils sont très pratiques car :

  • ils sont légers et offrent de meilleures performances ;
  • ils sont vectoriels et peuvent être redimensionnés sans perte de qualité ;
  • ils sont en texte, intégrés au HTML et peuvent être compressés avec des outils comme Gzip, tout comme le HTML ;
  • ils peuvent être animés ;
  • ils peuvent être modifiés avec CSS ;
  • vous pouvez leur ajouter de l’interactivité, comme au survol avec un pointeur par exemple.

Il est possible aussi d’intégrer une image svg avec l’élément img :

<img src="pizza.svg" alt="Pizza">

Les éléments de section HTML5

Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document ou de l’application web, qui possèdent une valeur sémantique particulière ; contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre, et ne servent qu’à regrouper d’autres éléments HTML pour leur affecter un style CSS commun, voire pour interagir avec eux via le DOM… Il ne s’agit donc pas de nouveaux éléments avec des noms génériques : c’est bien plus que ça !

Une majorité des sites contiennent des informations supplémentaires relatives ou non au contenu principal (que l’on nomme sidebar ou barre latérale). Cette information est alors placée dans un élément <div class="aside"> dédié – qui permet d’affecter des propriétés de styles CSS – mais n’a aucune signification particulière pour un navigateur ou un moteur d’indexation. C’est le cas de tous les autres <div>. Le même principe peut être appliqué pour baliser les différents articles d’un site d’information : pourquoi ne pas prévoir un élément <article> plutôt que de segmenter tout le contenu avec des <div class="article"> ? Ceci en facilitera autant l’extraction d’information, la syndication de contenu, et la structuration du code source.

Liste récapitulative des éléments de section HTML5

Le tableau suivant récapitule les nouveaux éléments de section et leur usage le plus commun, tel que décrit par la spécification.

Nom Détails
<section> Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d’application web
<article> Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension
<nav> Section possédant des liens de navigation principaux (au sein du document ou vers d’autres pages)
<aside> Section dont le contenu est un complément par rapport à ce qui l’entoure, qui n’est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
<header> Section d’introduction d’un article, d’une autre section ou du document entier (en-tête de page).
<footer> Section de conclusion d’une section ou d’un article, voire du document entier (pied de page).

Exemples de documents

Voici un schéma basique d’un découpage d’une page HTML5. Précisons bien qu’il ne s’agit pas d’une règle fixe à appliquer à tout document mais juste d’un exemple.

L’en-tête <header>

Plutôt que de se cantonner à un simple <div id="header"> le nouvel élément <header> convient parfaitement à l’introduction d’un document. Tout comme l’élément <nav> qui remplace avantageusement <div id="menu">.

Le contenu principal et annexe

L’élément aside revêt le rôle de barre latérale, et l’élément section est appelé pour regrouper le contenu principal.

Le <footer>

Sans surprise l’élément footer est destiné au pied-de-page. Il peut accueillir des mentions spécifiques, un rappel du titre et du logo, des liens de navigation, etc.

Remarque

Finalement, il suffit de considérer qu’il s’agit d’un remplacement pragmatique de certains éléments, ayant eu un identifiant proche (id="header", id="navigation", id="content"…). Mais ce n’est qu’une impression. Se limiter à ce constat serait incomplet. L’usage de ces nouveaux éléments doit se faire à bon escient.

Les balises en détail

<section>

C’est la plus générique : elle est utilisée lorsqu’aucun autre élément de section n’a pu lui être préféré. Il ne faut cependant pas la confondre avec l’élément div qui n’a aucune valeur sémantique. Les deux ne sont pas interchangeables. La section regroupe un ensemble de contenu d’une même thématique, ou bien un ensemble d’éléments offrant une fonctionnalité spécifique dans une application web.

Pour résumer, on utilise l’élément <section> généralement quand :

  • Ce n’est pas une balise employée uniquement pour styler un élément voire plusieurs éléments
  • D’autres éléments de section ne sont pas appropriées (article, aside ou nav)
  • Il contient naturellement un titre d’introduction
<section>
    <h1>Articles</h1>
 
    <article>
        ...
    </article>
</section>

Documentation sur l’élément <section>

<article>

L’élément <article> est une spécialisation de section autosuffisante, possédant une plus forte valeur sémantique. Il vise à baliser des blocs de contenu utiles que l’on pourrait extraire du document tout en conservant leur sens et leurs informations. Pour déterminer si son usage est approprié, il faut se demander si son contenu pourrait être réutilisable tel quel pour de la syndication (par exemple en le reprenant dans un flux RSS ou en le copiant-collant dans un e-mail). Il est fréquent qu’il soit présent au côté d’autres frères dans un même document.

Des éléments <article> dans un parent <article> sont censés représenter des blocs de commentaires relatifs à cet élément parent.

Dans le cadre d’un site axé sur le cinéma, on pourra se servir d'<article> pour les fiches d’identité de chaque film, pour les biographies des acteurs, pour les produits à acheter, pour chaque actualité ou encore pour chaque contribution d’un utilisateur.

<article>
    <h1>Titre de l'article</h1>
    <p>Contenu de l'article</p>
</article>

Documentation sur l’élément <article>

<aside>

L’élément aside est destiné au contenu indirectement lié à l’article lui-même : il représente ce qui l’entoure, de façon annexe. Par exemple, on pourra s’en servir pour proposer la définition d’un terme, une biographie de l’auteur de l’article, un glossaire, préciser des sources, une liste d’articles en relation… aside n’est donc pas forcément dédié au seul usage d’une barre de contenu latérale.

<aside>
    <h4>Sources de l'article</h4>
    <ul>
        <li><a href="#">Lien 1</a></li>
        <li><a href="#">Lien 2</a></li>
        <li><a href="#">Lien 3</a></li>
    </ul>
</aside>

Documentation sur l’élément <aside>

<header>

L’élément <header> représente l’en-tête d’une section (section, article...) ou d’une page entière. Il peut contenir un logo, un ou plusieurs titres, d’autres informations d’introduction, une navigation, un formulaire de recherche général.

<article>
    <header>
        <h1>Titre de l'article</h1>
        <p>Auteur : bidule</p>
    </header>
 
    <p>Contenu de l'article</p>
</article>

Documentation sur l’élément <header>

<footer>

L’élément footer représente le pied de page, ou bien la conclusion d’une section. On y place des informations concernant l’auteur, des mentions légales, une navigation ou une pagination (en combinaison avec <nav>), un logo de rappel, des coordonnées, des dates de publication.

<article>
    ...
    <footer>
        <p>
            Posté par Simon, le 
            <time datetime="2012-02-02">2 février 2012</time>
        </p>
    </footer>
</article>

Documentation sur l’élément <footer>

<nav>

L’élément <nav> est une section de liens de navigation. On peut l’utiliser pour la navigation principale, mais également pour d’autres parties du document devant lister des liens de navigation interne.

<nav>
    <ul>
        <li><a href="index.html">Page d'accueil</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Documentation sur l’élément <nav>

Conclusion

HTML5 dispose d’éléments bien pensés pour un meilleur balisage sémantique de l’information. Le plus difficile n’est pas d’écrire ces nouvelles balises, mais bien de comprendre leur usage. Les confusions qui peuvent survenir (section dans article ou vice-versa par exemple) risquent de créer de longs débats quant à leur emploi : il faudra être vigilant.