Les langages du web comme HTML et CSS sont structurés autour de concepts qui n’ont pas forcément de rapport avec la manière dont ils seront utilisés. Les concepteurs ne sont pas les auteurs ; il appartient à ces derniers de tâtonner puis d’en parler avec leurs voisins pour connaitre les bonnes pratiques du jour. Les spécifications sont très utiles pour comprendre la nature des balises HTML et des propriétés CSS mais ne suffisent pas pour réaliser un site Internet. Et pour cause : il n’existe pas de recette toute faite. Les ingrédients (les contenus) sont uniques et demandent un traitement graphique et un marquage HTML particulier.
Toutefois, on ne peut pas ne pas constater que les sites Web partagent dans leur grande majorité les éléments suivants :
- En-tête de page (header),
- Une ou plusieurs barres latérales (aside),
- Zone de contenu (article) à droite, à gauche ou au milieu,
- Pied de page (footer) généralement situé en bas de page.
La plupart des tutoriels que l’on trouve sur le web reprennent un découpage par thématique : après les bases concernant l’insertion de la balise style, on attaque généralement par la mise en forme du texte, les listes, les images, les bordures, le modèle de boite, le positionnement, etc. C’est le découpage proposé par les spécifications du W3C et la majorité des tutoriels CSS qui permet de retrouver rapidement une propriété. Il s’agit avant tout de servir de référence… mais a-t-on jamais appris à rédiger des phrases avec un dictionnaire ?
J’évoque souvent le potentiel didactique des frameworks CSS :
- Le Reset CSS (reset.css) permet de faire le point sur les balises HTML les plus utilisées,
- Le fichier typographie (typography.css) redéfinit le comportement des balises et permet d’acquérir un solide vocabulaire CSS,
- Le système de grille (grid.css) propose les éléments fondamentaux du positionnement en quelques déclarations,
- La prise en compte des derniers de la classe (ie6, ie7 et bientôt IE8) permet d’aborder la notion de compatibilité cross-browser.
→ Lectures complémentaires conseillées :
- Faites votre choix parmi plus de 30 frameworks CSS,
- Lire Frameworks CSS + Reset CSS : design from scratch.
A côté des frameworks on trouve un grand nombre de proposition de feuilles de style prenant en compte une grande partie des balises HTML sans pour autant inciter à l’utilisation d’un reset CSS ou d’un système de grille de mise en pages. Ces feuilles de style de base ont souvent été longuement pensées par leur auteur et les choix effectués nous éclairent sur les subtilités des CSS.
→ Parmi les «kits de démarrage» existants, je trouve souvent mon bonheur dans :
- base.css de Thierry Koblentz (cf. Implementing a starter CSS file rather than using a reset styles sheet),
- no-reset de Florent Verschelde (cf. A Simple Base Stylesheet),
- style.css de HTML5 Boilerplate.
L’idéal étant bien sûr de prendre ça et là ce dont on a besoin pour se constituer son propre fichier CSS tout terrain !
Salut,
Je vais faire le mec chiant, mais la balise qui contient le contenu (tiens, j’ai cru voir Lapalisse), ne peut pas être la balise article, qui sémantiquement, se définit comme suit : « The tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site. » (w3c).
J’ai aussitôt vérifié s’il n’existait pas une alternative crédible, mais la plus sensée reste une triste
<
div id= »content »>. Autant dire rien !
Je ne sais pas pourquoi avoir laissé un tel trou au milieu d’un océan de sémantique, mais les voies du w3c sont décidément impénétrables…