HTML, CSS : Revenons aux bases

Depuis bientôt 15 ans que je baigne dans le monde merveilleux du web, j'ai vu passer un grand nombre d'évolutions majeures et même de petites révolutions. Nous sommes ainsi passé de pages essentiellement textuelles, faute de bande passante pour diffuser des images, à des interfaces riches (RIA) ou au déploiement de véritable applications web.

Force est de constater que cette profusion de nouvelles fonctionnalités et de nouvelles technologies a pu faire oublier aux développeurs la base de toute page web : le HTML. Sans doute considéré comme trop trivial par beaucoup d'informaticiens, le HTML se retrouve bien souvent être le parent pauvre des applications web.

Paradoxalement, alors que les évolutions du web n'ont jamais été aussi présentes, la qualité du codage HTML revêt aujourd'hui une importance toute particulière dans plusieurs domaines de premier ordre :

• La compatibilité entre navigateur : jusqu'à il y a quelques mois, les choses étaient simple, un navigateur trustait 80 ou 90 % des parts de marché, il pouvait donc être tentant de faire l'impasse sur la compatibilité du code. Aujourd'hui 2 navigateurs se partagent le marché à part égale ; la compatibilité est donc indispensable.
  
• La maintenance des applications : Une application développée dans le respects des standards sépare les données (le html) de la présentation (les css) et utilise les balises html juste. Ces pratiques fournissent un code plus court, plus lisible et sur lequel graphistes et développeurs peuvent travailler séparément.
  
• Le référencement naturel : c'est un enjeux majeur de la visibilité d'un site. Une des conditions d'un bon référencement naturel est un code html respectueux des standards et en particulier du web sémantique.

Le premier point sur lequel porter son attention est le le Doctype. Ce point nécessiterait à lui seul un article entier. Pour faire court, le doctype indique au navigateur la manière de lire et d'interpréter lapage HTML. En l'absence de définition, le navigateur passe en mode quirks, c'est à dire qu'il interprête la page comme il peu. Ce type d'interprétation a 2 conséquences : des différences d'interprétation et donc de rendu entre différents navigateurs et un travail d'interprétation plus difficile pour le navigateur (demandant donc plus de ressources).

Il existe pas mois de 6 doctype différents :

• 2 versions : HTML 4.01 et XHTML 1.0
  
• 3 types : transitional, frameset, strict

Dans le cadre de la création d'un site il est recommandé d'utiliser XHTML 1.0 Strict. Ce doctype est plus le rigoureux mais celui qui donnera les meilleures résultats. Il y a au minimum 2 règles à garder présente à l'esprit pour ce doctype : il s'agit de XML donc toutes les balises doivent être fermée (un <BR> par exemple n'est pas conforme et devra être écrit <br />) et la présentation doit être assurée par en CSS et non dans le HTML.

Pour tout savoir sur le doctype vous pouvez consulter cet excellent article sur Alsacréation.

Le second point important concerne le web sémantique. Il s'agit notament d'utiliser chaque balise html pour l'usage dans lequel elle a été conçue. Un titre de page par exemple ne doit pas être défini par un <div class="titre"> mais par un <h1>. Un tableau sert à affichées des données et en aucun cas à assurer une mise en page. La bonne utilisation du html et du css rendra votre code plus facile à comprendre par tous les "utilisaeurs" : navigateur, moteur de recherche, logiciel vocaux et également plus clair donc plus facile à maintenir.

Vous trouverez plus d'information sur le web sémantique sur Open Web.

Pour valider vos pages, vous pouvez utiliser les outils du W3C pour les pages html ou les css.