10 crimes sur les balises HTML que vous ne devriez plus commettre

32 commentaires pour “10 crimes sur les balises HTML que vous ne devriez plus commettre”

1. Par Rom le 15 juin 2009 | Répondre

   Salut à tous !

   Encore une ptite liste de truc à pas faire bien faite et bien expliquée.

   J’ajouterais quand même, pour le crime n°2, à propos des attribut alt, qu’il vaut mieux le laisser vide dans le cas ou l’image n’a aucun sens dans la page. Par exemple si c’est juste une image à but purement décoratif, ça sert à rien de remplir l’attribut alt pour y mettre quelque chose dont tout le monde se moque, y compris les moteurs (après, ça c’est + une approche référencement).

   Crime n°9 à propos des titres : Attention à ne déclarer qu’une seule balise H1 par page

   Et sinon …. Je trouve les schémas très bien fait, bien que très …. schématiques Jolie boulot !

   Rom.

2. Par L'équipe Kiwano le 15 juin 2009 | Répondre

   Bonjour Rom et merci pour ton commentaire,

   Concernant l’attribut alt sur les images, nous avons indiqué que “si votre image ne porte pas de sens vous devez positionner un alt vide sur votre image” même si ce cas est très rare. En effet, soit l’image porte un sens sémantique (on doit la mettre dans le code HTML et indiquer un alt sur l’image), soit l’image ne porte pas de sens (il s’agit d’une image de présentation et on doit utiliser un code CSS pour l’afficher).

   Pour les titres, la norme HTML permet d’utiliser plusieurs fois la balise h1 mais nous conseillons toutefois de n’avoir qu’un seul titre h1 correspondant au titre de la page.

3. Par Monique le 15 juin 2009 | Répondre

   Bonjour,

   Deux autres crimes à dénoncer :

   - l’utilisation abusive de la balise div pour structurer le contenu d’une page, au mépris des balises apportant une valeur sémantique (titres, paragraphes, listes, citations…)

   - l’exploitation de l’apparence donnée par défaut par un navigateur au contenu de certaines balises (hn, blockquote…), plutôt que de confier ce rôle aux feuilles de style

   Amicalement,
   Monique

4. Par L'équipe Kiwano le 15 juin 2009 | Répondre

   Merci Monique pour tes excellentes remarques.
   Je pense que cet article aura une suite où elles figureront en bonne place ! Je profite de ma réponse pour ajouter que le but de notre article n’est pas de pointer du doigt ceux qui emploient de mauvaises pratiques (cela prendrait beaucoup trop de temps et puis nous ne sommes nous même pas toujours tout blanc… :-/ ) mais plutôt de conseiller ceux qui ont le désir de bien faire. Tes remarques vont bien dans ce sens, encore merci.

5. Par Campagne le 16 juin 2009 | Répondre

   Bonjour, merci pour ces infos superbement illustrées, je ne savais pas que la balise strike était dépréciée…
   Et qu’en est-il de la balise u que j’utilise pour souligner ?

   J’imagine qu’elle n’est plus valable non plus…

6. Par L'équipe Kiwano le 16 juin 2009 | Répondre

   Bonsoir,
   vous avez raison, la balise u est dépréciée depuis HTML 4.0 dans les recommandation du W3C.
   Il s’agit d’un élément de mise en forme purement décoratif, qui en tant que tel n’est pas porteur de sens. Il est donc logique de s’appuyer sur les feuilles de style et le CSS pour rendre l’aspect souligné. Vous devriez utiliser une balise inline de type span et lui attribuer la propriété text-decoration: underline;

7. Par Pierrot le 19 juin 2009 | Répondre

   Après le politiquement correct, voici le htmlement correct. Je sais que cet article est simplement une traduction, néanmoins je trouve son ton un peu trop moralisateur et pédant. Je ne suis clairement pas concerné par ces “crimes” (rien que le mot est navrant, dans ce contexte), pour autant, sous couvert de “donner des conseils”, vous risquez de passer pour des donneurs de leçons “bien-pensants”…
   Franchement, qu’un gars utilise deux <br> au lieu d’un <br>, qu’est-ce que ça peut faire ? Que chacun code comme il le sent, tant que ce n’est pas immonde et lourd, mais arrêtez d’essayer de faire culpabiliser certains pour si peu…

   Enfin bref, si l’intention n’était surement pas mauvaise, je pense qu’il faudrait peut-être arrêter de “criminaliser” n’importe quoi et de balancer des cailloux et des tomates pourries sur ceux qui ont eu l’audace d’utiliser un style inclus dans la page elle-même, plutôt que de manière externe…

   PS : Bouh, vous avez quand-même oublié le crime ultime, digne de la lapidation et l’écartellement en place pubique : l’utilisation de tableaux pour positionner ses éléments ! (horreur, mais qu’on l’écorche vif pour crime contre le W3C et terrorisme envers le CSS ! lol)

