• Smashing Magazine a consacré récemment un tutoriel sur le sujet ;
• quelques curieux s’y essayent en ce moment sur Twitter.

Suffisamment d’éléments pour donner envie d’en parler un peu ici. Il faut dire aussi que je suis plutôt convaincu par les possibilités offertes.

De quoi s’agit-il exactement ?

Zen-coding propose simplement quelques automatisations qui viennent se greffer sur votre éditeur habituel.

La fonctionnalité principale (implémentée en premier sur les éditeurs) est basée sur la syntaxe des sélecteurs CSS : idéal pour ne pas être dérouté.

Par exemple si j’entre :

div#content>p.intro+ul>li*3>a

J’obtiens immédiatement :

<div id="content">
    <p class="intro"></p>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

On joue donc entre les sélecteurs enfants et adjacents pour construire sa structure d’une ligne.

Les « abréviations » permettent également donc de générer un grand nombre d’éléments HTML pré-construits ainsi que des propriétés CSS.

Tout cela est très efficace, d’autant qu’une fois le code généré, il suffira de tabuler pour que l’éditeur fasse passer votre curseur sur les endroits où du contenu doit être ajouté.

Sur l’exemple précédent, c’est :

<div id="content">
    <p class="intro">ici,</p>
    <ul>
        <li><a href="ici,">ici,</a></li>
        <li><a href="ici,">ici,</a></li>
        <li><a href="ici,">et ici.</a></li>
    </ul>
</div>

Autre fonctionnalité intéressante : la possibilité de sélectionner de manière progressive des portions de code. Toujours en reprenant l’exemple précédent, et en supposant que je place mon curseur entre « et » et « ici. », à chaque fois que je déclenche la fonctionnalité je sélectionne :

• et ici. ;
• <a href="ici,">et ici.</a> ;
• <li><a href="ici,">et ici.</a></li> ;
• etc.

Et bien sûr la sélection est faite de manière à pouvoir supprimer le bloc proprement d’un coup.

Arrive également la possibilité d’ajouter autour de la structure sélectionnée une nouvelle abréviation.

Je peux par exemple facilement produire en quelques raccourcis claviers :

<div id="content">
    <p class="intro">ici,</p>
    <div class="blocs ajoutes par la suite">
        <div class="blocs">
            <ul>
                <li><a href="ici">ici,</a></li>
                <li><a href="ici">ici,</a></li>
                <li><a href="ici">et ici.</a></li>
            </ul>
        </div>
    </div>
</div>

Tout cela sans devoir à aucun moment revoir mes indentations.

Pour les utilisateurs avancés, il est également possible de (re)définir finement de nouveaux modèles, en précisant syntaxes, positions du curseurs, etc.

Plongez-vous également dans les filtres de sortie qui semblent eux aussi très puissants.

Parfait ?

Pratique en tout cas. Il faudra cependant prendre le temps d’appendre les raccourcis clavier propres à votre éditeur pour en profiter pleinement. Et surtout croiser les doigts pour que votre éditeur favori supporte le plugin convenablement.

Difficile de se défaire de nos petites habitudes acquises au jour le jour pour en adopter d’autres… mais il semblerait que ça vaille le coup d’essayer.

Bien qu’en apparence très basique, le travail du développeur web client requiert de s’assurer d’une multitude de choses (non, nous ne nous occupons pas que du rendu visuel). Pour de ne rien oublier, j’utilise une check-list qui répond aux besoins habituels.

Ce document (à adapter à fonction des besoins du projet) permet une bonne vision d’ensemble sur l’avancement et les éventuels oublis lors de la phase d’intégration.

Je la fournis aussi au format « Markdown » pour plusieurs raisons :

• ce format en texte brut est facilement compréhensible et modifiable par n’importe qui ;
• il peut être aisément convertit au format HTML et être placé à la racine du projet ;
• c’est un format que j’ai adopté dans mes processus avec lequel j’ai l’habitude de travailler.

En pratique, il s’agit au cours du développement d’annoter le document, et de compléter chaque ligne par un OK / NOK / N/A.

La première partie concernant des résultats attendus pour chaque page, elle servira aussi aisément d’index.

