La disparition des tableaux (suite) : le XHTML

Une nouvelle façon de créer le code de ses pages Web est d’utiliser le XHTML avec les CSS (feuilles de style) pour obtenir une interface performante et compatible.
Le principe de cette méthode est simple : il consiste à utiliser les propriétés naturelles des balises !

ex : pour un titre, pas besoin de tr, td et tout le tralala, un h1 ou h2 suffira ! et il sera facile de le personnaliser avec la CSS !

1.1 - Les avantages du XHTML/CSS

Les avantages :
— Compatibilité multi-plate-forme : accessibilité (OS, navigateurs, palm, wap, personnes mal voyantes…) + pérennité
— Modification facile et rapide de la mise en page du site complet
— Allègement du code HTML en migrant toutes les balises de mise en forme dans la CSS
— Création d’une CSS dédiée à l’impression qui sera prise en charge automatiquement lors de l’impression dans le navigateur
— Découpage du code en blocs logiques faciles à déplacer et à réutiliser

Les inconvénients :
— Peu d’éditeurs HTML les gèrent correctement en temps réel (modifications de la CSS visibles aussitôt dans l’éditeur WYSIWYG)
— Les anciens navigateurs (< IE5 et Netscape 4) ne prennent pas en charge les CSS2

1.2 - Les avantages des tableaux

Les avantages des tableaux :
— La mise en forme de données tabulaires ! (ex : résultats comptables, tableau de prix etc…)
— La mise en colonne facilitée mais rigide

Les inconvénients des tableaux :
— Code HTML lourd et complexe pour un non-initié
— Temps de prise en main assez long même pour un initié
— Evolutions longues et compliquées à mettre en place sur tout le site
— Problème de mise en page suivant les médias sur lesquels sont lus les pages

Le XHTML est le langage permettant de décrire le contenu d’une page Web. Les CSS (feuilles de style) permettent de mettre en forme ce contenu.

2.1.1 - Le XHTML : eXtensible HyperText Markup Language

> L’entete du fichier HTML doit contenir ces 3 lignes :

Pour plus d’infos sur le code de l’entête, cliquez ici

2.1.2 - Les balises

La syntaxe exacte

— tout en minuscule
— toute balise ouvrante a sa balise fermante
— valeurs des attributs entre guillemets
— écrire toutes les valeurs !
ex : <option value=”blabla” selected= “selected”>texte</option>

Les types de balises

Ce qu’elles font et comment les utiliser.
La liste présentée n’est pas exhaustive. Pour la liste complète et le détail de chaque balise, cliquez ici

Les balises en bloc

Les balises en bloc s’affichent par défaut les unes en-dessous des autres car elles génèrent un saut de ligne avant et après elles.
Une balise en bloc peut contenir une ou plusieurs balises en bloc et en ligne.

- Div : Pour ordonner le contenu en blocs logiques
- h1 à h6 : sert aux titres
- p : contient le texte
- les listes : ul li et dl dt dd : pour créer un menu (horizontal ou vertical) (pour plus d’infos, cliquez ici )
- les tableaux : table tr th td : Pour présenter des données tabulaires !
- blockquote : pour les citations. Par défaut, le texte aura des retraits à gauche et à droite.
- pre : pour le texte préformaté
- address : généralement, sert pour le nom de l’auteur ou le copyright. Elle met le texte en italique.
- < br/ > : permet d’insérer un retour à la ligne. cet élément n’a pas de balise fermante, c’est pour quoi il s’écrit avec un / à la fin, tout comme img et hr. Ce sont les 3 balises qui n’ont pas de balise fermante.

Les balises en ligne

Les balises en ligne s’affichent par défaut les unes à côté des autres.
Une balise en ligne ne peut contenir que des balises en ligne.

- span : Formate le texte sur de petites portions. Peut remplacer div dans certains cas.
- a : Permet de faire un lien
- img : pour les images avec un attribut alt obligatoire pour faciliter la visibilité des sites par les mal-voyants. Mettre un alt explicite…
- em strong : emphase pour mettre un élément en évidence dans un texte, par défaut, le texte sera en italique. Si on souhaite le faire apparaître en gras, utiliser strong au lieu de em
- cite : pour les citations. Par défaut, le texte est affiché en italique
- code : pour le code. Par défaut, le texte est affiché avec une police à espacement fixe, généralement Courrier.
- abbr acronym : pour les abréviations et les acronymes
- del : pour signaler du texte effacé ou obsolète. Par défaut, le texte est affiché barré.

Pour résumer, il suffit d’utiliser les bonnes balises aux bons endroits et on obtiendra ainsi une interface accessible, évolutive et performante.

Les “nouveautés” du XHTML/CSS :
L’abandon de la prolifération des balises table
La suppression de tout élément de mise en forme du code XHTML
L’utilisation de div ou span comme ensemble fonctionnel
L’utilisation de balises peu communes auparavant : h1 à 6, p, ul/li, …
La complexification de la CSS et l’augmentation de son poids (mais elle est chargée en cache une fois pour toutes)
La possibilité de modifier le design facilement

Les points forts du XHTML/CSS :
L’amélioration de la compatibilité multi-plate-forme (palm, mini-PC, wap etc…)
L’amélioration de l’accessibilité entre OS et navigateurs
L’amélioration de la pérennité du code
Meilleure structure du code : découpage en blocs logiques
Création d’une CSS dédiée à l’impression
La suppression de certains comportements (auparavant en javascript) qui seront gérés par la CSS : le rollover, l’impression.
Un meilleur référencement dans les moteurs de recherche
L’utilisation de la technologie XML
La séparation du code des éléments de mise en forme (relayés dans la CSS)

Pour compléter cet article, lire aussi l’article dans la rubrique CSS