Le web n'est pas WYSIWYG
Le WYSIWYG (What You See Is What You Get) permet de voir à l'écran un document tel qu'il sera imprimé, ce qui peut être très utile notamment dans les traitements de texte comme Word.
Mais le web n'est pas WYSIWYG, il n'existe aucun moyen de le rendre WYSIWYG car:
- Tout le monde n'utilise pas le même navigateur (Internet Explorer, Firefox, Safari, Opera, Lynx, Navgateurs des appareils mobiles, ...).
- Tout le monde n'utilise pas le même système d'exploitation (Windows, Linux, MacOS, Debian, Playstation, etc...).
- Tout le monde n'utilise pas la même résolution d'écran.
- Tout le monde n'utilise pas la même taille de fenêtre, certains préfèrent maximiser toutes les fenêtres alors que d'autres préfèrent une mosaïque de fenêtres côte à côte.
- Tout le monde n'utilise pas la même taille de caractères.
- Tout le monde n'utilise pas la même calibration chromatique.
- Tout le monde n'utilise pas la feuille de style que vous proposez dans vos pages (désactivation des styles, feuille de style personnalisée).
- Tout le monde n'affiche pas les images (navigateurs textes comme lynx ou les robots des moteurs de recherche, lecteurs d'écrans à usage des malvoyants, désactivation de l'affichage des images dans les navigateurs).
Il convient donc d'utiliser les balises pour leur sens et non pour leur aspect graphique sur votre écran. Utiliser une balise de titre <h3> par exemple, pour mettre du texte en évidence, n'a pas de sens. Faites cela uniquement si cela correspond effectivement à un titre.
De la bonne sémantique
Faites un usage correct des balises html:
- Utilisez des balises de titre (hx) pour les titres
- Mettez les paragraphes dans des balises de paragraphe
- Codez les listes avec les éléments HTML de liste.
- etc...
Si vous voulez donner un aspect particulier à ces éléments, utilisez les CSS pour appliquer des styles et, si nécessaire, ajoutez des attributs de class ou d'id.
N'utilisez pas de balise <span> (ou <div>) pour encapsuler un élément et lui donner un style CSS du genre <span class="titre"> ou <span class="gras">, si vous pouvez utiliser pour cela une balise prévue à cet effet.
Des pages accessibles
En plus des conseils précédents:
- N'utilisez pas des images pour afficher du texte, il ne sera pas vu par les utilisateurs des navigateurs textes, les moteurs de recherche, les personnes qui désactivent l'affichage des images, etc...
- Dans le même ordre d'idée, pensez bien que les scripts (javascript, flash, etc...) ne sont pas ativés sur tous les navigateurs et qu'il en est ainsi en particulier des moteurs de recherche et de nombreux navigateurs pour appareils mobiles. Evitez les menus qui ne sont visibles que si javascript (ou flash) est activé.
- Evitez les frames, elles montrent toujours la même adresse dans la barre d'adresse, ce qui complique la création de favoris/signets vers une page précise.
