Manifeste pour la création des éléments LOGO et MOTTO dans HTML5

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Manifeste pour la création des éléments LOGO et MOTTO dans HTML5

Ce manifeste pour la création des balises logo et motto dans une prochaine révision des spécifications HTML5 — puisque rien n’est fixé pour l’instant, nous dit-on —  est né du constat que le nom du site et sa tagline se retrouvent sur la quasi-totalité des sites web sans qu’aucun marquage HTML spécifique ne leur soit dédié. Je regrette que les concepteurs des standards du web n’aient pas fait d’entorse à leur régime 100% structurel. Il semble pourtant assez facile de créer les balises logo et motto, ce qui  aurait  le mérite d’être assez rigolo, en plus d’être utile.

Je ne vous promets pas le grand soir, mais juste à penser et à voir !

Salut c’est moi Logo, salut c’est moi Motto ! *

Le logo (logotype) est une représentation graphique qui sert à identifier de manière unique et immédiate une organisation ; Le motto (slogan, baseline, tagline) est un terme italien décrivant de manière formelle les intentions et les motivations de cette même organisation. Notez que l’on dit un logo, des logos mais un motto, des motti (comme un spaghetto, des spaghetti).

<header>
    <logo>css 4 design</logo>
    <motto>HTML5, vous le savez, c'est ma grande passion !</motto>
</header>
Au cas où le W3C ne vienne pas rendre visite à ce modeste blog, je vous invite à utiliser ces balises logo et motto dès maintenant dans vos pages web. Pour celà, il suffit de les créer de la même manière que l’on crée les nouvelles balises HTML5 pour Internet Explorer, soit :
<!--[if IE]>
<script>
    document.createElement("header");
    document.createElement("logo");
    document.createElement("motto");
    document.createElement("article");
    document.createElement("section");
    document.createElement("nav");
    document.createElement("footer");
</script>
<![endif]-->
Ou bien en utilisant html5shiv de Remy Sharp en ajoutant nos deux (prochaines ?) nouvelles balises logo et motto à la suite des autres.

Rapido

N’hésitez pas à faire tourner ce manifeste, en espérant qu’il aura plus de succès que mon Manifeste pour un interlignage minimum syndical pour les blogs !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



