5568 sujets

Sémantique web et HTML

Il est coutume, sur les sites sémantiquement corrects, de mettre le titre du site en <h1> et le reste en <h2> :

<h1>Mon site à moi</h1>
<h2>Navigation</h2>
<h2>Archives</h2>
...

Seulement, que faire lorsque le titre à afficher est un logo graphique ? Ce qui suit est-il "moralement correct" :

<h1><img src="logo.jpg" alt="texte alternatif" /></h1>

Ou peut être serait il mieux de faire ça :

<h1>Titre</h1>
<img src="logo.jpg" alt="texte alternatif" />

Où le <h1> serait mis en display: none par CSS ?
Modifié le 13 Dec 2004 - 20:49
Solution N°1 car :

1 - display:none pose des problème d'accessibilité

2 - le titre doit avoir la valeur sémantique de H1, que ce soit du texte ou une image

Smiley cligne
Juste deux mots pour rappeler en marge de cette question que display:none est "media-agnostic", c'est à dire qu'il agit qulque-soit le media (print, screen, projection, handheld... speech ou frigidaire Smiley cligne ). Contrairement à une erreur fréquente, display n'est pas une propriété propre aux medias visuels.

La propriété propre aux medias visuels est visibility. Mais hélas, un visibility:hidden sera interprété comme tel par un lecteur d'écran dépendant du navigateur auquel il est associé... et donc ignoré également.

Cela dit, un lecteur d'écran lit le titre <title> de la page. Celui-ci, a priori et selon les conseils de HTML4.01, doit caractériser la ressource prise isolément. Ce qui revient en général à y préciser le titre spécifique du document et le titre du site, ou plutôt de la collection de ressources. C'est aussi ce qui s'avère le plus pratique pour l'utilisateur d'un navigateur vocal, texte ou graphique à onglets.

En fait, le titre du site n'a rien à faire en tant que titre <h?> sur la plus-part des pages, à l'exception évidente de l'accueil, et sans doute de pages précises telles la carte, le glossaire, les pages de sommaires, etc. Mais c'est un sujet qui mérite des explications plus approfondies...

Et le titre d'une collection de ressources peut très bien ne avoir à faire avec celui d'un site...
Modifié le 13 Dec 2004 - 20:50
Le site de Laurent Denis a écrit :

<h1>Blog &amp; Blues</h1>


Laurent Denis a écrit :

En fait, le titre du site n'a rien à faire en tant que titre <h?> sur la plus-part des pages


C'est pas pour dire "bouhhh la honte" ou "bbouhhh il fait pas comme il faut", c'est plutot pour dire, même si dans la logique il vaudrait mieux ne pas le faire, c'est tout de même souvent fait, et en fait, je ne suis pas tellement d'accord avec toi, je pense au contraire qu'un titre de site devrait être en <h1> dans une page, tu parles de "collection de ressources" pour ne pas dire "site web", il est tout de même important de signaler l'appartenance, la provenance d'une collection de ressource ce qu'un titre dans une balise <h1> fait à merveille.

Tu n'es pas d'accord avec ça ?
Modifié le 14 Dec 2004 - 14:36
J'ajouterais qu'en l'absence de moyen pour placer le contenu de <title> dans le corps de la page, il faut bien utiliser un moyen pour placer le titre du site (sinon le visiteur se demandera sur quel site il est, et n'aura pas forcément le reflexe de regarder dans le titre de la fenêtre). Et <h1> est le moyen le plus "sémantiquement proche" pour le faire.
@e-t172> J'imagine Laurent te répondre qu'il faut éduquer le visiteur à utiliser correctement son navigateur, et donc le laisser regarder le titre dans la barre du navigateur (pourvu que le site ne soit pas dans une frame de redirection bidon)... Sur le fond, j'ai tendance à être d'accord, si on mache tout au visiteur, on s'en sors pas... mais sur le concret, je te rejoint Smiley lol
lol

Blog & Blues devrait porter un gros message en rouge en tête de page:
1. ce site sert à tester diverses choses non recommandables (voir la structure et l'utilisation des <h1> dans n'importe quelle autre page du site... ça n'est pas tout à fait aussi simple, c'est très discutable, mais ça pose quelques questions intéressantes AMHA)
2. je n'ai chroniquement jamais le temps d'actualiser son CMS qui produit en général un code décalé par rapport à mes conclusions.

D'autre part, je n'ai jamais dit justement que le titre du site n'avait pas sa place dans la page d'accueil en <h1>, entre autres pages spécifiques Smiley cligne

Egalement: placer le contenu de <title> dans le corps de page est trivial en CSS: une bête affaire de display:block sur le title et son parent. Il faut juste une petite redondance pour que ça passe sur tous les navigateurs récents.

Enfin, Elmoustiko, tu poses la seule vrai question actuelle touchant à la diffusion des Standards Web: l'éducation des auteurs étant désormais en cours, il serait temps de penser à apprendre aux utilisateurs à utiliser le Web. Pensez-vous sérieusement pouvoir faire progresser le Web sans faire progresser les compétences de ses utilisateurs ? J'y reviendrai, car c'est crucial aujourd'hui.

PS: Igor, j'aime beaucoup "media-agnostic", moi aussi Smiley cligne Mais je ne vais pas en revendiquer la parternité, vu que je l'ai littéralement pompé sur un récent article (???) à propos de la dernière bêta de Netscape, qualifiée de "browser-agnostic" (elle implémente en effet à la fois le moteur gecko et le moteur Microsoft).
Tiens... Je me sens très agnostique sur beaucoup de choses touchant au Web et aux standards, en fait Smiley smile
@Laurent, tu pourrais détailler un peu ce que tu veux dire par rapport à l'utilisation du <h1> dans certains cas et d'autre non ??

Sinon pour le blog, je te chariai un peu histoire de, je suis souvent dans le même cas à avoir un site codé avec les pied en comparaison de ce que je prône Smiley lol (y a qu'à voir mon blog !)

Pour l'éducation des utilisateurs, je suis d'accord, mais pas trop, trop vite non plus, à plusieurs reprise, je te lisais écrire ce genre de chose, mais bien souvent, il m'a semblait que tu mettais la charrue avant les boeufs...

Et "l'éducation" des webmestres est de toute façon AMHA loin d'être suffisante pour commencer à s'occuper des utilisateurs, même s'il faut faires les 2 en même temps je pense, tu auras du mal à faire utiliser la navigation par titre (avec les navigateurs qui le permettent) lorsques les titres sont faits avec des <div class="titre"> ou des <span class="titre">, et là les auteurs te répondront que c'est valide Smiley sweatdrop
A ce sujet :
http://www.elmoustikoblog.net/read_article.php?id=38
(tu devrais tiquer avec les racourcis et approximations que j'ai pu faire... j'ai honte Smiley confused )
Modifié le 14 Dec 2004 - 21:40
J'aimerais revenir sur l'utilisation du display: none;

J'ai créé deux feuilles de style différentes, une servant au media screen et l'autre print. Dans la version screen je cache le titre textuel pour afficher une image. Dans la version imprimable j'essaye le plus possible d'obtenir un document pouvant être comparable à ce qu'on fait sous word ou openoffice c'est donc le texte qui est visible cette fois-ci.

Dans le cas ou il n'est utilisé que pour un media screen le display: none; pose-t-il encore des pbs d'accessibilité ?
Ouah la galère. Si j'ai bien compris dans tous les cas c'est une bidouille plus ou moins affreuse qui ne marche qu'a moitié... >___<