fastclemmy.com

Ce log est un article en gestation qui a pour but de clarifier un peu les choses entre XHTML, CSS, sémantique, contruction par blocs, bref tout un tas de notions nouvelles pour les concepteurs web qui se cotoient et souvent se mélangent. Bien sûr incomplet pour le moment, il a vocation à être modifié/repris/amélioré et qui sait peut-être publié à terme dans une tribune plus grand public ?

Tous vos commentaires en bas de log sont les bienvenus.

Sommaire

  1. Ma page est-elle sémantique ?
  2. Ma page est-elle valide ?
  3. Ma page est-elle accessible ?
  4. Ma page est-elle "navigo-dégradable" ?

Introduction

La conception de pages web avec XHTML et CSS commence à faire parler d'elle : de plus en plus de (grands) sites adoptent cette nouvelle façon de faire : Macromedia.com, Espn.com, Wired.com, entre autres. Ce changement apporte son lot de nouveaux termes techniques qui peuvent perdre le néophyte : sémantique, validation, doctype, accessibilité, dégradabilité, etc. Il faut bien comprendre que la conception par blocs (par opposition avec la mise en page à base de tableaux) recouvre tous ces aspects de la conception web. Il s'agit de concept tous différents mais connexes : une page web bien faite doit répondre à tous ces critères.

Ce grand questionnaire est destiné à vous donner les clés pour appréhender ces concepts et à chaque page que vous produirez, vous pourrez vous posez chacune des questions suivantes.

Ma page est-elle sémantique ?

Le principe

Derrière le mot un peu abscons "sémantique" se cache une réalité toute simple : quand on fait une page XHTML, il faut utiliser les balises telles qu'elles ont été pensées. Ce n'est rien moins que de la logique pure. Si vous regarder la source de ce document par exemple, vous constaterez que les titres sont balisés avec des <h1>, <h2>, <h3>, que les paragraphes sont bien dans des balises <p> (et non pas séparés par des <br><br> intempestifs), que les listes d'éléments ordonnés utilisent des <ol><li></li></ol>, etc. Il faut donc utiliser des balises qui ont du sens.

Les implications

Cette façon de faire découle du fait qu'il faut séparer la structure du document de sa présentation : le fichier HTML constitue un squelette que l'on habille à sa guise avec un fichier CSS. C'est pourquoi l'utilisation de balises de présentation comme <b>, <i>, <u> ou autres sont totalement à proscrire : les indications de mise en forme, de positionnement des éléments sont à décrire dans le fichier CSS.

Le fait de créer une page sémantique impose d'abandonner la mise en page en tableaux, mais pas d'en proscrire absolument l'utilisation. On comprend bien qu'une page conçue avec des multiples tableaux imbriqués avec des colspan, rowspan n'est pas la bonne méthode pour structurer son document. En revanche, quelle meilleure façon de décrire un tableau de chiffres qu'avec une balise <table> ?

D'ailleurs l'abandon de la mise en page à base de tableaux pour passer à la conception par blocs réduit considérablement le poids des pages HTML (c'est le "Codons moins, codons mieux" de Denis). En éliminant les attributs de présentation du fichier HTML et en les regroupant dans une CSS, on peut gagner jusqu'à 50% sur le poids du fichier.

L'utilisation sémantique des balises favorise aussi le bon référencement auprès des moteurs de recherche. Pas très étonnant, car ceux-ci recherchent uniquement les informations textuelles du document et apprécient de voir l'information hiérarchisée avec des niveaux de titres <h1>, <h2>, <h3>.

Les outils pour tester

Il n'existe pas à proprement parler d'outil automatisé pour tester la sémantique d'un document, seul un peu d'expérience et de logique permettent de déceler les erreurs dans un document HTML.

Ma page est-elle valide ?

Le principe

Ma page est-elle accessible ?

Le principe

Ma page est-elle "navigo-dégradable" ?

Le principe

#xhtmlCSS

Vos commentaires

Gatan - site -
“En éliminant les 'atributs',…”
Bon ben juste une faute d’orthograf'

fastclemmy - site -
>Gatan
C'est corrigé.

Happy New Year 2018 Images - site -
Shop at Etsy to find unique and handmade happy new year 2018 related items directly from our sellers.

Ajouter votre commentaire