39 commentaires pour “Manifeste pour la création des éléments LOGO et MOTTO dans HTML5”

  1. [...] This post was mentioned on Twitter by br1o les bons tuyaux, Sarah Distephano, blajk, Florian, Arthur Tayrac and others. Arthur Tayrac said: RT @br1o Manifeste pour la création des éléments LOGO et MOTTO dans HTML5 http://bit.ly/9jJPbm [...]

  2. Nico dit :

    Est-ce que ça apporte un REEL plus sémantique ?

    En partant de l’idée que la balise logo serait probablement toujours dans la balise header… pas convaincu.

    Quant à la balise motto, je la verrais bien être dans un H1 ou dans un title…

    • Alexandre dit :

      Je rejoins le commentaire de Nicolas : je suis sceptique quand à l’apport de ces balises. Je pense que les balises actuelles permettent déjà de répondre à ce besoin !

  3. Bruno Bichet dit :

    Nico — Ras le bol de la sémantique ;) Maintenant que html5 a bouffé xhtml 1.0, je ne vois pas pourquoi on n’aurait pas le droit d’avoir des balises logo et motto même si elles ont une connotation plus formelle que structurelle. Et encore, je pense que même au niveau « sémantique » ces nouvelles balises en auraient sous le talon aiguille !

    Sinon, j’ai un autre billet en cours de finalisation sur les différents marquages HTML utilisés pour ces types de contenus. Stay tuned!

  4. GizMecano dit :

    J’aurais tendance, de prime abord, à me ranger à la remarque précédente de Nicolas, car je vois mal où cette balise pourrait se trouver hors du (premier) . Cependant, comme on peut utiliser plusieurs fois ou , on devrait pouvoir utiliser plusieurs fois aussi et , et je me demande quels pourraient en être les usages pertinents. Des suggestions ?

    • GizMecano dit :

      Bon, mon commentaire paraît assez illisible, pour la bonne et simple raison que j’ai écrit le nom des balises avec des crochets qu’ils ont été reconnus comme… des balises. C’est ballot, ça…

      Donc, en version lisible, je disais :

      J’aurais tendance, de prime abord, à me ranger à la remarque précédente de Nicolas, car je vois mal où cette balise pourrait se trouver hors du (premier) header. Cependant, comme on peut utiliser plusieurs fois header ou footer, on devrait pouvoir utiliser plusieurs fois aussi logo et motto, et je me demande quels pourraient en être les usages pertinents. Des suggestions ?

      Désolé pour la redite.

  5. Bruno Bichet dit :

    GizMecano — je pense qu’on pourrait s’inspirer de ce qui existe pour la balise address qui change légèrement de « sens » selon le contexte où elle se trouve.

    Mais mon propos n’est pas de dire comment le W3C pourrait implémenter ces nouvelles balises. Je suis convaincu qu’il y a un besoin, reste à trouver comment le satisfaire dans les règles de l’art.

    • GizMecano dit :

      Je pense comprendre ce que tu veux dire, mais dans ce cas, n’y aurait-il pas d’autres besoins, par exemple pour préciser le type de certaines images comme pourrait le faire une balise logo ?

      On peut penser aux icônes, aux captures d’écran, et bien entendu, aux photographies (mais sans doute encore d’autres types qui ne me viennent pas à l’esprit).

  6. Bruno Bichet dit :

    GizMecano — Certainement, mais un logo n’est pas forcément une image, il peut s’agir d’un simple texte avec ou sans mise en forme CSS3. Je pense que pour les autres type de contenu, on peut compter sur les microformats.

    Je parle surtout du logo et du motto car ce sont vraiment des éléments incontournables sur le web. Amha, il vaudrait mieux que le W3C planche sur des choses comme ça qui parlent aux webdesigners, plutôt que de réinventer jQuery, par exemple ;))

  7. Marco dit :

    Heu… l’idée de balises Logo et Motto peut être intéressante, mais par contre, pour son application, tu prendre le problème à l’envers : aucun intéret d’utiliser ces balises si elles ne sont pas spécifiées dans les specs. ça n’aurait aucune valeur sémantique. Pour faire les choses dans l’ordre, puisqu’effectivement, il y a peu de chances que le W3C passe chez toi ;), utilise plutôt les moyens qu’ils mettent à dispo : http://dev.w3.org/html5/spec/Overview.html#status-of-this-document Bonne soirée, Marco.

  8. nourcy dit :

    Assez d’accord avec les autres, j’ai un peu de mal a comprendre l’intérêt sémantique et meme d’un point de vue référencement.

    Pour ma part, je serais plus d’avis de mettre une balise h1 et mon logo dedans (qu’il soit image ou text stylisé). D’un point de vue référencement, le alt de l’image sera repris dans le h1 par les robots et si c’est du texte tout va bien. Ensuite pour le slogan, j’ai envie de dire que sa place est dans la balise title ou dans la meta description..

  9. Bruno Bichet dit :

    nourcy — Ces balises auront un intérêt sémantique lorsque les navigateurs auront prévu de les intégrer et de leur donner un affichage spécifique qui fera sens lors de l’affichage des documents sans mise en forme CSS.

    Ensuite, je suis persuadé que ces balises logo et motto présenteront un intérêt pour les moteurs de recherche, notamment en ce qui concerne la compréhension des objectifs d’un site web.

    La balise logo serait complétée par la balise title et la balise motto serait complétée par la balise meta description.

    L’intérêt sera d’avoir des balises dont le sens sera identique sur l’ensemble du site : les balises title et meta description étant susceptibles de changer à chaque page.

    • nourcy dit :

      D’accord, donc par exemple dans un billet pour un site de type blog, tu aurais dans l’ordre d’importance :

      logo (général) motto (général) title (relatif à la page) description, keywords, etc .. (relatif à la page) header h1 éventuellement hgroup h2, etc … (clairement relatif à la page)

      Dans ce sens, oui je suis tout à fait d’accord avec toi que ces balises ont un intérêt

      J’ai bon ? :)

  10. Luc dit :

    Je ne crois pas que l’intérêt de la sémantique d’une page web doit se réfléchir en terme d’intérêt pour les robots, ou pour le SEO, ou pour le webdesigner…

    la question pour moi est, qu’est ce que ces balises pourraient apporter pour l’utilisateur final ? en terme d’accessibilité principalement…

    un logo… si c’est une image, ça peut se mettre dans une balise img. un slogan, ça peut se mettre dans un p

    d’ailleurs, un slogan ne se suffit il pas a lui même pour être compris ?

    Prenons un aveugle qui passerait sur la page, la balise « motto » pourrai lui indiquer que c’est un slogan qu’il lit.

    mais en général, quand on « entend » un slogan, on sait que c’est un slogan.

    là ou par contre, il pourrai y avoir de l’intérêt, c’est d’avoir de nouveau éléments de header qui eux pourraient être utiliser automatiquement par les logiciels/robots afin d’afficher de l’information supplémentaire hors de la page web elle même. dans les favoris par exemple.

    L’idée de rajouter des balises est interessante, mais je ne sais pas si cela sera très utile.

    c’est comme le HTML5. a quoi bon utiliser, et retenir surtout, les nouvelles balises si je peux faire la même chose avec les anciennes ?

    temps que la sémantique ne sera pas utilisée réellement, ça ne servira a rien à mettre en place ce genre de structures html…. hélas.

    et au niveau de l’utilisation, je crois que la pluvalue doit se faire au niveau de l’utilisateur, pas du marketeur

  11. Bruno Bichet dit :

    nourcy — \o/ oui, c’est ça, tu as résumé ce que je voulais dire mieux que je n’aurais su le faire ;)

    Luc — Mettre un logo dans un img et un slogan dans un p, oui, ça fonctionne. Comme remplacer un liste ul par une suite de br ! Ca fonctionne aussi ^^

    C’est pareil pour la mise en page avec des tableaux : la plupart du temps ça fonctionne assez bien et les raisons concernant la maintenance plus ou moins facile n’est souvent qu’un argument assez creux quand on voit la durée de vie moyenne d’un design de site web.

    Après, en ce qui concerne les moteurs de recherche, je pense qu’il serait bien qu’ils puissent différencier un slogan d’une description ou de tout autre contenu récurrent sur la page.

    Pour ce qui est des anciennes balises vs. les nouvelles, l’intérêt que j’y trouve est pour l’instant surtout esthétique : on peut très bien faire de la rédaction web en répétant les termes « il y a » mais c’est mieux d’avoir du vocabulaire supplémentaire pour éviter la monotonie.

    Et surtout ça m’oblige à me poser des questions sur les types de contenus auxquels j’ai à faire pour savoir comment les hiérarchiser visuellement dans le design, et pas uniquement pour leur appliquer un style CSS, auquel cas, effectivement, une balise div suffit largement.

  12. iManu dit :

    Bruno – Je ne voit pas l’intérêt de multiplier les balises à l’infini. Pour quoi ne pas utiliser les microformats ? Les moteurs de recherches les lisent très bien et de mieux en mieux :

    Blabla d’accroche ou slogan

    Et pis c’est tout ! On évite une diarrhée de balises et les éléments de type logo ou motto n’étant pas structurels, autant utiliser le pouvoir de la sémantique, non ?

  13. iManu dit :

    avec une balise code ça passe mieux :

    Blabla d’accroche ou slogan

  14. iManu dit :

    Oops ben non :

    désolé pour le flood Bruno, je voulais indiquer ceci

    figure role= »logo » img src= »log.png » alt= »mon logo » /figure figcaption role= »motto » Blabla d’accroche ou slogan /figcaption

  15. nourcy dit :

    faudrait investir dans un WYSIWYG Bruno :p

  16. briegel dit :

    Si j’ai bien compris, ce serait pour ajouter un niveau d’information sur le « propriétaire » du site ? Bonne idée, d’ailleurs ce serait super de pouvoir faire quelques trucs un peu plus « fun » qu’un pauvre fichier *.ico de 32×32 avec la balise logo, comme une image SVG, un document flash (ouille, aïe, me tapez pas !).

    En revanche j’ai du mal avec le script que tu as donné : les éléments DOM sont bien créés en mémoire, mais ils ne sont pas ajoutés au DOM, donc invisible pour les crawlers, puisqu’ils n’appartiennent pas au document HTML.

  17. z0va dit :

    En effet il y a un oubli dans le code JavaScript (pour IE), pour ajouter les éléments et ça devrait se présenter comme cela par exemple : document.body.appendChild(document.createElement("header"));

    Sinon je ne vois pas de réel intérêt dans l’ajout de ces balises, pour moi ce genre d’informations auraient tout intérêt à se trouver avec les balises meta puisque ces informations n’ont pas de réelle pertinence avec le contenu en lui même.

  18. Luc dit :

    « C’est pareil pour la mise en page avec des tableaux : la plupart du temps ça fonctionne assez bien ».

    @br1o : ha non, pas du tout d’accord. il y a une vrai raison (outre l’aspect technique) à ne pas faire de mise en page avec des tableau. et encore une fois, cette raison est centrée sur l’utilisateur final. en l’occurrence, les aveugles qui naviguent avec un lecteur d’écran.

    quand ton lecteur d’écran parcours la page, il se sert des balises pour dire de quel types de contenus il s’agit.

    donc chaque fois qu’il croire une table il dit « tableau » chaque fois qu’il voit un « tr » il dit ligne etc…

    mettre une suite d’items dans un p avec des br c’est moins bien que dans de ul/li car justement, dans le cas du paragraphe avec des retours lignes, on perd une information la séparation réelles des items.

    je pense d’ailleurs que le lecteur d’écran annonce une liste.

    Si l’on rapporte ça au cas du slogan logo, et qu’on imagine un logo/slogan, je pense que ce contenu est suffisement parlant pour être compris directement sans passer par une balise sémantique.

    d’ailleur, si l’on considère toujours le lecteur d’écran, sur chaque page, le lecteur annoncerai « logo : alt de l’image » si l’on considère que le logo est une image ou « logo : nom de la marque » , puis « slogan : le slogan ».

    ça me semble bien superflue le lecteur d’écran n’a pas besoins de la porté sémantique exemple : « castorama : chez casto il y a tout ce qu’il faut » est amplement suffisant pour comprendre que le premier mot est la marque, le second le slogan.

    par contre, avoir ces infos dans le « head » là je dis pourquoi pas… une balise « logo » pourrai remplacer la favicon pour bien des applications :)

  19. Bruno Bichet dit :

    Luc :

    ha non, pas du tout d’accord. il y a une vrai raison (outre l’aspect technique) à ne pas faire de mise en page avec des tableau

    D’où le « la plupart du temps »

    En plus, je pense qu’il existe des moyens de rendre des tableaux accessibles (je me fais l’avocat du diable, on est bien d’accord, hein ?) : http://www.pompage.net/pompe/autableau/

    je pense d’ailleurs que le lecteur d’écran annonce une liste

    Comme beaucoup de gens, « tu penses que » les lecteurs d’écran, etc. Comme moi, tu dois faire partie des gens qui défendent le point de vue de l’accessibilité des sites web pour les mal-voyants sans avoir jamais installé ou essayé un lecteur d’écran.

    « castorama : chez casto il y a tout ce qu’il faut » est amplement suffisant pour comprendre que le premier mot est la marque, le second le slogan

    Ben non, d’abord casto n’est peut-être pas implanté dans tous les pays francophones et par ailleurs, il n’y a pas que des francophones dans le monde ^^

    une balise « logo » pourrai remplacer la favicon pour bien des applications :)

    Oui, bien vu. Mais le navigateur pourrait très bien utiliser l’image située dans la balise logo pour la transformer automatiquement en favicon s’il n’existe pas déjà dans les meta.

  20. z0va dit :

    si vous souhaitez voir à quoi ressemble la lecture d’un tableau via un lecteur d’écran je vous conseille l’excellent access-key. On peut voir via le lien ci-dessus comment rendre un tableau accessible, mais il y a aussi toutes sortes de conseils avec vidéos à l’appuie en terme d’accessibilité, c’est pour moi un site indispensable.

    • Bruno Bichet dit :

      Z0va — Merci pour Access-Key, c’est effectivement un document très utile. Il en faudrait beaucoup d’autres dans le même genre pour entendre les différentes sorties audio en fonction du balisage HTML d’un document.

  21. jiann dit :

    Il me semble quand meme -outre les histoires de semantique- qu’une demultiplication à outrance des balises risque d’entrainer des confusions, et une uniformisation des pages.

    Et puis, immaginons que j’ai plusieurs logos sur ma page. Comment je fais pour les differencier si il y a une balise specifique ?

    Il me semble, au nom de tous les cas particuliers, qu’il vaut mieux garder moins de balises, mais plus souples :).

  22. Bruno Bichet dit :

    jiann — A l’origine, ce billet était un deux parties, ce manifeste et une autre qui faisait un rapide tour des différents types de marquage HTML que l’on peut rencontrer sur le web pour le logo et la tagline.

    J’ai choisi de scinder le billet en deux car en cours de route, j’ai eu une autre idée pour l’autre partie qui devrait apparaitre bientôt.

    En gros, il y a un nombre étonnant de marquages différents juste pour mettre un logo et un bout de texte, ce qui a motivé cette proposition.

  23. Luc dit :

    « En plus, je pense qu’il existe des moyens de rendre des tableaux accessibles (je me fais l’avocat du diable, on est bien d’accord, hein ?) »

    => Ha oui, on peut rendre des tableaux accessible. enfin même à la base, les tableaux sont accessible. mais servent à mettre en forme des données tabulées. (un tableau de score par exemple). Pas besoins de faire l’avocat du diable, c’est juste légitime d’utiliser un tableau a bon escient. MAIS PAS pour de la mise en forme :)

    « Ben non, d’abord casto n’est peut-être pas implanté dans tous les pays francophones et par ailleurs, il n’y a pas que des francophones dans le monde ^^ »

    là on rentre dans des contraintes de localisations, et on peut poser se poser la question de savoir si la perception d’un slogan traduit reste toujours assez forte pour être comprise en temps que tel ? Je pense que sans études scientifiques, il sera difficile de répondre :p

    sinon, je suis d’accord avec jiann :)

  24. jiann dit :

    @Bruno C’est surement tres etrange, mais j’aime voir ma div comme une gosse boulle de pate a modeler, modifiable a volonté, et dans laquelle je peux mettre ce que je veux. Chacun a sa façon de coder non ? ;-)

    @Luc Avant meme de parler d’internationalisation, il faut faire la difference entre slogan, accroche, signature …

  25. [...] page qui aura le logo ou le motto le plus [...]

  26. [...] composés HTML pour le logo et la « baseline » Mon petit manifeste concernant la création des balises logo et motto dans les spécifications HTML5 n’a pas encore eu l’effet escompté. En attendant que le [...]

  27. [...] de titre, comme un titre et son sous-titre ou un titre et le slogan associé (un bon candidat pour Logo et Motto, faute de [...]

  28. [...] se penchera-t-il sur ma proposition de créer les éléments logo et motto ? Qui sait…→ Manifeste pour la création des éléments LOGO et MOTTO dans HTML5 ! Articles sur le même sujetManifeste pour la création des éléments LOGO et MOTTO dans [...]

  29. [...] subline pourrait être utilisée pour le marquage des données telles que sous-titre, slogan, motto, informations relatives aux auteurs (bylines), [...]

  30. parnksor@asail.com dit :

    représentation graphique qui sert à identifier de nike tn requin manière unique et immédiate une organisation

  31. comme un spaghetto dit :

    Voici trois exemple à tester pour obtenir un interlignage pour une chaussures Timberland personne valide ou en situation de handicap

  32. andre dit :

    En partant de l’idée que la balise logo serait probablement toujours dans la balise header… pas convaincu.http://www.andre-santini.fr Pas besoins de faire l’avocat du diable, c’est juste légitime d’utiliser un tableau a bon escient.

  33. tradethik dit :

    Et pis c’est tout ! On évite une diarrhée de balises et les éléments de type logo ou motto n’étant pas structurels, http://www.tradethik.fr/ autant utiliser le pouvoir de la sémantique, non

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site