12 points essentiels pour construire une base HTML solide

13 juillet 2009
Tags : , , ,
8 commentaires

Actuellement, l’article le plus consulté sur Kiwano concerne les « 10 crimes sur les balises HTML que vous ne devriez plus commettre« . Cet article mettait en évidence certaines des erreurs HTML les plus courantes et proposait les solutions pour les corriger.
Mais même en connaissant les normes et les erreurs à ne pas commettre vous vous posez des questions sur la construction d’un code efficace.
Nous vous proposons donc en 12 étapes, notre définition d’une base HTML solide qui vous permettra de poser les fondations d’un code valide, évolutif et plus facilement maintenable.


Mise à jour du 29 mai 2012 :
Pour construire une base HTML5 solide, vous pouvez consulter l’article initutlé « Intégration HTML5 CSS3 : conseils et exemple à télécharger pour bien démarrer votre site ».

L’idée de rédiger cet article nous est venue suite à la lecture de What Beautiful HTML Code Looks Like.

1. Un DOCTYPE correct

Le DOCTYPE est la première balise HTML qui doit apparaitre dans votre code. Elle est importante pour la validation de votre code ainsi que pour indiquer aux moteurs des navigateurs Web comment rendre le site.
Voici le code pour utiliser un DOCTYPE XHTML 1.1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

2. Définir le Namespace et le langage par défaut

Les sites web XHTML doivent avoir un namespace et une langue par défaut. Sans la définition de cette langue par défaut, les lecteurs d’écran ne pourront pas savoir quel langage est utilisé dans la page. Ces éléments sont donc requis dans la construction d’un site valide.
Exemple :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

3. Une section HEAD complète

La section HEAD doit contenir dans l’ordre :

  • Un charset correctement défini
  • Le title doit être rempli (profitez en pour l’optimiser pour le référencement)
  • Une balise meta description résumant le contenu de la page
  • Un lien vers le favicon
  • Enfin, les liens vers les fichiers CSS utilisés par votre page

Il est important de positionner le charset avant le titre de votre page. Vous pourrez ainsi déclarer, par exemple, un charset UTF8 valide et visualiser correctement des titres contenant des accents.

Concernant les fichiers CSS, il est recommandé de lier les feuilles de styles avec la balise link (et ne pas utiliser la commande import) pour parralléliser les téléchargements des fichiers CSS.
Pour la compatibilité multi-navigateur et surtout pour gérer le navigateur Internet Explorer, nous utilisons les commentaires conditionnels pour charger des feuilles de styles qui surchargent les comportements non standards d’IE.
Voici un exemple de code pour le chargement des feuilles de style.

<link rel="stylesheet" href="Themes/Default/Style.css" type="text/css" media="screen" />
<!--[if gte IE 6 & lt IE 8]>
<link rel="stylesheet" href="Themes/Default/IE.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href="Themes/Default/IE6.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="Themes/Default/IE7.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="Themes/Default/IE8.css" type="text/css" media="screen" />
<![endif]-->

4. Un ID sur la balise BODY

Une astuce qui peut vous faciliter la vie. Un ID spécifique pour votre page vous permet de surcharger le style CSS par défaut. Par exemple, vous pouvez vouloir un style différent pour vos titres h2 sur la page d’accueil uniquemet. Dans ce cas le code CSS suivant vous permettra de gagner beaucoup de temps.

#home h2
{
	...
}

5. Un menu sémantique

Il est indispensable d’utiliser une liste non ordonnée pour définir le contenu de votre menu.

<ul id="nav">
	<li><a href="index.php">Home</a></li>
	<li><a href="about.php">About</a></li>
	<li><a href="contact.php">Contact</a></li>
</ul>

Vous optimisez ainsi les titres de rubriques dans votre référencement, vous permettez aux lecteurs comme ceux des téléphones portables de pouvoir les afficher dans un espace réduit et vous garantissez une plus grande évolutivité de l’affichage.

6. Un découpage des zones de la page respectant un standard de nommage

En regroupant les zones importantes de votre page dans des divisions (<div>), vous aurez moins recours aux ID et class pour formater votre page. Avec un découpage logique et méthodique des zones importantes, vous arriverez facilement à définir des styles ciblés et la personnalisation et la maintenance seront grandement facilitées.
Il n’existe malheureusement pas de standard de nommage pour les divisions principales mais on retrouve certaines similitudes à travers les pratiques et usages des intégrateurs.
Voici notre recommandation de nommage pour le zoning de la page:

  • #container : conteneur principal
  • #header : en tête
  • #search : recherche principale
  • #nav : navigation
  • #content : contenu
  • #footer : pied de page

