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.
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 !
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…
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 !
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!
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 ?
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.
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.
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).
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 ;))
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.
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..
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
etmotto
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 balisemotto
serait complétée par la balisemeta description
.L’intérêt sera d’avoir des balises dont le sens sera identique sur l’ensemble du site : les balises
title
etmeta description
étant susceptibles de changer à chaque page.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 ? 🙂
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
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 unp
, oui, ça fonctionne. Comme remplacer un listeul
par une suite debr
! 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.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 ?
avec une balise code ça passe mieux :
Blabla d’accroche ou slogan
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
marche pas non plus.. arg!
faudrait investir dans un WYSIWYG Bruno :p
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.
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.
« 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 🙂
Luc :
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/
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.
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 ^^
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.
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.
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.
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 :).
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.
« 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 🙂
@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 …