8. Par L'équipe Kiwano le 19 juin 2009 | Répondre

   Comme dirait Gaston sous la plume de Franquin : Pierrot… “m’enfin !”

   C’est pas vrai cette histoire de policier, c’est du second degré.
   Si tu remontes deux ou trois commentaires plus haut, tu verras même qu’on avait pensé à toi sans te connaître en parlant de ne pas montrer du doigt mais plutôt d’aider ceux qui veulent bien faire et puis tiens on y avouait aussi par la même ne pas être tout blancs (faute avouée à moitié pardonnée pas vrai ?).
   Effectivement, et cela n’est surtout pas notre propos, tout le monde peux toujours trouver à redire et la perfection n’est hélas et heureusement pas du monde du Web mais reprocher aux autres de vouloir bien faire … Ça m’évoque cette citation du philosophe Caliméro : “c’est vraiment trop injuste !”

9. Par Pierrot le 19 juin 2009 | Répondre

   PS2 : J’imagine que mes propos ne seront jamais publiés/validés, j’en profite donc pour souligner amicalement le fait que le site dont vous avez traduit l’article, tout comme le votre, du reste, utilisent des CMS. Je le fais également, mais je trouve cependant un peu déplacé de critiquer ceux qui codent entièrement leurs sites (même s’ils utilisent des <b> plutôt que des <strong>), quand vous vous contentez d’utiliser un système tout-fait et prémaché, sans réellement mettre les mains dans le “cambouis”…

   J’aime bien votre site, et c’est aussi pour ça que ça me navre de lire ici ce qu’on a déjà lu ailleurs, à savoir ce dégoulinement de bien-pensance et de moralisme que distilent les chevaliers blancs du web et les ayatolas du w3c…
   Bonne journée quand-même !

10. Par L'équipe Kiwano le 19 juin 2009 | Répondre

    P.P.S. : nous n’avons rien contre un petit débat tant que cela reste cordial même si cela me fait un peu penser à l’excellent article paru sur presse-citron 7 façons foireuses de faire connaitre son blog.
    Nous avons choisi Word Press pour sa facilité de personnalisation, son xhtml valide, sa prise en compte de l’accessibilité, etc. Il nous permet notamment de pouvoir publier et répondre à des commentaires très facilement et de modifier une foultitude de choses automatiquement sans nous empêcher de mettre la main dans le code.
    C’est donc une solution tout à fait correcte à nos yeux. Pour le coup si j’arrivais presque à comprendre ton “agacement” du commentaire précédent je ne comprends pas très bien que tu opposes le fait d’utiliser un outil de production type CMS au contenu de nos articles, qui une nouvelle fois n’ont pas pour but de critiquer.
    Je te souhaite une bonne soirée malgré tout.

11. Par Sandeee le 20 juin 2009 | Répondre

    Oui, bien sûr retournons aux trains à vapeur tant qu’on y est ! C’était tellement chouette !
    (et encore… c’est vrai que c’était chouette les trains à vapeur…)

    Non mais franchement, je ne comprends pas comment on peut rester campé sur des pratiques archaïques ( qui étaient peut-être très répandues il y a quelques années, mais qui depuis ont montré leurs limites, et là je pense notamment à l’emploi des tableaux que cite Pierrot ) alors que ce qui fait, selon moi, tout l’attrait du web est justement sa capacité à évoluer, à se remettre en question. Et pas pour la beauté du geste, nan nan nan, pour répondre à de réels enjeux en terme d’ergonomie, de référencement, et d’accessibilité, entre autres !

    Oui, on a tous mis un jours nos styles dans notre html, lui-même s’appuyant sur des mises en pages en tableaux, en utilisant plein de frames de partout, c’était trop cool, trop facile, rien ne bougeait d’un navigateur à l’autre !

    Mais c’était il y a 5 ans. Et depuis, le web a changé. Les internautes ont changé. Les clients ont changé.
    Avant le dev était roi. Il faisait ce qu’il voulait, comme il l’entendait.
    Maintenant, les utilisateurs ont pris sa place et réclament des sites souples, intuitifs, évolutifs, participatifs etc. Et d’ailleurs, ils ont raison. C’est bien pour eux que nous passons tant de temps à analyser, maquetter, coder, etc. Et pas pour satisfaire nos petits egos et ceux de nos clients !

    Dire “bouh c’est pas bien de faire la morale” parce que l’on ne veut pas soi-même remettre en cause sa propre pratique du web est idiot.

    De même que critiquer l’emploi des CMS sur ce site… En quoi est-il valorisant de faire un site entièrement tout seul si c’est pour coder de la daube (styles dans le html, tableaux etc.) ? Juste pour pourvoir dire “je l’ai fait tout seul, regardez comme je suis trop fort ?”
    Cela me semble assez vain et présomptueux…

