4. Le corps d'un document HTML
C'est à l'intérieur de l'élément 'body' qu'on trouvera le contenu proprement dit du document. A l'origine, HTML était conçue pour la structuration de contenue principalement textuel. Comme l'explique Tim Berners Lee dans Weaving the Web, le but était d'avoir un 'langage hypertexte' simple - pour pouvoir créer des documents avec des hyperliens, des fichiers de documentation et d'aide technique, notules de réunions, des courtes messages - inspiré par le SGML...
Ainsi l'HTML classique contient un ensemble de balises structurelles (marqueurs de structure) : pour indiquer des titres (de niveaux divers - paragraphe, sous-paragraphe, sous-sous-paragraphe ... ( <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, avec 'h' comme dans l'anglais 'heading') ; des balises pour indiquer des listes ( <ul>, <ol>, 'ol' comme 'ordered list' [liste numérotée], et 'ul' comme 'unordered list' [liste à puces], chaque paire contenant un nombre de balises <li>, comme 'list-item' ; on distingue comme troisième type de liste la 'liste de définitions' <dl> , permettant de créer des listes possédant des paires d'un terme <dt> et sa définition <dd> ), des balises pour indiquer un paragraphe ( <p> ), une citation ( <blockquote> ), un tableau de données ( <table> ), un bloc regroupant plusieurs contenus ( <div>, 'div' comme 'division' ) ...
Par défaut les navigateurs web affichent les 'headings' en gras, en une taille dé de h1 à h6, comme ci-dessous :
Voici du <h1> ...
Voici du <h3> ...
Voici du <h5> ...
A cause de ces présentation 'par défaut', on pourrait prendre
la mauvaise habitude d'utiliser les balises <h1>, pas forcément
pour les titres principaux d'un texte, mais plutôt pour 'texte en
gras et plus grand'. De même pour <h2>, <h3> ... Dans
ces cas on parle d'une utilisation non-sémantique des
balises (X)HTML.
(Observons qu'une utilisation sémantique des balises permet
à un logiciel, par exemple, d'extraire un sommaire d'un article.
Observons également, que la 'sémantique' des balises HTML
est très limitée. HTML
a été développé plutôt comme outil pour
des publications scientifiques, qui, en général, sont composées
d'un petit ensemble d'éléments structurelles, commes les
titres, sous-titres, paragraphes, tableaux .... L'utilisation de HTML
comme language de balisage généraliste, évidemment,
n'était pas prévue par Berners-Lee. Une utilisation 'universelle'
du langage de balissage extensible , le XML, pourrait devenir un des pilliers
d'un futur web véritablement 'sémantique.)
les images
Apart du texte, le plupart des pages web contient des images. C'était Mosaïc, le premier navigateur web 'grand public' (developpé par Marc Andreessen et Eric Bina au NCSA, à l'université d'Illinois aux Etats Unis et mis au disposition par téléchargement gratuit à partir d'avril 1993) qui - avec la balise 'img' - permettait l'insertion d'images dans le texte. Tim Berners-Lee, entre autres, pensait qu'insertion d'images dans les pages web n'était pas souhaitable et 'trop frivole'. Mais la balise 'img' était surement une des facteurs déterminants dans le succès énorme de Mosaïc, et la percée soudaine et développement explosif du web en tant que médium de masse. 'img' devenait incontournable, et faisait aussitôt parti de la définition officielle de HTML.
Voici un exemple de code HTML, permettant d'insérer une image :
<img src="../img/Andreessen_Time.jpg" alt="Marc Andreessen"
title="Couverture de Times Magazine, 19.02.1996" width="200" height="263">
L'image est encore un exemple d'un élément vide : il n'y pas de balise fermante.
Vous voyez à gauche la photo de Marc Andreessen sur la couverture
de l'édition de Time
Magazine de 19 février 1996. Dans la balise correspondante,
on utilise l'attribut 'src' (source) pour indiquer où
se trouve le fichier image: la valeur de 'src' est un uri, qui
peut-être absolu ou - comme dans l'exemple - rélatif.
L'attribut 'alt' (alternative) est un attribut
d'accessibilité : on l'utilise pour fournir une description
textuelle de (la fonction de) l'image. La valeur de l'attribut 'alt' s'affiche
au lieu de l'image si celle-ci ne peut pas être téléchargé.
(Cliquez ici
pour vérifier le fontionemment de l'attribut 'alt'; et ici
pour re-afficher l'image ... En effet, le premier clique active une
instruction javascript,
qui remplace la valeur de l'attribut 'src' de l'image avec le chemin vers
une image non-existante; le deuxième clique restore l'ancienne
valeur.) Pour des visiteurs malvoyants utilisant des outils alternatifs
comme un synthétiseur vocale pour consulter des sites web, ainsi
que pour les robots des moteurs de recherche et d'autre outils automatiques
de référencement, la valeur de 'alt' peut assurer qu'ils
ne ratent pas les informations importantes qui sont éventuellement
fournis par l'image. L'attribut 'alt' est un attribut obligatoire.
Son absence rend la page non-valide.
On utilise l'attribut 'title' pour fournir des informations supplémentaires
sur l'image qui ne figurent pas directement dans le texte, par exemple
le nom du photograph ou la date de prise de la photo. Ces infos s'affichent
dans un info-bulle si on survole l'image avec la souris.
Les attributs 'width' (largeur) et 'height' (hauteur)
indiquent les dimensions d'affichage de l'image (en pixels),
ce qui ne sont pas forcément les dimensions du fichier source:
on peut utiliser ces attributs pour rédimensioner un image.
Il est déconseillé d'utiliser ces attributs pour diminuer
la taille d'un très grand image, car c'est toujours le fichier
originale qui doit être téléchargé. Il n'est
pas obligatoire, mais toutefois fortément conseillé de toujours
fournir les valeurs de ces attributs de dimension, méme si ce sont
ceux du fichier source. Les valeurs de 'width' et 'height' permettent
un navigateur web de réserver la place nécessaire pour une
image, aussi si l'image n'est pas encore ou ne peut pas être téléchargé.
Ce qui rend possible une affichage plus efficace de la page web, et évite
la perturbation de la mise en page dans le cas ou l'image pour une raison
ou autre ne s'affiche pas.