<C²: webløg />

Courriel - email address

Avatar Denis

mercredi 31 mars 2004
par Denis Boudreau

Débat : logo et balise h1

Je sais, la même question a été lancée sur un carnet Web anglophone il y a de cela quelques semaines. À la lumière des réflexions suscitées, j'ai eu envie de tenter l'expérience avec vous tous. Je vais probablement en faire un exercice régulier si le modèle trouve preneur. Je vous filerai bientôt ma source, pour que vous puissiez aller comparer nos opinions à celles de ceux qui se sont prêté au jeu avant nous.

Mettre un logo dans un h1, c'est bon ou mauvais ?

Denis Boudreau | 2004.03.31 @ 23:19

Alors, qu'en pensez-vous ?

Voici ce que vous aviez à en dire... vos impressions, recueillies à vif.

2004.04.01 @ 00:36 par s t e f

Hé hé, Denis, on se croirait sur [je ne donne pas la source pour pas ruiner ton effet] :)

Bon, il y a déjà plein d'endroits où les gens ont donné leur avis là-dessus : le H1 donne l'information importante de la page.

En l'occurence, un article devrait comporter un H1 reprenant son titre.

Le titre du site, quelque part, est sur la page moins pertinent que celui de l'article, il ne doit donc pas avoir le même 'poids symbolique', donc peut-être que le H1 ne se justifie pas pour le logo du site.

(et tout ça de la part d'un mec dont le logo est dans un H1 et les titres d'articles dans des H2... quand je te dis que je dois le refaire... ;))

Haut retour au début de la page

2004.04.01 @ 01:22 par katsoura

N'étant pas connaisseur j'ai regardé le code source de cybercodeur. J'ai trouvé un h2 sur la date (pertinent?) mais point de h1. Personnelement je ne mettrais pas le logo dans le h1 réservé au titre uniquement.

Haut retour au début de la page

2004.04.01 @ 02:01 par Darken

Bah moi je nage encore entre deux eaux. Selon les designs je change, je n'arrive toujours pas à me décider.

1/
Dans mon design précédent, j'avais un div de tête qui contenait le logo et la navigation. En h1, j'avais le titre de la page.

2/
Maintenant, en h1 j'ai le titre de mon site, remplacé par un logo en CSS. Je n'ai plus de titre de page obligatoire (ou alors un h2 parfois).

Dans le 2/ je trouve plaisant de voir le titre du site qui s'affiche quand on retire la feuille de style. Il précéde aussi idéalement un paragraphe de description du site.

Dans le 1/ je trouve plaisant de ne pas trop donner de poids au titre du site, c'est la page qui devrait être plus importante, d'autant plus que le nom du site se trouve déja dans l'élément title du head.

Je continue à réfléchir à la meilleure solution, et je suis très intéressé par les réflexions tiers sur le sujet :)

Haut retour au début de la page

2004.04.01 @ 02:09 par HUC Stéphane

Et, si tout simplement le Logo était inséré en CSS en background du titre h1 !
Non ?...

Afin, que le Logo reste bel et bien un élèment de publication paginée !!!

Une piste à creuser ...

Haut retour au début de la page

2004.04.01 @ 03:44 par Eric Daspet

Ah non stéphane. Le logo n'est pas là que pour la présentation, il donne une réelle information utile au visiteur. S'il est présent il doit donc être sous la forme d'une image classique HTML avec un texte alternatif reprénant le nom du site ou le nom symbolisé par le logo, sinon celui qui n'a pas de la présentation perd de l'information.

Après à vous de voir si vous le considérez comme un titre ('Site X : '), un peu comme une catégorie ('vous êtes sur le site X') ou comme une métadonné ('cette page appartient au site X').

Les trois approches se valent à mon avis. Avec la première je serai tenté de faire un <h1>Titre du site : Titre de la page</h1>. Avec la seconde je suis tenté de faire des <h1>Titre du site</h1><h2>Titre de la page</h2>. Avec la troisème l'image se trouve en haut mais sans balise de titre <h?>.

Tout dépend je pense de l'indépendance que vous avez entre vos pages et votre site. Pour des articles indépendants le site est plus une métadonnée qu'un titre. Pour des billets comme dans un blog je pencherai plus pour la première forme (titre du site et de la page en un seul). Pour un classement de photos par contre je pencherai plus pour la seconde forme (un <h1> et un <h2>)

Haut retour au début de la page

2004.04.01 @ 04:10 par Bobe

Si le logo fait office de titre, il va dans un h1. CQFD

Haut retour au début de la page

2004.04.01 @ 06:14 par Normand Lamoureux