7. Le contenu important en premier

Pour améliorer l’accessibilité et le référencement de votre site il est recommandé de placer le contenu important en premier. Si vous avez une colonne latérale qui contient des informations complémentaires à votre page il est préférable de n’avoir cette section qu’après le contenu principal de la page.

8. Utiliser un code standard

Essayez de respecter la norme XHTML en évitant les erreurs de syntaxes. Il faut fermer l’ensemble des balises, mettre une valeur (entre guillemets) pour l’ensemble des propriétés utilisées et coder les balises en minuscules. Vous pouvez valider le code HTML en vous aidant d’outils de validation intégrés comme le plugin Firefox HTML Validator.

Valid XHTML 1.1

9. Avoir une hiérarchie pour les titres

Utilisez les balises titres (balises hn) pour les titres contenus dans votre page. Essayez de respecter la hiérarchie des titres en partant d’un titre h1 jusqu’aux titres h6. Notre recommandation est de n’utiliser qu’un seul titre h1 correspondant au titre de la page.

10. Utiliser un codage sémantique

Utilisez au maximum les éléments HTML pour la sémantique qu’ils apportent. Ainsi vos acronymes et abbréviations devraient être déclarés grâce aux balises acronym et abbr. L’avantage est multiple puisqu’il vous permet un accès au style de tous les éléments de même type, de respecter l’accessibilité et d’optimiser le référencement.

<acronym title="Search Engine Optimization" lang="en">SEO</acronym> /* Cette déclaration permet d'ajouter l'expression Search Engine au contenu */

Pour les mises en exergues de vos textes vous pouvez également utiliser les éléments strong et em.

Pas de tableau de présentation

Il est bien sûr évident qu’il ne faut plus utiliser de tableau de présentation mais utiliser les blocs présents dans votre page pour positionner vos éléments dans la page.
Les tableaux doivent être réservés aux données tabulaires, ils n’ont pas la flexibilité ni l’optimisation des éléments de type bloc ou liste pour le rendu (cf. notre article : Afficher une liste HTML sous forme de tableau par CSS).

Pas de style inline

Il faut séparer le contenu de la mise en forme pour les pages de votre site. Votre HTML ne doit contenir que le contenu de la page, il faut donc réserver l’usage des styles uniquement aux feuilles de styles.
Vous faciliterez ainsi la maintenance du site pour la gestion du rendu et faciliterez le référencement en diminuant la proportion de code par rapport au rédactionnel.

Indiquer les changement de langue

Vous devez indiquer dans votre code source HTML les changements de langue par rapport à la langue définie dans l’en-tête de votre code. Ceci permet d’indiquer aux lecteurs d’écrans si ils doivent utiliser un accent différent pour un groupe de mots ou l’ensemble d’un paragraphe de votre page. Pour une meilleure compatibilité avec l’ensemble des lecteurs d’écrans, nous conseillons d’utiliser les attributs lang et xml:lang.
<strong lang="en" xml:lang="en">search engine result page</strong>

De la même manière, il est important d’indiquer clairement la langue d’un document pointé par un lien si cette langue est différente de la langue en cours. Pour ceci, vous devez utiliser l’attribut hreflang.
<a href="#" hreflang="en">un super document sur le référencement</a>

11. Avoir un code complet pour vos tableaux de données

Pour vos tableaux de données, un certain nombre d’éléments sont souvent oubliés. Rappellez vous : vos tableaux doivent contenir un caption, des section thead, tfoot et tbody séparées, utiliser des balises th si besoin et enfin vous devez définir les scope ou headers.
Voici un exemple de tableau correctement codé.

<table summary="Résumé des services proposés par Kiwano">
	<caption>Les services de Kiwano</caption>
	<thead>
	   <tr>
		<th scope="col">Solution</th>
		<th scope="col">Description</th>
	   </tr>
	</thead>
	<tbody>
	   <tr>
	  	<td>Référencement naturel Marseille</td>
		<td>Audit référencement et
                visibilité de votre site</td>
	   </tr>
	   <tr>
		<td>Formation</td>
		<td>HTML CSS ou Référencement</td>
	   </tr>
	</tbody>
</table>

12. Mettre des labels dans vos formulaires

L’élément label créé un lien virtuel entre le label et le champ de saisie associé. Le label permet de donner le focus au champ de saisie quand on clique sur le label. Ceci permet aussi de déclarer de façon explicite aux lecteurs d’écran le lien entre le label et son champ de saisie associé.
<label for="prenom">Prénom :</label>
<input type="text" id="prenom" />

N’hésitez pas à partager vos astuces ou conseils dans les commentaires.

