5568 sujets

Sémantique web et HTML

Image dans un <h1> {RÉSOLU}

Bonjour, J'ai vue sur le site de w3.org:



<h1><img src="Titre du site en image.jpg" alt="Titre du Site en image" /></h1>


il serait pas plutot préférable de mettre notre h1 hidden et mettre l'image par la suite? LEquel est le mieux d'apres vous?


/*css */
.hidden{
   visibility: hidden;
}

<h1 class="hidden">TItre du site</h1>
<img src="#" alt="Titre du site en image" />

Modifié par bensti2 (24 Feb 2006 - 15:21)
Ta suggestion ne convient pas en l'état pour deux raisons:
1. Sur la forme, ainsi écrit, ton code n'est pas valide: l'image doit être incluse dans un paragraphe, un titre ou autre élément du même genre.
2. Sur le fond, l'image fait partie du titre. En tant que telle, elle doit donc être incluse dans le h1.
Modifié par Gilles (23 Feb 2006 - 18:22)
Je rajouterais qu'en utilisant visibility:hidden (c'est aussi valable pour display:none), tu caches également le texte pour ceux à qui tu croyais justement ne pas le masquer, en l'occurence pour les synthèses vocales, lignes braille, etc.
Gilles a écrit :
Ta suggestion ne convient pas en l'état pour deux raisons:
1. Sur la forme, ainsi écrit, ton code n'est pas valide: l'image doit être incluse dans un paragraphe, un titre ou autre élément du même genre.


Pour préciser la remarque de Gilles, si ton balisage est du type :

<body>
<h1 class="hidden">TItre du site</h1>
<img src="#" alt="Titre du site en image" />
</body>

alors ce n'est valide

avec :

<body>
<h1 class="hidden">TItre du site</h1>
<div> <!-- ou p -->
<img src="#" alt="Titre du site en image" />
</div>
</body>

alors ça l'est

mais avec :

<body>
<div> <!-- et surtout pas p -->
<h1 class="hidden">TItre du site</h1>
<img src="#" alt="Titre du site en image" />
<div>
</body>

C'est également valide.

Le point important c'est que body ne peut pas être parent direct d'un élément inline. Ce qu'est l'élément img.
Modifié par clb56 (23 Feb 2006 - 18:46)
Sujet clos
Aller à