Puisque le (X)HTML vise à identifier, grouper et séparer les diverses parties du contenu et que les logos ont une valeur informative, pourquoi pas une future balise <logo></logo> ?

En attendant, moi je mets le logo dans un <h1>, le titre du site dans un <h2> et le titre de la page dans un <h3>.

Pourquoi ? Parce que :

1) les balises <h?> ne sont pas des balises de titre mais des balises d'en-tête (nuance) ;

2) un logo n'est pas une métadonnée, mais une information essentielle à qui veut savoir où il se trouve (d'où l'importance de le rendre accessible) ;

3) les balises d'en-tête sont hiérarchiquement ordonnées pour aller du plus général au moins général ;

4) le logo est plus général que le titre du site, qui à son tour est plus général que le titre de la page.

Haut retour au début de la page

2004.04.01 @ 07:04 par gou

Personnellement, comme travailleur du gouvernement du Québec, je propose l'utilisation du H1 pour la signature du gouvernement (quand on parle d'une signature, il y a le nom et un logotype).

Par exemple, je mets la balise H1 en texte: «Gouvernement du Québec» et, par CSS, j'applique les règles visuelles du PIV (http://www.piv.gouv.qc.ca). J'utilise l'une des méthodes de remplacement d'image bien connue des lecteurs de cybercodeur.

L'avantage, c'est que j'ai un équivalent textuel que je peux utiliser dans d'autres contextes que l'écran (impression, PDA...). J'en suis encore au début de mes réflexions, mais ça fonctionnne assez bien.

Pour ce qui est d'une entreprise, le logo est souvent uniquement visuel et ne comporte pas le nom de la compagnie. À ce moment, l'utilsation d'une balise textuelle H1 n'est peut-être pas recommandé car il n'y a pas d'équivalent texte.

Le H1 devrait représenter le titre de la page, et non le nom de la compagnie car si on se réfère à la définition des Headings du W3C:

«Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.»

Si on faisait une table des matières, le H1 serait répété avec le nom de la compagnie...

En écrivant ce billet, je dois avouer que je réfléchis et me demande si mon approche est la bonne finalement! je retourne sur les planches à dessin!!

Haut retour au début de la page

2004.04.01 @ 11:28 par Raphaël

Définition d'une titre d'après mon dictionnaire (Hachette encyclopédique) : un titre donne un nom au contenu en même temps qu'il évoque celui-ci. Or le role premier d'un nom est de différencier plusieurs objets et de désigner l'un d'entre eux en particulier.

Dans le cas d'une page interne ceci signifie que mon logo désignera le contenu si j'utilise h1 ; donc tout mes contenus auront le même nom. D'un point de vue structurel il y aurait donc impossibilité de désigner une page en utilisant son titre. Ce qui est pourtant son but. Dans les pages internes le logo est plutot un élément visuel dont le rôle est de rappeller le nom du site qui porte le contenu, une sorte d'élément de navigation.

En revanche dans le cas d'une page d'accueil tout dépend de la nature de la page, porte d'entrée ou résumé du site.

D'un point de vue marketing, un logo est un signe distinctif de la marque qu'il représente, au même titre que la couleur, les polices, l'ambiance du document, bref c'est un élément de la charte graphique. Donc il devrait être en image de fond css d'un texte dont le contenu est le nom du site ou de l'organisation.

Haut retour au début de la page

2004.04.01 @ 22:31 par Laurent Denis

Sans avis tranché la-dessus, je retiens l'analyse d'Eric.

Mais il existe aussi une balise... <title>. Difficile de poser la question titre de site / titre de page sans la prendre en compte. Classiquement, le <title> est de la forme 'Site - page' ou 'page - site'.

En fait, je me demande si l'info 'nom du site' a systématiquement sa place dans la page. Même si tous les utilisateurs ne savent pas où regarder dans leur media pour lire le title.

Enfin, mettre un logo dans un h1:
- en dur, tant qu'il est restitué en toutes lettres par un alt... oui.
- en background CSS uniquement... l'info est perdue à moins de passer par des bidouilles pas très propre.
- moitié-moitié me semble la meilleure solution : texte du logo en dur dans le h1, habillage graphique en styles et background CSS, contenu généré...


Haut retour au début de la page

2004.04.01 @ 22:55 par Moosh

En fait je ne m'étais jamais posé la question, donc juste un merci pour ce nouveau (pour moi) sujet de réflexion.

