“S'il n'y avait que cinq règles fondamentales à respecter pour produire du HTML correct, quelles seraient-elles ?”, “Quelles bases minimales doit-on connaître pour apprendre (et enseigner) le HTML et s'auto-proclamer "webmaster" ?”
Voici le genre de questions qui me taraudent parfois... quand je ne suis pas devant la télévision en train de regarder les bleus perdre.
Je me suis donc évertué à compiler cinq principes fondamentaux, et suffisants, sur lesquels repose la base de tout apprentissage HTML... la substantifique moëlle si je puis dire...
- Principe 1 : un code propre.
- Observer les règles du langage HTML strictement et rigoureusement, de façon à éviter les erreurs.
- Ces règles ne sont en général pas nombreuses et simples à appliquer (fermer les balises, écrire en minuscules,...)
- En respectant ces règles de langage, vous assurerez la pérennité de vos pages et commencerez dès lors à profiter des avantages induits par l'application des standards Web.
- Avantages : Avoir un code propre est la base principale de tout projet HTML en conformité avec les normes actuelles et futures.
- Principe 2 : un code compréhensible.
- Il faut toujours comprendre le code HTML produit.
- Cela implique évidemment une connaissance minimale des balises même (surtout) si on utilise un éditeur WYSIWYG qui génère du code automatique.
- “Faire des plats cuisinés, c'est bien. Mais c'est toujours mieux d'apprendre à faire la cuisine, même si on ne veux pas devenir un grand chef.”
- Pré-requis : Un code compréhensible découle évidemment d'un code propre. Le 1er Principe est donc à observer en priorité.
- Avantages : Un code compréhensible est utile pour vous (compréhension de votre code dans 6 mois, facilitation des mises à jour), mais aussi pour les autres (demande d'aides, poursuite du projet par d'autres, projet en commun, ...).
- Principe 3 : un code simple.
- Toujours produire un code HTML le plus simple et le plus direct possible.
- Eviter l'enchevêtrement et l'imbrication de balises superflues. Voir à ce sujet les articles sur OpenWeb et sur Alsacréations.
- Pré-requis : Alléger la page passe aussi et surtout par la séparation entre le contenu (HTML) et la forme (CSS). Une bonne connaissance des feuilles de styles est donc nécessaire.
- Avantages : Un code simple et direct est un complément d'un code compréhensible. Cela va permettre un allègement du poids de la page, du site entier (mise en cache de la feuille CSS par exemple) et un effet bénéfique sur l'utilisation de la bande passante.
- Principe 4 : un code pertinent.
- Toujours utiliser les bonnes balises au bon endroit.
- Eviter par exemple l'emploi de balise de paragraphe (P) pour définir un titre de page, alors qu'il existe une balise de titre (Hx). Pourquoi ? Tout bêtement pour mieux comprendre votre code (principe 2), faciliter votre propre mise à jour (principe 3), mais aussi pour permettre l'Accessibilité de votre site aux handicapés qui utilisent des lecteurs braille par exemple (principe 5).
- L'utilisation des balises à bon escient se nomme la Sémantique.
- Pré-requis : Utiliser toujours la bonne balise au bon endroit nécessite une parfaite connaissance du langage HTML et de toutes les balises en vigueur, ainsi que leur comportement par défaut (bloc, en-ligne, marges par défaut,...).
- Avantages : Avoir un code pertinent et une structure propre va grandement faciliter son Accessibilité et sa diffusion sur le web : tous les navigateurs (même braille ou moteurs de recherche comme Google) auront la bonne interprêtation de votre document. Ils comprendront que le titre est un titre et non un paragraphe amélioré, que le menu est un menu, etc...
- Principe 5 : un code Accessible.
- Cette règle regroupe l'Accessibilité (utilisabilité du site par les personnes souffrant de handicaps divers) et l'Interopérabilité (compatibilité du site sur tous les navigateurs et toutes les plateformes).
- Internet est fait pour être utilisable par tous. Les vieilles guerres entre les navigateurs ont faussé ce principe originel. A nous de rectifier le tir et de rendre nos pages Accessibles à tous en évitant les codes propriétaires (balise MARQUEE,...), les balises obsolètes (FONT, ...) qui sont nombreuses.
- Pour faciliter cette démarche, il existe des Validateurs de code (x)HTML et des Validateurs d'Accessibilité. A vous de les utiliser à loisir.
- Pré-requis : Un code pertinent et sémantique est une priorité à atteindre avant d'en espérer faire un code Accessible et Intéropérable.
- Avantages : Tout simplement vérifier la définition du web telle qu'elle a été donnée à sa création : un media utilisable par tous quels que soit la plateforme et l'individu qui l'utilise.
- Principe général : ne jamais imposer une manière de surfer.
- Ne pas fixer la taille de police. N'oublions pas que certains utilisateurs mal-voyants ont besoin d'augmenter la taille de police.
Nota : il faut savoir que tous les navigateurs respectueux des Standards (en fait, tous sauf IE) permettent toujours le redimensionnement de la police : il n'est pas possible de la fixer pour eux. - Ne pas ouvrir de nouvelle fenêtre ou de popup sans prévenir l'utilisateur
- Ne pas imposer de la musique, un affichage plein écran, un plugin, etc...
- Dans tous les cas et en règle générale, il est vivement déconseillé d'imposer une manière de surfer à l'utilisateur. Sachez que tous les internautes sont différents, ils ont tous des goûts, des habitudes, des connaissances différentes du monde internet. Ne croyez jamais qu'ils vous ressemblent et ont les même besoins que vous.
Addendum : les pires erreurs de conception 2004
Extraites de Web pages that sucks, et dénichées par Fred Cavazza, voici les erreurs à ne surtout pas commettre :
- Penser que les internautes se soucient de vous. Un site doit être conçu en fonction des besoins / contraintes / motivations / freins des utilisateurs et non pas des vôtres !
- Ne pas pouvoir identifier un site en moins de 4 secondes. Si dans ce laps de temps les visiteurs ne parviennent pas à savoir où ils se trouvent et ce que ce site peut leur apporter, alors il y a un défaut de conception.
- Mystifier le potentiel des standards web et des CSS. Le fait qu'un site respecte ou pas les standards W3C ne le rend pas forcément meilleur ou moins bon. Est-ce que vous vous souciez de savoir en quels matériaux votre maison a été construite du moment qu'elle tient debout ?
- Polluer l'expérience de visite avec des éléments visuels. Oubliez les pages d'intro en FLash, une fois que les visiteurs sont sur votre site, inutile de ralentir leur exploration avec de belles animations, rentrez dans le vif du sujet.
- Utiliser un système de navigation défaillant. Les règles sont pourtant fixées depuis longtemps, un système de navigation performant doit permettre aux visiteurs de répondre à ces questions : Où suis-je ? Où puis-aller ? Où est la page d'accueil ?
- Utiliser des items de navigation mystère. Les utilisateurs devraient être en mesure d'anticiper leur destination avant de cliquer sur un lien ou un bouton. Utiliser des intitulés, des typographie ou des effets visuels complexes n'aident pas les utilisateurs à se repérer et à anticiper leurs clics.
Commentaires
heuuu
www.alsacreations.com/art...
dans l'exemple size="10", ca n'a jamais éxisté une size 10, ca va de 1 à 7 si mes souvenirs sont bon
la size de 10px ca doit être la 2 ou la 3 même, chais plus bien :/
sinon sur les 5 points, bien trouvé ;) même si je ne les auraient pas mit dans cet ordre (surtout les 3 premiers)
Je pense pas que raph a voulu leur donner un ordre. Ils sont tous importants ;-)
Je peaufine le 5ème point et après je serais webmaster ;-)
Merci à Raphaël pour ce nouvel article pertinent !
Puis-je me permettre d'ajouter un sixième point ? Oui ? Merci !
Soigner la grammaire et l'orthographe dans sa propre langue...Il y a des webmasters et programmeurs qui accomplissent la prouesse d'être plus lisibles dans leur code que dans leur langue maternelle, même s'ils codent avec les genoux ! C'est fort, non ? Comment peut-on maîtriser correctement un langage, sans avoir réussi à intégrer sa langue maternelle ? Mystère...
Un exemple : "Je peaufine le 5ème point et après je serais webmaster"...
"...je serAI..." ne serAIT pas mieux ?
Allez ! courage...
@raoul > C'est tout à fait exact (d'ailleurs, j'espère que je n'ai pas trop fait de fautes dans ce billet ;-)). Cependant, ça n'imcombe pas spécifiquement au webmaster dans le sens où le webmaster produit du code HTML et pas obligatoirement le contenu.
Il y'aurait dans ce cas bien plus de règles à respecter !
Salut,
je suis tout à fait d'accord avec les principes d'accessibilité du Web et de codes "propres" cités ci-dessus,
le site: www.ocawa.com permet d'aller voir et de tester les erreurs d'Accessibilités (dans le code HTML!) de votre site.
Bon courage!
oups!
J'ai oublié de vous dire ci-dessus que le site ocawa est gratuit, ne necessite pas d'inscription de votre part si vous n'auditer qu'une seule page, elle est requise pour l'audit d'un site complet allant jusqu'à 30 pages.
En + il est Francophone!
@+
Moi ce qui me "choque" le plus c'est les gros sites (comme Microsoft) ou les sites spécialisés dans la création de site web qui "oublient" la balise <!DOCTYPE ... >.
J'aime bien analyser les sites importants avec le validator du W3C. Je voudrais savoir QUI a fait toutes ces fautes... et dire que je suis au chômage alors que, moi, je ferais plus attention !
Je suis d'accord avec toutes ces règles, et j'ai encore du boulçot du coté du code pertinent, j'ai mis des paragraphes un peu partout me semble t-il mais je ne le mettrais enligne que lorsque ce sera bon.
Il y a juste un détail qui me gène. Moi, j'aime quand le visiteur voit le site tel que je l'ai conçu, et la possibilité de mettre une grande police le déforme... je peux bien evidemment faire en sorte que cela ne le déforme plus mais au prix d'avoir un design moins agréable à mes yeux. Beaucoup aiment les sites en "pourcentage" plutot qu'en "pixel" pour que ce soit bien sur toute dimension de la fenêtre et toute dimension. Moi, je préfère en pixels et je n'ai encore rien trouvé qui ait pu me faire changer d'opinion...
Très bon article cependant.
@Kurt > Que privilégies-tu :
- l'accès à ton contenu (ce que tu dis, qui est intéressant a priori, du moins on peut le supposer) ?
- l'accès à la déco de ton contenu (la taille de la police et ses conséquences sur le zoli affichage que tu aimes, mais qui est une stricte affaire de goût personnel) ?
A l'heure actuelle, on peut privilégier l'un ou l'autre, mais souvent pas l'un et l'autre.
Et bien, j'hésite encore sur la question mais je pense, je comprend que cela puisse paraitre stupide, que l'utilisateur ne peut pas voir mon site d'une meilleure façon qu'en le voyant tel que je l'ai optimisé...
Je sais que cela peut être une affire de gout, mais je prèfère à ec moment là laisser un choix de plusieurs designs...
Mais j'essaie de prendre en compte aussi l'accès au contenu (mais je le met peut-être un peu en seconde priorité), ainsi, on peut agrandir la police ...juqu'à un certain point...
Mais, même lorsque l'on met une taille en pixels pour les polices, j'ai remarqué que de toute façon, Mozilla peut agrandir le texte...
Cela fait quelques jours que je traîne sur ce site et je m'aperçois de page en page que j'ai encore beaucoup de choses à apprendre...
merci...
Sans oser rentrer dans un débat de professionnels qui m'échappe quelque peu, je me joins à thierry pour remercier l'équipe qui a conçu ce site: C'est beau, cohérent et les explications sont claires (ce qui est rarement le cas dans les sites traitant de CSS, du moins le peu que j'ai déja regardé!!).
Encore beaucoup de leçons à recevoir pour arriver à mettre en ligne un site de cette classe.
Bravo!
@Thierry et @Nico >
Merci pour ces compliments.
"L'équipe", en fait, c'est moi. Je suis seul à m'occuper d'Alsa... enfin, si on veut être très précis, je dois beaucoup à certaines personnes que je vais m'empresser de remercier également :
- Tous les modérateurs (+ Katsoura) du forum Media-box : dreamweaver.media-box.net
- d'autres personnes, nombreuses, que je croise sur d'autres blogs (voir liste à droite), et plus particulièrement Laurent Denis, souvent disponible ;-)
Les compliments sont mérités ;-)
Excellentes règles de conduite dont je vais tout de suite vérifier l'application dans mon site.
Mes félicitations pour cet article de qualité qui ne saurait être plus enrichissant dans le devoir du respect d'autrui.
Merci Raphaël pour toute cette mine d'information.
Tes tutoriaux sont hypers intéressants et très instructifs.
Véro
C'est la première fois que je passe autemps de temps a surfer sur un site d'une façon aussi agréable, les couleurs sont douces, le petit citron me donne un gout amer dans la bouche, tu devrais rajouter un ptit sucre avec un fondant quelque part ;)
Non frachement chapeau pour le site et pour des tutorials, ca fait un petit moment que je construit des sites web pour m'amuser et évidemment j'imbriquais des tables à la volé dans des rowspan et colspan...
Tout ca me semble tellement dépassé depuis que je surf sur ton site !!!
J'aimerai avoir la même ingéniosité visuel que tu as have fun !!!
"Pour faciliter cette démarche, il existe des Validateurs de code (x)HTML et des Validateurs d'Accessibilité. A vous de les utiliser à loisir."
Comme il dit le monsieur...
et bien sûr par curiosité malsaine, je sélectionne sa page en cours et le validateur en question et... surprise... 19 erreurs...
Ce que j'en pense : tu te fous de nous garçon avec tout ton baratin que tu as repompé sur mon site préféré... OpenWeb.
Tu n'apportes rien de nouveau...sauf tes propres incertitudes ;-)
Donc: <plonk> pour le wattmillième blog insipide de la saison !
@Alfred > Eh bien que dire ?
J'ai le choix entre :
- merci de m'avoir si gentillement signalé que j'avais oublié de fermer deux balises sur ce billet :)
- le web est assez grand, il ne faut surtout pas t'attarder ici si cela est trop insipide pour toi :)
En tout cas, pour connaître wattmille blogs insipides, tu dois bien occuper tes journées.
Bon restons sérieux. Merci quand même pour l'erreur.
Puis-je, en tant que rédac-chef d'OpenWeb, adresser une petite remarque à Alfred ?
Je peux ? ... Sûr ? Merci :)
Alors :
Raphael Goetter n'a rien repompé sur OpenWeb. Il est membre du collectif Openweb.
Point barre, Dugland.
Je voulais juste venir feliciter Raphael mais comme j'ai vu le message de Glandu, oh pardon, de Dugland, je me suis dit : quand-meme, quand on voit le boulot qui a ete fait pour ce site, ce genre de reproche ne peut provenir que de quelqu'un qui est basiquement ininteressant.
En tous cas, felicitations Raphael.
J'ajoute : si on visite vraiment OpenWeb, on ne peut pas manquer Alsacreations !
Et, à partir de là, on peut trouver de très bons blogs ...
Bravo et merci pour cette initiative francophone.
La qualité des contenus et de la présentation font d'OpenWeb et d'Alsacréation (et quelques autres )font de ces sites mes lieux de ressources...
Bravo pour ce travail. ;-)
signé :
un apprenti Webmaster, un newbie en css... et un convaincu de leur utilité
PS : du coup, les sites que j'ai concçs et mis en ligne sont tous en cours de rénovation ;-)
A propos de contenu, veuillez tous excuser mes fautes de frappe dans le "post" précédent :-(.
Encore bravo à Raphaël, Elie et toute la bande pour leurs sites ;-)
toujours signé :
un apprenti Webmaster, un newbie en css... et un convaincu de leur utilité.
Petite faute ici : Utiliser un système de navigation défaillant. Les règles sont <strong>portant</strong> fixées
Merci Thomas, je corrige.
Et ben... Fameuse refonte du site Raphael!
Bravo!
Ca fait qqes semaines que je n'y étais plus venu.
Chaque fois je me dit que je vais m'y mettre à apprendre ces foutus css. (Je ne demande pas mieux mais bon entre le travail, le sport, le piano etc...)
Cela dit, ce nouveau site va me rebooster. J'apprends d'ailleurs ici même qu'il y a enfin un livre de Eric Meyer en français (il était temps!!!)
Allez hop je m'inscris au site et n'hésiterai pas à poser de bonnes questions lol et j'espère aider plus tard.
Bonne continuation
eh ben bravo ! vive la france !! c fou le nombre de gens qui se prennent pour des 'web'designers juste en changeant des couleurs de polices, de fond de page, ou encore faire un menu avec une image de fleurs en fond.. c ben zoli.. mais bon quand mm fo pas exagérer ... que vous dire.. les standards c bien, mais cela devient tout pareil votre monde, conserver une mise en page commune pour les blogs c bien, mais faudrait voir à ne pas tout aseptiser.. quand à ceux qui relèvent les fautes d'orthographe, ils vont surement nous dire bientôt qu'ils deviennent professeur...
toutes vos idees vous sont dictées par la télé et les normes.
l'ennemi de la connaissance, c de croire que l'on a raison
moi j'ai ma raison (ki n'est ke mienne d'ailleurs.. hein!), et je vous avoue qu'elle me donne des frissons lorsque j'imagine l'avenir que vous êtes en train de construire... vous votez sarkozy bientot non?
1984 nous voila
@L'humain > Belle tirade, mais je crois que tu te trompes de cible.
En quoi avoir un code compréhensible, propre, accessible, etc. est-il une hérésie ?
En quoi cela peut-il aseptiser quelques chose ? Tu y mets ce que tu veux dans ton code, et tu lui donnes l'aspect que tu veux. Donc pas de stress ni d'obligation.
Autre chose sur la méconnaissance des Standards.
Ceux-ci peuvent se résumer très simplement en "faire que le Web soit accessible à tout le monde".
Rien de méchant à cela selon moi.
C'est vrai qu'il existe des normes en architecture (pour que ta maison tienne debout), et dans d'autres domaines : places de parkings pour handicapés, etc.
Les standards ne proposent que cela : permettre que tout le monde accède au web correctement.
C'est tout. Pas de trace de Big Brother là dedans.
J'ignorais que Sarkozy était webmaster ...
@L'humain> Heureusement qu'il existe des règles. Sinon quel foutoir ! C'est la base même de tout moyen de communication.
Si tu veux que tout le monde te comprenne, il faut utiliser le même langage. Et cela s'applique dans tous les domaines surtout en informatique.
Par contre libre à toi de t'isoler et de construire ton monde. Mais à ce moment là pas moyen de communiquer avec les autres.
Au contraire je trouve que l'utilisation des standards permet de s'ouvrir aux autres et de mieux communiquer. Cela n'empêche pas la créativité et la personalisation.
J'habite le Québec et je viens de recevoir ton livre Raphaël. J'en suis qu'au quart et je suis déjà submergé d'informations pertinentes ! Je savais que j'avais des carences dans ma manière de coder, mais pas à ce point là ! Tu as complètement redéfinit ce que je connaissais déjà, et d'une manière des plus logiques. Ce livre se lit comme un roman policier, sauf que c'est le lecteur qui se fait aider à résoudre son crime, c'est-à-dire un code malpropre et dépourvu de structure, comme tu le dis si bien.
Merci pour cet ouvrage et les suppléments apportés par ton site !