Respecter la sémantique

Créer des titres

Un titre n'est pas qu'une phrase écrite en gros et en gras. Un titre doit être visible aussi bien à l'affichage que dans le code. Ainsi le code suivant ne donne que l'aparence d'un titre, mais ce n'en est pas un :

<p style="font-size:25pt;font-weight:bold">Titre</p>

Bien sûr visuellement parlant on aura vraiment l'impression d'avoir un titre, mais dans votre code ce ne sera qu'une simple phrase mise en forme. Il existe 6 balises pour définir logiquement les titres, servez-vous en ! Voici une série de titres :

<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>

Leur utilisation est très simple : plus le chiffre est proche de 1 et plus le titre est important (hierarchiquement parlant). Tous les navigateurs et logiciels pourront comprendre que Titre 4 est un titre de niveau 4. Maintenant que nous avons crée un titre il faut créer un paragraphe.

Créer des paragraphes

Il en va de même pour les paragraphes. On retrouve bien souvent ce genre d'horreur :

Ceci est un paragraphe
<br />
Ceci est une phrase à la ligne
<br />
<br />
J'ai changé de paragraphe
<br />
<br />
<br />
<br />
Ah tiens ici je fais un grand espace.

Où voyez-vous un paragraphe ? Nulle part, il n'y en a aucun. Un paragraphe se définit par la balise <p>. On peut bien sûr faire des sauts de ligne dans un paragraphe, je vais vous le prouver :
Je suis à la ligne mais toujours dans le même paragraphe :o)

Maintenant, par contre, j'ai changé de paragraphe. L'écart entre le paragraphe du dessus n'est pas fait avec des <br />. Voici comment il faut procéder :

<p>Ceci est un paragraphe
<br />
Ceci est une phrase à la ligne</p>
<p>J'ai changé de paragraphe</p>

La balise <p> introduit donc un nouveau paragraphe à chaque fois. En plus d'être plus lisible le code est plus léger.

Créer une liste

Voici comment une grande partie des Webmasters créent une liste :

- Elément 1
<br />
- Elément 2
<br />
- Elément 3

Si le validateur W3 analyse ce code il vous dira qu'il est parfaitement valide. La raison est simple : aucune balise inexistante ni aucun attribut interdit n'ont été utilisés. De plus, visuellement parlant, j'ai bien une liste... mais en réalité vous n'avez que l'aperçu visuel d'une liste. Pour un robot (moteur de recherche, logiciel de lecture pour les handicapés, navigateurs texte) ce n'est pas une liste mais trois phrases avec un retour à la ligne.

Si j'avais voulu faire une vraie liste, logique, il aurait suffit d'utiliser les balises qui servent à la définir. Voici une vraie liste valide et parfaitement logique :

<ul>
 <li>Elément 1</li>
 <li>Elément 2</li>
 <li>Elément 3</li>
</ul>

Ce code génère une liste qui sera interprétée comme tel par tous les navigateurs et tous les robots / logiciels.

Insérer une image

Vous voulez maintenant insérer une image sur votre page ? Très bien. La majorité des Webmasters procèderont ainsi :

<img src="./image.png">

Encore une fois, c'est loin d'être correct. Mais vous avez sûrement remarqué que cette fois-ci le validateur W3 vous a indiqué deux erreurs. Dans ce code il manque en effet l'attribut 'alt', obligatoire pour les images, ainsi que la fermeture de la balise.
Pour ce qui est de l'attribut 'alt', vous pouvez vous rendre sur la page référencement dans la partie 'Correctement remplir la balise <img>'.
Pour ce qui est de la fermeture de la balise on se retrouve face à un problème : la balise <img> est unique. Comment la fermer ? Surtout que ceci est totalement incorrect :

<img src="./image.png" alt="Un cheval"></img>

C'est tout simple, il suffit de faire ceci :

<img src="./image.png" alt="Un cheval" />

Ainsi la balise est ouverte et fermée. Il en va de même pour toutes les balises uniques comme <br />, <META />, etc.

Mettre l'accent sur du texte

Imaginons maintenant que vous ayez envie de mettre l'accent, montrer l'importance d'un passage du texte comme ceci. Non il ne faut pas utiliser la balise <b>. En effet cette dernière a pour but de "mettre en gras" et c'est tout. Vous l'aurez compris cette balise est destinée aux seuls navigateurs graphiques. Pour mettre l'accent sur un passage il faut employer la balise <strong>. En plus d'afficher le texte en gras sur la plus grande majorité des navigateurs, cette balise de structure logique du texte est comprise par les navigateurs texte, les robots et logiciels. Voici donc un petit exemple :

<p>Ceci est du texte, et
<strong>ceci est important</strong></p>

Ainsi n'importe quel navigateur ou robot comprendra que ce texte est important, par ce que votre code est logique. Par exemple un logiciel de lecture pour les handicapés adoptera une intonation forte lors du passage encadré par <strong>

Imprimer cette page | Ajouter aux favoris
Revenir en haut de la page

Besoin d'aide ? Une question ?

N'hésitez pas à venir chercher de l'aide ou des explications spécifiques sur le forum En1heure.
Nous ferons notre possible pour vous aider au plus vite.