Commentaires (8)

  1. Waaaaaaaaa faut éviter tous les Hacks.

    Tout les conseils sont bons, sauf cette partie. Car en général, y’a aucunement besoin d’utiliser des hacks en CSS.

    Faut vraiment que je songe à faire quelques petites astuces concernant les agencements pour que ça soit compatible sur tous les navigateurs sans se sortir les doigts du *u*.

    • Waaaaaaaaa aussi.

      Nous ne parlons pas de Hacks CSS dans notre article car nous pensons comme toi que les Hacks CSS c’est le mal :)
      Par contre, même en ayant un code CSS valide qui fonctionne parfaitement sur les navigateurs standards, il arrive (trop souvent) que le comportement d’Internet Explorer (surtout la version 6) soit déstabilisant et que la seule solution pour garder un code propre soit tout simplement de surcharger le style pour ce navigateur. Il suffit de vouloir définir les marges et les couleurs de fond des listes HTML pour se rendre compte de la difficulté.

      Dans ce cas nous conseillons d’utiliser les commentaires conditionnels ce qui permet de garder uniquement le code CSS valide et standard dans la feuille de style principale.

  2. Super intéressant cet article, pas étonnant qu’il soit le plus lu :) Je suis d’accord avec le principe de l’information conditionnel et le 7e point. Parfois lorsque le contenu est important et surtout intéressant voir encore mieux pertinent, il est utile de placer le menu après le contenu. Le résultat est parfois stupéfiant.

  3. Effectivement, je n’ai pas vu de texte à propos de cela.

    Ma seule vision des choses est pour un débutant qui tombe sur cette page et qui risque de s’imaginer que c’est conseillé voire obligatoire de rajouter des hacks pour que tout soit compatible correctement.

    Pour ce qui est des listes etc, je n’ai jamais vraiment rencontrer de problème concernant IE6. Le seul réel problème qu’on peut avoir concernant ce navigateur ancestrale, c’est au niveau des hover ou seul les hover sur les liens sont gérés ce qui est parfois pénible au niveau intégration.

    Pour le reste, cela est un très bon article.

  4. Vous parlez de base HTML alors que l’article traite d’XHTML :/

    De plus conseiller un doctype XHTML 1.1 n’est pas des plus logique bien qu’il soit maintenant possible de servir du XHTML 1.1 en text/html, pourquoi ne pas directement servir du HTML ? Il pourrait être intéressant pour les visiteurs qui débutent de préciser à quoi correspond un doctype et quels sont les différents qui existent.

    Je ne suis pas tout à fait d’accord avec le point 5, s’il est vrai qu’une liste non ordonnée est tout à fait adaptée pour le balises des menu, cela n’as rien d’indispensable.

    Vous ne développez pas assez le point 7, mais par contenu moins important, je suppose que vous faites allusion aux menux. D’après les explications d’un utilisateur de lecteur d’écran, il vaut mieux éviter de mettre le contenu avant le menu. Ce serait peut-être mieux, mais la grande majorité des site adoptant un schéma menu -> contenu, ce schéma est devenu une habitude qui lorsqu’on ne la rencontre pas, perturbe.

    Pour le point 9, vous devriez rajouter texto, qu’il ne faut pas faire de saut dans cette hiérarchie (même si c’est plus que sous-entendu dans votre explication) ou utiliser de hn en fonction de leur rendu graphique (ce qui arrive encore très souvent v_v).

    Très bonne initiative que cet article.

  5. Bonjour,

    Juste une petite remarque qui ne remet pas en cause le contenu de l’article mais je la remarque souvent :

    5. Un menu sémantique

    Si on parle de sémantique pourquoi utiliser une balise <ul>et non une balise <menu> ?

    Je pense que la balise <menu> est pour le coup plus sémantique q’une <ul>.

    Cordialement,
    Kaimite

    • Bonsoir Kaimite,

      C’est une bonne remarque mais la balise <menu> est dépréciée par le W3C. Cela signifie qu’elle risque de ne plus fonctionner avec les futurs navigateurs, voilà pourquoi nous ne conseillons pas son usage.
      De fait un menu peut être considéré comme une liste dont le rôle dans le temps peut être modifié pour devenir autre chose qu’un menu principal comme un menu secondaire … ou une simple liste.

  6. Alors autant pour moi…

    Je ne pensais pas qu’elle était dépréciée.

    A l’heure pour le HTML5 va intégrer de nouvelles balises comme article, header, footer je me demande pourquoi déprécier les balises menu !

    Mais bon, en tout cas merci pour l’info :)

    Cordialement,
    Kaimite

Laisser un commentaire

* champs obligatoires