Comme précisé dans le document, je ne suis pas l’auteur de cette liste : je n’ai fait que reprendre et combiner plusieurs existants.

La checklist

Voici donc :

• le fichier markdown ;
• sa transformation en HTML.

Si vous travaillez en PHP le code de transformation est simpliste :

<?php
    include_once('markdown.php');
    include_once('smartypants.php');
    echo(SmartyPants(Markdown(file_get_contents('checklist.markdown'))));
?>

Et vous trouverez les sources nécessaires dans le lien donné plus haut.

Checklist
=========

Conformité et affichage {#conformite}
-------------------------------------

Maquette                     | Validation XHTML                | Validation CSS                  | Safari | Fx   | IE 6 | IE 7 | IE 8 | Opera | Chrome | Lynx [^1] | Impression | iPhone | YSlow
-----------------------------|---------------------------------|---------------------------------|--------|------|------|------|------|-------|--------|-----------|------------|--------|-------
[Accueil](accueil.html)      |   erreur(s),   avertissement(s) |   erreur(s),   avertissement(s) |        |      |      |      |      |       |        |           |            |        |
[Contact](contact.html)      |   erreur(s),   avertissement(s) |   erreur(s),   avertissement(s) |        |      |      |      |      |       |        |           |            |        |
[Rechercher](recherche.html) |   erreur(s),   avertissement(s) |   erreur(s),   avertissement(s) |        |      |      |      |      |       |        |           |            |        |
[...](#)                     |   erreur(s),   avertissement(s) |   erreur(s),   avertissement(s) |        |      |      |      |      |       |        |           |            |        |


[^1]: L’affichage Lynx est proche de la restitution faite par un lecteur d'écran ou de ce qui est perçu par un moteur de recherche.

Sur l'ensemble des maquettes [^2]
---------------------------------

Contenu et style                                                                                                                             | Validité
---------------------------------------------------------------------------------------------------------------------------------------------|----------
Vérifier la ponctuation : particulièrement les apostrophes, les guillemets, les marques de citations, les traits d’union et les tirets       |
Ne faire ni d'faute d'orthographe ni de grammaire                                                                                            |
La capitalisation doit être uniforme et traitée par CSS                                                                                      |
Proscrire les phrases passe-partout ou récurrentes ("En savoir plus...")                                                                     |
Éviter les variations dans les mots ("email" vs "e-mail" vs "courriel")                                                                      |
Traitement des listes (points, virgules, ou point-virgules à la chaque fin d’élément)                                                        |
S’assurer qu’aucun contenu de test ne subsiste ("lorem ipsum...")                                                                            |
Vérifier tous les textes cachés (les `alt`, retranscriptions, les textes dans les fonctions JS)                                              |

Visibilité moteur de recherche                                                                                                               | Validité
---------------------------------------------------------------------------------------------------------------------------------------------|----------
Les titres (`title`) des pages sont importants, s’assurer qu’ils aient un sens et soient représentatifs des mots clefs présents dans la page |
Créer des `metadata description` pour les pages importantes                                                                                  |
S’assurer que le marquage du contenu respecte la sémantique HTML (`h1`, `p`,...)                                                             |
Vérifier le format des urls (urls simples à retenir pour les utilisateurs et les moteurs de recherche)                                       |

Conformité                                                                                                                                   | Validité
---------------------------------------------------------------------------------------------------------------------------------------------|----------
Voir [tableau ci-dessus](#conformite)                                                                                                        |


Accessibilité                                                                                                                                | Validité
---------------------------------------------------------------------------------------------------------------------------------------------|----------
Indiquer le langage humain principal du document en utilisant l'attribut lang au sein de la balise `<html>`                                  |
Indiquer les passages en langage secondaire dans d'autres balises encadrant le passage concerné                                              |
Proposer des liens de navigation dès le début du balisage lorsque les pages contiennent beaucoup de contenu avant le contenu principal       |
Indiquer des en-têtes dans les tableaux de données avec des balises `<th>`, et associer toutes les cellules de données à leurs en-têtes      |
S'assurer que l'ordre des tabulations est logique, en utilisant tabindex au besoin                                                           |
S'assurer que la page fonctionne toujours quand les images sont désactivées                                                                  |
S'assurer que les pages restent utilisables quand les utilisateurs agrandissent le texte au double de sa taille originale                    |
Vérifier que chaque élément de la page est accessible et manipulable au clavier                                                              |
Rédiger des textes d'appel de liens qui puissent être compris hors contexte (pas de liens titrés "cliquez ici")                              |
Pour les daltoniens ou les malvoyants, s'assurer de proposer un contraste suffisant entre le contenu et le fond de la page                   |
N'utiliser aucun contenu qui clignote plus de trois fois par seconde                                                                         |
Ne pas cacher l'indicateur de focus. Quand un utilisateur navigue au clavier, il doit toujours savoir où ces éléments se trouvent            |
Ne pas attendre des utilisateurs qu'ils perçoivent du sens grâce aux polices, aux couleurs ou à d'autres modifications de style              |
Être brefs dans les textes alternatifs, mais donner du détail dès lors qu'il y a du sens à transmettre                                       |
Fournir un script, des sous-titres, et/ou une traduction en langue des signes pour toutes les vidéos ou les sons contenant du discours       |
Fournir une version "descriptive" d'une vidéo lorsqu'il est essentiel d'en comprendre le contenu pour des utilisateurs non-voyants           |
S'assurer que toutes les vidéos, si elles ne se lancent pas automatiquement, offrent au minimum une touche de lecture accessible             |
Quand du texte peut être interprété visuellement par le navigateur aussi bien que s'il s'agissait d'une image, éviter d'utiliser des images  |
Éviter les CAPTCHAs (questionnaires de test visuels anti-robots)                                                                             |
Marquer tous les champs de formulaire avec la balise d'étiquetage `<label>`                                                                  |
Utiliser les regroupements de champs (`<fieldset>`) avec des balises de titrage (`<legend>`) pour associer des demandes de saisie            |
Recenser toutes les erreurs de saisie au format texte, et placer le message à côté du champ concerné ou à un emplacement bien repérable      |
Offrir des liens d'aide ou des instructions en ligne pour remplir les champs si nécessaire                                                   |
Ne pas laisser les utilisateurs effectuer des actions importantes sans leur proposer une confirmation ou un moyen d'annuler                  |

Tests fonctionnels                                                                                                                           | Validité
---------------------------------------------------------------------------------------------------------------------------------------------|----------
Vérifier toutes les fonctionnalités complexes                                                                                                |
Tester avec différentes configurations de résolutions d’écran                                                                                |
Tester tous les formulaires, incluant les filtres anti-spam, les réponses aux formulaires et emails, etc.                                    |
Tester sans JS, Flash et tous les autres plugins                                                                                             |
Vérifier que tous les liens externes sont valides                                                                                            |

Performances                                                                                                                                 | Validité
---------------------------------------------------------------------------------------------------------------------------------------------|----------
Vérifier l’optimisation des images                                                                                                           |
Vérifier et mettre en place le cache quand nécessaire                                                                                        |
Vérifier le temps de chargement et le poids des pages                                                                                        |
Minimiser/compresser les fichiers statiques une fois les développements terminés (JS/CSS)                                                    |
Optimiser votre CSS : utiliser des chemins courts vers les images, utiliser la nature du CSS c’est à dire l’héritage, etc.                   |

Touches finales                                                                                                                              | Validité
---------------------------------------------------------------------------------------------------------------------------------------------|----------
Créer des pages d’erreur / 404                                                                                                               |
Créer un favicon                                                                                                                             |

[^2]: Fortement inspiré de
      "[The Ultimate Website Launch Checklist](http://www.boxuk.com/blog/the-ultimate-website-launch-checklist)" et de
      "[La checklist d’accessibilité que je m’étais juré de ne pas rédiger](http://www.pompage.net/pompe/checklistaccessibilite)".

*[vs]: Versus
*[IE]: Internet Explorer
*[Fx]: Firefox
*[JS]: JavaScript
*[etc]: Et cætera
*[NOK]: Non OK
*[N/A]: Non applicable
*[CSS]: Cascading Style Sheets
*[AJAX]: Asynchronous JavaScript and XML
*[ARIA]: Accessible Rich Internet Applications
*[XHTML]: eXtensible HyperText Markup Language

C’est un petit outil en ligne qui fonctionne en Java mais qui du coup se lance sur toutes les plateformes.

Une fois Java installé (par défaut sur Mac), lancez l’utilitaire, indiquez le site que vous souhaitez tester (disponible sur un serveur) et la vitesse de connexion voulue.

Avec par exemple :

• 43.2 k (HSCSD) ;
• 56.0 k ;
• 80.0 k (GPRS) ;
• 128.0 k ;
• 236.0 k (EDGE) ;
• 256.0 k ;
• 512.0 k.

Je ne sais pas si le résultat est très précis, mais il permet de se faire une bonne idée des conditions de navigation offertes à vos internautes.

Comment ça marche ?

Pour l’exemple, je vais utiliser cette illustration ¹ :

On commence par détourer les parties que l’on juge détaillées de l’image : celles qui ne seront pas beaucoup compressées.

On crée une nouvelle couche à partir de cette sélection.

Dans les paramètres d’enregistrement pour le Web, il faut ensuite cliquer sur la petite icône « masque » à droite du réglage de qualité.

Il est possible alors de régler via deux curseurs la qualité minimum (celle pour les zones peu détaillées) et la qualité maximum (celle pour les zones détaillées).

Quand utiliser cette technique ?

Cela pourra s’avérer utile pour de grandes images de fond par exemple.

Il ne sera non seulement plus nécessaire de découper cette image en deux parties, mais il sera aussi possible de préserver les détails que l’on le souhaite pour optimiser le poids du fichier final.

D’une manière plus générale, dès lors que vous enregistrez au format JPG, regardez si des grandes parties de l’images sont peu détaillées et d’autres oui.

Je suis contre et voici mon argumentaire

Pour les utilisateurs débutants

Ce sont des utilisateurs qui ne maîtrisent que depuis peu (voire pas du tout) leur environnement de travail.

Leur faire apparaître de nouvelles fenêtres ne fera que les perturber dans leur confort tout relatif. Ils perdront par la même occasion leur historique de navigation et leurs onglets…

Ils ne comprendront même pas pourquoi à la fin de leur séance de surf, une fenêtre était présente cachée sous leur fenêtre actuelle.

Pour les utilisateurs confirmés

Les utilisateurs avancés connaissent évidemment le comportement par défaut d’un lien.

À l’activation ils ne s’attendent donc pas à voir le lien s’ouvrir dans une nouvelle fenêtre. Et surtout ils savent que s’ils souhaitent ouvrir le lien dans une nouvelle fenêtre ils pourront le faire avec un « click molette », un « contrôle-click » ou un menu contextuel.

Bref, au lieu d’être contraints, ils ont le choix. C’est important.

Des contre-arguments de votre côté ?

Je suis sûr qu’il y en a plein, sinon je ne ferais pas ce billet…

• Emails HTML ?
• Conditions générales de vente ?
• Liens externes ?

L’apostrophe est probablement le signe typographique le plus malmené de nos jours.¹

L’apostrophe en typographie française s’écrit en effet avec une entité HTML : ’ (pour right single quotation mark).

Cependant pour des questions de facilité évidente (ainsi que des questions historiques), c’est bien souvent son équivalent anglais (disponible directement sur nos claviers) qui est utilisé.

Avouez quand même que graphiquement c’est plus agréable à l’œil avec le bon caractère typographique !

Il nous est offert un jeu de titres allant du niveau 1 au niveau 6 qu’il convient d’ordonner de manière logique sans sauter de niveau.

Mais il n’est absolument pas précisé que le titre de niveau 1 doit être unique. En fonction du choix fait sur ce point, nous allons voir que dans la pratique cela a beaucoup de répercussions sur l’accessiblité de votre document ainsi que son référencement.

Je décide de n’utiliser qu’un seul titre de niveau 1…

… et je place ce titre de niveau 1 sur le logo

Nous obtenons donc une structure de ce type :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Exemple 1</title>
        </head>
        <body>
            <div id="page">
                <div id="tete">
                    <h1>Titre (notre logo)</h1>
                </div>
                <hr />
                <div id="corps">
                    <div id="menu" style="float:left;width:20%;">
                        <h2>Sous-titre numéro 1</h2>
                        <ul>
                            <li><a href="#">Lien numéro 1</a></li>
                            <li><a href="#">Lien numéro 2</a></li>
                        </ul>
                    </div>
                    <hr style="position:absolute;left:-999em;" />
                    <div id="contenu" style="float:left;width:80%;">
                        <h2>Sous-titre numéro 2</h2>
                        <p>Contenu de l&rsquo;article.</p>
                    </div>
                </div>
                <hr style="clear:both;" />
                <div id="pied">
                    <p>Pied de page.</p>
                </div>
            </div>
        </body>
    </html>

Notre structure d’exemple numéro 1 :

• respecte la syntaxe HTML ;
• respecte la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres ;
• n’est pas idéalement optimisée pour un bon référencement (outre pour une page d’accueil).

… et je place ce titre de niveau 1 sur le descriptif principal de notre article

Nous obtenons donc une structure de ce type :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Exemple 2</title>
        </head>
        <body>
            <div id="page">
                <div id="tete">
                    <p>Notre logo</p>
                </div>
                <hr />
                <div id="corps">
                    <div id="menu" style="float:left;width:20%;">
                        <h2>Sous-titre numéro 1</h2>
                        <ul>
                            <li><a href="#">Lien numéro 1</a></li>
                            <li><a href="#">Lien numéro 2</a></li>
                        </ul>
                    </div>
                    <hr style="position:absolute;left:-999em;" />
                    <div id="contenu" style="float:left;width:80%;">
                        <h1>Titre (descriptif principal de notre article)</h1>
                        <p>Contenu de l&rsquo;article.</p>
                    </div>
                </div>
                <hr style="clear:both;" />
                <div id="pied">
                    <p>Pied de page.</p>
                </div>
            </div>
        </body>
    </html>

Notre structure d’exemple numéro 2 :

• respecte la syntaxe HTML ;
• ne respecte pas la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres (puisque le titre de niveau 2 apparaît avant le titre de niveau 1).
• est idéalement optimisée pour un bon référencement.

… et je place ce titre de niveau 1 sur le descriptif principal de notre article… et je ruse ensuite par CSS !

Nous obtenons donc une structure de ce type :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Exemple 3</title>
        </head>
        <body>
            <div id="page">
                <div id="tete">
                    <p>Notre logo</p>
                </div>
                <hr />
                <div id="corps">
                    <div id="contenu" style="float:right;width:80%;">
                        <h1>Titre (descriptif principal de notre article)</h1>
                        <p>Contenu de l&rsquo;article.</p>
                    </div>
                    <hr style="position:absolute;left:-999em;" />
                    <div id="menu" style="float:left;width:20%;">
                        <h2>Sous-titre numéro 1</h2>
                        <ul>
                            <li><a href="#">Lien numéro 1</a></li>
                            <li><a href="#">Lien numéro 2</a></li>
                        </ul>
                    </div>
                </div>
                <hr style="clear:both;" />
                <div id="pied">
                    <p>Pied de page.</p>
                </div>
            </div>
        </body>
    </html>

Notre structure d’exemple numéro 3 :

• respecte la syntaxe HTML ;
• respecte la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres ;
• est idéalement optimisée pour un bon référencement ;
• respecte également la linérarisation du document car :
  • aucun tableau n’est utilisé pour la présentation,
  • le document reste compréhensible une fois la feuille de style désactivée (voir également cette règle reprise par le guide AccessiWeb).

Je décide d’utiliser plusieurs titre de niveau 1…

… et je place un de ces titres de niveau 1 sur le logo

Nous obtenons donc une structure de ce type :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Exemple 4</title>
        </head>
        <body>
            <div id="page">
                <div id="tete">
                    <h1>Titre (notre logo)</h1>
                </div>
                <hr />
                <div id="corps">
                    <div id="menu" style="float:left;width:20%;">
                        <h1>Sous-titre numéro 1</h1>
                        <ul>
                            <li><a href="#">Lien numéro 1</a></li>
                            <li><a href="#">Lien numéro 2</a></li>
                        </ul>
                    </div>
                    <hr style="position:absolute;left:-999em;" />
                    <div id="contenu" style="float:left;width:80%;">
                        <h1>Titre (descriptif principal de notre article)</h1>
                        <p>Contenu de l&rsquo;article.</p>
                    </div>
                </div>
                <hr style="clear:both;" />
                <div id="pied">
                    <p>Pied de page.</p>
                </div>
            </div>
        </body>
    </html>

Notre structure d’exemple numéro 4 :

• respecte la syntaxe HTML ;
• respecte la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres ;
• n’est pas idéalement optimisée pour un bon référencement.

… et je place un de ces titres de niveau 1 sur le descriptif principal de notre article

Nous obtenons donc une structure de ce type :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Exemple 5</title>
        </head>
        <body>
            <div id="page">
                <div id="tete">
                    <p>Notre logo</p>
                </div>
                <hr />
                <div id="corps">
                    <div id="menu" style="float:left;width:20%;">
                        <h1>Titre</h1>
                        <ul>
                            <li><a href="#">Lien numéro 1</a></li>
                            <li><a href="#">Lien numéro 2</a></li>
                        </ul>
                    </div>
                    <hr style="position:absolute;left:-999em;" />
                    <div id="contenu" style="float:left;width:80%;">
                        <h1>Titre (descriptif principal de notre article)</h1>
                        <p>Contenu de l&rsquo;article.</p>
                    </div>
                </div>
                <hr style="clear:both;" />
                <div id="pied">
                    <p>Pied de page.</p>
                </div>
            </div>
        </body>
    </html>

Notre structure d’exemple numéro 5 :

• respecte la syntaxe HTML ;
• respecte la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres ;
• n’est pas idéalement optimisée pour un bon référencement.

… et je place un de ces titres de niveau 1 sur le descriptif principal de notre article… et je ruse là encore par CSS !

Nous obtenons donc une structure de ce type :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Exemple 6</title>
        </head>
        <body>
            <div id="page">
                <div id="tete">
                    <p>Notre logo</p>
                </div>
                <hr />
                <div id="corps">
                    <div id="contenu" style="float:right;width:80%;">
                        <h1>Titre (descriptif principal de notre article)</h1>
                        <p>Contenu de l&rsquo;article.</p>
                    </div>
                    <hr style="position:absolute;left:-999em;" />
                    <div id="menu" style="float:left;width:20%;">
                        <h1>Titre</h1>
                        <ul>
                            <li><a href="#">Lien numéro 1</a></li>
                            <li><a href="#">Lien numéro 2</a></li>
                        </ul>
                    </div>
                </div>
                <hr style="clear:both;" />
                <div id="pied">
                    <p>Pied de page.</p>
                </div>
            </div>
        </body>
    </html>

Notre structure d’exemple numéro 6 :

• respecte la syntaxe HTML ;
• respecte la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres ;
• n’est pas idéalement optimisée pour un bon référencement ;
• respecte également la linérarisation du document car :
  • aucun tableau n’est utilisé pour la présentation,
  • le document reste compréhensible une fois la feuille de style désactivée (voir également cette règle reprise par le guide AccessiWeb).

Conclusion

Seuls l’exemple 1 (dans le cas d’une page d’accueil) et l’exemple 3 (dans les autres cas) garantissent l’accessiblité et le référencement de notre page.

Il est donc nécessaire parfois d’utiliser quelques astuces CSS pour ordonner correctement vos informations.

Bien qu’il soit tout à fait possible d’utiliser plusieurs titres de niveau 1 dans une page, cette pratique n’est pas conseillée pour un bon référencement. Il convient alors d’être attentif à la bonne hiérarchisation de l’information, si besoin avec l’aide de l’outil proposé par le W3C :

• résultat avec l’exemple 1 ;
• résultat avec l’exemple 3.

Jeudi 13 novembre

Vendredi 14 Novembre

Un grand merci à Laurence à qui nous devons la très belle charte graphique de cette année !