Là sans avoir lu les réponses des autres et comment utilisateur qui ne s'est jamais intérressé à la question je répondrais à la volée. 'je ne vois pas quand ca se justifie, puisque je vois le logo plus dans un 'DIV commun à toute mes pages', souvent bannière de haut. Et _mes_ H1 comme venant après.
Mais (même si ca énèrve certain) je n'utilise que très peu de H1 parce que sans CSS ils sont trop gros dans bcp de layout.

Allez zou maintenant je vais m'enrichir des autres commentaires

Haut retour au début de la page

2004.04.02 @ 06:33 par Kathleen Gagné

Je tente un essai
La première question à se poser est à qui sert la balise H1.
Quelqu’un qui peut décoder visuellement une interface n’a pas besoin de l’utilité de la balise h1. Les éléments sont placés graphiquement pour qu’il puisse les lires logiquement.
C’est la machine qui à besoin de la balise H1. C’est elle qui décode pour l’homme ou pour d’autre système.
Une image placée dans cette balise, avec un texte alternatif signifiera que le visuel d’une compagnie, par exemple, est plus important que la compagnie elle-même. Pour une machine, actuellement, une image n’est pas décodable à proprement parler. De plus, la machine devra décodé le texte alternatif pour faire comprendre à l’internaute se qu’il y a dans la balise H1.
Conséquemment la balise H1 se doit de contenir du texte, même si en finalité la balise n’apparaît pas visuellement lorsque le fureteur affiche la page. Le logo ou le visuel de la compagnie peut apparaître autrement que dans la hiérarchie des H.
Pour déterminer le choix du texte de la balise H1, maintenant.
Partons sur le principe que les métadonnées donnent l’information sur la compagnie, l’auteur, les dates de mise à jour, etc., en se qui concerne le site, la section du site ou la page.
Donc la balise H1 devrait être utilisée pour signifier la généralité du contenu de se qui vient après elle. Se que l’on appel de titre de la page lorsque tous les éléments qui complètent se titre sont dans la page, soit par navigation ou soit directement.
Par exemple :
Page 1
Mon titre H1 est : les félins
En H2 j’ai plusieurs races de félins en hyperlien qui amènent sur d’autres pages.

Page 2
Mon titre de page est H2 : les lions
Il n’y a pas de H1 puisqu’il est utilisé pour une idée générale déjà exploité qui est les félins, il faut être conséquent pour un site complet et non pour une page unique.

Haut retour au début de la page

2004.04.02 @ 12:45 par Gloom

Tout ce que je viens de lire me fait réfléchir, mais, je continue actuellement à penser que si le texte contenu dans l'image est à l'importance d'un texte que l'on mettrais dans une hiérarchie de H comme le titre du site (bien sûr on peut se demaner si un titre à bien ça place dans un header, il me semble que oui, mais, je n'en suis plus si sûr), donc, pour autant qu'on mette le texte en question dans l'attribut alt, on peut mettre l'image dans le h1, sinon, un 'logo' sans contenu textuel représentatif à le 'poid' qu'il mérite sans être dans une balise de type H.

J'ai déjà essayer de d'insérer une image en CSS comme background d'un h1, il s'agissait d'un cadre qui entourais le texte; j'était tout fier d'avoir créer cette technique (même si il y a sûrement d'autre personne qui y ont pensé avant moi, je n'en avais jamais entendu parler), puis j'ai constaté que la plupart des navigateurs Gecko on la mauvaise idée de faire un zoom sur le texte uniquement (à ce point de vue là, je préfère l'idée d'Opera qui est de faire un zoom réel), ainsi, définire une valeur en px uniquement pour ce texte qui est contenue dans l'image ne sert à rien si quelqu'un fait un zoom, le texte déborde de l'image. En fait, il me semble que, malgré l'abut de taille de texte en px, si une taille est définit en px, c'est qu'il y a (normalement) une raison et que donc, à moins d'un zoom réel sur tout le site, cette taille ne doit pas bouger; ça m'a démoraliser, j'ai fait une image avec le texte en question (qui est le titre du site) et en alt le même texte, j'aurais préférer que le texte soit réelement du texte, mais, il faut bien faire avec.

Haut retour au début de la page

2004.04.04 @ 06:48 par faden

Pour moi le plus important c'est le document présent. Le logo de l'entreprise est certe important mais ce n'est pas l'information essentielle que le visiteur est venu chercher mais un repère et un élément de navigation.

<title>ma page - mon site</title>

<img src='logo' alt='mon site' id='logo'>

<h1>ma page</h1>
<h2>...</h2>
<h2>...</h2>

Haut retour au début de la page

Les commentaires et trackbacks sont désormais fermés. Pour toute remarque, vous pouvez toujours nous contacter.

Pisteur (Trackback)