Ce qu'il faut et ne pas faire en CSS : Les balises

| Alen Grakalic | Alban Lelasseux |

Cet article est la traduction de l'article : CSS do's and dont's Part 2- Markup. Retrouvez toutes les traductions de CSS Globe disponibles sur cssglobe.developpez.com.

CSS Globe poursuit sa série de petits articles appelés "Ce qu'il faut et ne pas faire en CSS". Ces séries ont pour but de pointer les mauvaises habitudes lorsqu'on utilise le CSS et en général les standards du Web. On tentera de répondre aux questions les plus fréquentes relatives au CSS. Cette deuxième partie portera sur les balises.

Commentez

- Titre : Ce qu'il faut et ne pas faire en CSS : Les balises

- Auteurs : Alen Grakalic, Alban Lelasseux

- Parution : 7 mai 2009

- Licence : Copyright ® 07/05/2009 CSS Globe. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Introduction

- Structurer un document

- Balises structurelles et de présentation

- Le choix des balises

- La validation

- Résumé

Introduction

Si vous voulez vraiment entrer dans les standards Web, vous découvrirez bientôt que la chose la plus importante est le codage. Un code correct, solide et bien structuré. Le HTML, XHTML, les balises, les attributs, la structure...C'est tout ce dont il s'agit réellement. Nous sommes attachés aux termes des standards Web et CSS. Le terme CSS est presque devenu un synonyme de standard. J'ai souvent utilisé le terme "CSS designer" ou "CSS ci", "CSS ça" pour expliquer rapidement les méthodes et l'approche dont je parlais. Mais la vérité est que le CSS ne signifierait rien si votre structure de codage comporte une erreur. Le codage est le roi.

Structurer un document

La clé des documents conformes aux standards Web est leur structure. Elle doit être significative et logique. Le document devrait suivre un certain flux, il doit être lisible et compréhensible sans style CSS.

La plupart des documents ont différentes sections (navigation, contenu principal, contenu latéral, le droit d'auteur, zone de contact, etc.). Un utilisateur, humain ou non humain, devrait être capable de comprendre ces sections comme des sections importantes du premier regard.

La section la plus importante doit être aussi élevée que possible dans le flux, mais l'importance de certaines sections est également définie par la position des balises d'en-tête (h1, h2, h3, h4, h5, h6). En un sens les titres définissent la structure des documents.

Balises structurelles et de présentation

Dans le monde des standards Web, on entend souvent parler d'un syntagme "séparant la présentation du contenu". Qu'est-ce que cela signifie ? Fondamentalement, cela signifie que les éléments HTML ne devraient exister que pour la présentation. Vous devriez éviter d'avoir des div vident pour les ombres ou autres effets. Laissez aux balises leur sens structurel afin qu'elle existe en tant que partie logique d'un document.

Le choix des balises

Il existe une multitude de possiblité dans le choix des balises. Ne comptez pas uniquement sur les div pour faire office de conteneur. Parfois, un simple paragraphe, contenant quelques span ou em, est suffisant pour obtenir ce que vous voulez. Nous utilisons tous des listes numérotées ou non, mais nous avons aussi un autre type de listes qu'on n'utilise pas assez : les listes de définitions. Les dl sont idéales dans de nombreux cas à cause de leur structure à "2 dimensions". D'ailleurs, pourquoi nous n'utilisons pas les balises address pour les informations de contact que nous plaçons au bas de la page (dans le "footer") ? Faîtes votre choix !

La validation

La validation a son importance dans l'analyse de votre code. Mais la validation seule ne signifie pas que votre document est construit selon les normes. Vous pouvez avoir l'ensemble du document fait de div avec les noms de classes, ce qui permettrait de valider le code, mais serait-ce utile ? Pas à tout le monde et certainement pas aux moteurs de recherche.

Résumé

À faire

- Accorder une grande attention à la structure du document. C'est la chose la plus importante ;

- Penser à la sémantique, utiliser les balises dans un ordre significatif, créez un "flux" HTML logique ;

- Utiliser une variété de balises possibles, choisissez la plus appropriée à vos besoins et surtout au type de contenu ;

- Utiliser une variété de balise, choisissez celle appropriée pour un certain type de contenu ;

- Penser à l'aspect utile avant les effets de style ;

- Essayez d'utiliser aussi peu d'éléments HTML que possible pour le même effet, vous vous sentirez plus à l'aise ;

- Faire des compromis en terme de design. Parfois, il est préférable de ne pas utiliser certains effets et d'avoir un code propre.

À ne pas faire

- Penser que si quelque chose est valide il est automatiquement conforme aux standards Web ;

- Sur-exploiter certaines balises, comme les div ;

- Utiliser des balises de présentation ;

- Ne pas éviter d'utiliser certains éléments en pensant qu'ils ne sont pas des "standards web" (oui, je veux parler des tableaux) ;

- Faire des compromis en termes de codage.