12. Par chevaliere blanche... le 21 juin 2009 | Répondre

    Je me suis régalée à lire cet article !

    … Et je salue respectueusement Pierrot qui regarde si bien le doigt alors qu’on lui montre la lune.
    (elle était facile… sans rancune )

13. Par Monique le 21 juin 2009 | Répondre

    Bonjour chevaliere blanche

    M’étonne pas que tu te sois régalée… toi qui mets ta plume au service de tous et partages la lumière de ta chandelle avec tous les Pierrot qui n’ont plus de feu

    Ce qui me régale surtout, c’est de voir que des jeunes prennent à leur tour le bâton de pèlerin pour nous rejoindre dans notre combat (tout pacifique) pour un Web meilleur !

    Amicalement,
    Monique

14. Par chevaliere blanche... le 22 juin 2009 | Répondre

    

    Si fait Monique !
    (et de reprendre mon blanc destrier à tes côtés…)

15. Par opi le 23 juin 2009 | Répondre

    Pour completer le crime n°2, on peut egalement ajouter les attributs height=”XX”, et width=”XX” (avec XX un entier, sans ecrire “px”).
    Cela permet au navigateur de prevoir la taille de l’image avant qu’elle soit finie de chargée, c’est plus agréable pour le visiteur, ca évite de bouger la mise en page apres le chargement complet des images.

    Bon article en tout cas !

    opi

