5568 sujets

Sémantique web et HTML

Titre H1, H2, H3... dans un lien en display:block et W3C

Bonjour,


Je n'arrive pas à valider ce code au W3C :
<a href="#" class="blocks">
<h3><img src="images/leaf.png" alt="" align="middle"/>Taxi <span style="color:#b88c0c">service</span></h3>
<center><img src="images/pics3.jpg" alt="" class="img"/></center>
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Etiam eu augue sed neque aliquam tincidunt elementum non nibh. Ut eget pulvinar lacus. 
</a>


Et voici la partie de CSS concernée :
a.blocks {
	width:273px;
	margin:9px;
	padding:10px;
	float:left;
	display:block;
	border:1px solid transparent;
	text-decoration:none;
	text-align:center;
	background: #fff;
}
.blocks:hover {
	border:1px solid #ccc;
	background: #EFEFEF;
}


Mon soucis c'est qu'il n'est pas possible d'insérer un élément de type "block" (comme les h1, h2, h3...)
J'aurais pu résoudre le problème en reprenant créant un nouveau style reprenant les propriétés de mon h1 et insérer le contenu de mon h1 dans un <span class="style_identique_au_h1>Mon titre</span>. Mais en terme de référencement, on perd toute l'importance des titres.

Vous l'avez compris, l'idée est d'avoir un bloc avec un titre, englobé par un lien.

Comment résoudre mon problème? Smiley rolleyes

Je vous remercie par avance pour votre aide.


Très cordialement,
Julien.
Modifié par Julien1926 (07 May 2010 - 12:03)
Si tu n'es pas en (x)html5, tu ne peux pas mettre un <h3> dans une ancre (<a>).

Il faut mettre des liens à l'intérieur du h3 et du paragraphe suivant.

P.S. : faudrait revoir ton code, il y a des balises qui ne sont pas fermée, des balises obsolètes de présentation (<center>), etc. Un tutoriel pour débutant?
J'ai omis de préciser que je suis en xHTML 1.0 Transitional

Qu'apporte le xHTML 5? Jusqu'à maintenant, j'ai toujours eu pour habitude de découper mes design en xHTML 1.0 Transitional + CSS 2.1 (vivement CSS3...)
Julien1926 a écrit :
J'ai omis de préciser que je suis en xHTML 1.0 Transitional


Peu importe, ce n'est pas valide. Smiley cligne

Julien1926 a écrit :
Qu'apporte le xHTML 5? Jusqu'à maintenant, j'ai toujours eu pour habitude de découper mes design en xHTML 1.0 Transitional + CSS 2.1 (vivement CSS3...)


Reste avec ce doctype là alors, pas la peine de changer pour html5, il y a des contraintes à connaître, notamment concernant IE.
Pour en revenir à nos moutons, il n'existe aucune alternative pour insérer un titre h1, h2 dans un lien en display:block?

Que me conseillez-vous de faire? Sortir le titre du bloc vous semble la solution la plus évidente? (en y mettant un le même lien dessus pour conserver un référencement optimum)
Julien1926 a écrit :
Que me conseillez-vous de faire? Sortir le titre du bloc vous semble la solution la plus évidente? (en y mettant un le même lien dessus pour conserver un référencement optimum)

Difficile de te donner une réponse pertinente sans connaître le contenu.
Un exemple de code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style media="screen">

.blocks { 
    width:273px; 
    margin:9px; 
    padding:10px; 
    float:left; 
    display:block; 
    border:1px solid transparent; 
    text-align:center; 
    background: #fff; 
    border:1px solid #000; 
} 
.blocks a {
    text-decoration:none; 
	
	}
.blocks:hover, div.hover { 
    border:1px solid #ccc; 
    background: #EFEFEF; 
}

.blocks h3 span {
	color:#b88c0c;
}

</style>
</head>
<body>

<div class="blocks"> 
<h3><a href=""><img src="images/leaf.png" alt="" />Taxi <span>service</span></a></h3> 

<p>
<a href="">
<img src="images/pics3.jpg" height="30" width="30" alt="" class="sep"/> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
Etiam eu augue sed neque aliquam tincidunt elementum non nibh. Ut eget pulvinar lacus. 
</a>
</p> 
</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
		$(document).ready( function () {
				$(".blocks").hover( 
					function () {
						//trucs à faire pendant le hover
						$(this).toggleClass("hover");
					},
					function () {
						//out
						$(this).toggleClass("hover");
					}
				);
		});
</script>

</body>
</html>


Le script est à réserver à IE6 (avec les commentaires conditionnels) qui ne comprend pas :hover autre que sur des liens...
Pour l'exemple que tu proposes, la solution valide et logique est <h3><a ...>...</h3>. L'image et le span peuvent rester dans le h3. Pour le p qui suit, il faut que tu m'expliques d'abord l'intérêt d'avoir un lien qui s'étend sur tout un paragraphe. Un lien ne doit pas avoir un intitulé trop long, c'est pas bon pour l'accessibilité et probablement pas trop pour le référencement non plus (*). Si tu cherches à faire un effet visuel et/ou une zone réactive, il y a d'autres alternatives plus clean.

(*) Si on se met à la place d'un moteur de recherche, quel(s) mot(s) clé(s) attribue-t-on à la cible du lien dans un tel cas ?
Je ne pouvais pas m'attendre à une réponse plus complète... merci pour votre aide Smiley biggrin

Au plaisir de se recroiser sur le forum!
Sujet clos
Aller à