16. Par WebArtAddicts le 23 juin 2009 | Répondre

    Pour revenir au contenu de l’article et de ses commentaires, en particulier le “crime n°9″ énoncé par @Rom, je me permets de n’être pas d’accord. Comme je le démontrais pas plus tard qu’hier dans un article de mon blog (http://www.webartaddicts.com/2009/06/la-balise-h1-en-xhtml-controverse/), l’utilisation de plusieurs h1 dans une page est loin d’être interdite.

    Bien au contraire, elle est parfois bien plus efficace et utile (en terme de sémantique et d’accessibilité) que la simple répétition en tête de page du contenu de la balise title. h1 apporte bien plus une notion de section principale d’une page (un peu comme les parties d’un livre) que de titre absolu d’un site (il y a la balise title pour ça).

    Je donne un petit exemple qui parlera à tous je pense : mettons que je développe un thème de blog : sur la page d’accueil se liste plusieurs articles principaux comme plusieurs sections principales. Il est donc tout naturel d’encadrer leurs titres par des h1. Ensuite, dans les pages d’articles, je ne mettrais qu’un seul h1 qui correspondra au titre de l’article/la section. Mon design n’en sera que plus accessible ET sémantique.

    Il ne faut pas faire de l’utilisation de plusieurs h1 dans une page une doctrine non plus, mais juste retenir que dans certains cas, elle se justifie grandement.

    Merci pour cet article,
    Denis Chevalier.

17. Par Thibaut Allender le 23 juin 2009 | Répondre

    Concernant la balise U évoquée et son alternative CSS: oui, d’accord, mais il est important de rappeler que le souligné n’existe pas en typo! Il a été inventé en même temps que la machine à écrire, alors incapable de générer du gras ou de l’italique. Le souligné est donc un strong ou em batard… il n’a en tous cas AUCUNE valeur sémantique, d’où l’absence de balise dont le comportement par défaut serait souligné (à part évidemment la balise A). C’est d’ailleurs une raison de plus pour ne pas utiliser de souligné ailleurs que sur les liens, cela prête à confusion en plus d’être une aberration typographique.

18. Par Michel le 24 juin 2009 | Répondre

    Bonjour à tou(te)s,
    Je ne devrais pas lire ce genre d’article… Maintenant, j’ai 184 pages à “corriger ” !

    Merci quand même

19. Par WebArtAddicts le 24 juin 2009 | Répondre

    @opi : pas très bon pour la séparation fond forme ça ! Il vaut mieux spécifier la taille dans les css.

20. Par L'équipe Kiwano le 24 juin 2009 | Répondre

    Salut WebArtAddicts,

    Merci pour tes commentaires.
    Puisque le sujet t’intéresse, je te conseille de consulter l’excellent article de Laurent Denis sur Blog & Blues qui fait le tour de la question. Tu constateras que les avis sont partagés mais que la déclaration du width et du height dans le (X)HTML est valide dans toutes les DTD. Le reste est une question de choix.

    Bonne Lecture !

21. Par xavier essonne le 24 juin 2009 | Répondre

    bonjour, tres bon article, le respect de protocole profite gravement a la sante et au trafic de votre site.
    Le travail sous domaine est aussi tres interessant pour occuper un maximum de page, le test de cet article est donc doublement interessant.

22. Par ipatate le 24 juin 2009 | Répondre

    je suis coupable pour la 4 et la 5, le reste c’est bon, mais je vais me remettre en question pour la 4 et 5, merci…

23. Par WebArtAddicts le 24 juin 2009 | Répondre

    Effectivement, devant cette prose je ne peux que m’incliner Mais il faut, autant selon ce même article que avis personnel, préciser les dimensions réelles de l’image et non des dimensions de mise en page.

    Dans ce cas là, l’(X)HTML garde sa qualité de descripteur du contenu sans pour autant servir de langage de mise en page.

    Au temps pour moi, donc,
    Bon après midi à vous !

24. Par nico_somb le 5 août 2009 | Répondre

    c’est pas un crime de faire autant de propagande autour de l’OM?

25. Par Kibur le 29 octobre 2009 | Répondre

    Juste un petit message pour vous remercier pour l’article mais aussi pour les commentaire.

    Car c’est tout de même un beau bordel quand on débarque dans la programmation web. Et c’est déjà énorme de savoir ce qu’il ne faut pas faire.

    Super l’article “Afficher une liste HTML sous forme de tableau par CSS” avec des exemples simples et complets. Avec les div c’est la galère et selon le navigateur on n’obtient pas la même chose (ce dernier point m’énerve au plus haut point).

    A défaut d’avoir trouver une méthode simple pour structurer mes pages, j’utilisais pratiquement que les balises table, div, p, include. Maintenant, je devrais presque pouvoir m’en passer.

    Petites questions :
    - pour savoir si un site est codé proprement, il suffit de passer les fichiers html et css au valideur du w3c ?
    - le fait de faire une page correspondant au menu à part et de l’inclure dans les autres, c’est autorisé tout de même ? (avec la balise include pas frame)

    Sinon, je plaide coupable pour :
    - le 1 (car je ne fais pas attention si c’est inline ou block, mais par logique, je place tout de même souvent le inline à l’intérieur du block)
    - le 2, je pense rarement à le mettre
    - le 4, multi récidiviste
    - le 9, idem

26. Par L'équipe Kiwano le 30 octobre 2009 | Répondre

    Merci pour ces encouragements Kibur, ca nous fait sincèrement plaisir.

    Petites réponses :
    Le validateur du W3C te dira effectivement si le code est valide d’un point de vue syntaxique et c’est déjà pas mal ! Cependant il ne te dira pas si ta page est bien élaborée d’un point de vue sémantique car tu es seul(e) à connaître le sens que tu veux donner à tes pages HTML.(Ton titre est il vraiment un titre ? Tes tableaux ne sont ils pas des listes ? Etc.)
    J’imagine que tu parles de l’include PHP ? Si c’est bien le cas : cette fonction qui permet de recopier un code dans un autre est tout à fait recommandable. Elle permet de se simplifier la vie en factorisant des élèment. Il faut juste vérifier que le HTML généré est valide (une erreur classique est d’inclure par exemple une page entière dans une autre et donc de multiplier des balises comme le body dans la même page.)

27. Par Mapics le 4 novembre 2009 | Répondre

    Moi je fonctionne que en include moins de probleme pour changer les contenue sur plein de site en même temps.

28. Par Référencement professionnel le 3 décembre 2009 | Répondre

    Oups, je met souvent border=”0″ si ce n’est tout le temps. Vais devoir changer ma façon de faire.

29. Par antistress le 10 janvier 2010 | Répondre

    Puis-je démarrer un titre sur une page, par exemple avec h3 puis en continuant à la suite avec h4, 5, 6, sans passer par les cases h1 et h2 si je trouve le résultat trop gros ?

30. Par L'équipe Kiwano le 12 janvier 2010 | Répondre

    Bonjour antistress,

    Si j’ai bien compris, ta question est de savoir si on peut commencer une hierarchisation de page par h3.
    Il ne viendrait à personne l’idée de commencer un livre par un sous-chapitre. C’est exactement la même chose sur le web.
    De plus tu te prives de l’impact des balise h1 et h2 dans le référencement de ta page, c’est dommage.
    Alors oui on peut, mais non il faut pas.

31. Par Referencement naturel le 1 mars 2010 | Répondre

    Un excellent résumé que j’aurais aimé reprendre sur mon blog.
    vais devoir peut etre m’en inspirer si vs le permettez.

    Je pense que je proposerais votre blog comme piste de réflexion à mes “élèves” en formation de référencement naturel si vous le permettez.

    Stefano AGBAGLA.

32. Par L'équipe Kiwano le 1 mars 2010 | Répondre

    @Stefano : merci de votre message, vous pouvez bien sûr utiliser nos articles si vous citez vos sources…
    N’oubliez pas : vos cours seront encore plus passionants si vous conservez les exemples sur l’OM !