5568 sujets

Sémantique web et HTML

Erreurs détectées par Validator

Bonjour à toutes et à tous,

Erreurs détectées par Validator 


<div class="img-legende">
	<a href="#">
   		<img src="images/photo1.jpg" alt="photo 1" title="photo 1" />
        <span class="bouton">Lire la légende</span>
        <span class="description">
        	<h2>Titre de mon image</h2>
            <p>Quisque tempor fermentum nisl, in facilisis est convallis ac. Aliquam quis diam ullamcorper mauris pellentesque scelerisque. Donec eu nunc ligula, varius condimentum nunc. Fusce consectetur odio eu elit placerat porta. Ut sodales accumsan pellentesque.</p>
        </span>
    </a>
</div>


Validator signale deux erreurs

, Column 13: document type does not allow element "h2" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

<h2>Titre de mon image</h2>

Line 20, Column 15: document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<p>Quisque tempor fermentum nisl, in facilisis est convallis ac. Al…

Explication
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Questions
Ces erreurs sont-elles bloquantes?Peut-on les ignorer?
Peut-on les corriger?
Sont-elles dues à des changement de versions?
Avec mes remerciements
Cordialement
Papy
Modifié par Jean Sympa (22 Feb 2011 - 16:45)
Merci Igor,

L'article est intéressant. J'ai compris les erreurs. Cela étant dit, est-il possible de modifier le code pour éliminer ces erreurs? Je n'y suis pas arrivé.

Le code est clair et lisible. Ne serait-ce pas un exemple de ce qu'il ne faut pas faire, qu'on fait et qui marche?
HTML évolue, ce type d'erreur est-il destiné à disparaître?

Cordialement
Papy
Salut,
Jean Sympa a écrit :
L'article est intéressant. J'ai compris les erreurs. Cela étant dit, est-il possible de modifier le code pour éliminer ces erreurs? Je n'y suis pas arrivé.

Oui, il est possible de modifier le code, en faisant en sorte que les éléments h2 et p ne se trouvent ni dans un span ni dans un a.
Jean Sympa a écrit :
HTML évolue, ce type d'erreur est-il destiné à disparaître?

En HTML 5, il sera possible d'englober des éléments comme un h2 ou un p dans un élément a.
Victor BRITO a écrit :
En HTML 5, il sera possible d'englober des éléments comme un h2 ou un p dans un élément a.

En complément:
- Malgré ce cas particulier de l'élément A, l'erreur avec le SPAN reste la même en HTML5.
- Dans cet exemple, l'utilisation d'un lien (élément A) est totalement abusive. En effet, on ne fait de lien vers aucune ressource (href="#").
Merci fvsch,

Je tombe des nues. J'ai trouvé cet exemple dans un bon livre. Il fonctionne bien. Par acquit de conscience, j'ai utilisé Validator et, ai découvert deux erreurs. J'ai essayé, sans succès, de les corriger.
Quelqu'un peut-il proposer une solution? Voici l'exercice :

Index.html

<!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>Domo 6</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />


</head>

<body>


<div class="img-legende">
	<a href="#">
   		<img src="images/photo1.jpg" alt="photo 1" title="photo 1" />
        <span class="bouton">Lire la légende</span>
        <span class="description">
        	<h2>Titre de mon image</h2>
            <p>Quisque tempor fermentum nisl, in facilisis est convallis ac. Aliquam quis diam ullamcorper mauris pellentesque scelerisque. Donec eu nunc ligula, varius condimentum nunc. Fusce consectetur odio eu elit placerat porta. Ut sodales accumsan pellentesque.</p>
        </span>
    </a>
</div>


</body>
</html>


styles.css

@charset "utf-8";
/* CSS Document */

body {
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	background-color:#000000;
	color:#FFF;
}

.img-legende {
	margin: 0;
	overflow: hidden;
	float: left;
	position: relative;
}
.img-legende a {
	text-decoration: none;
	float: left;
}
.img-legende a:hover {
	cursor: pointer;
}

.img-legende a img {
	background: #dadada;
	border: 2px solid #b5b5b5;
	float: left;
	margin: 0;
	padding: 10px;

}

.img-legende a .bouton {
	background:url(../images/bouton.png) 0 0 no-repeat;
	width:135px;
	height:32px;
	position: absolute;
	left: 11px;
	bottom: 0;
	font-size:11px;
	color: #8e8e8e;
	padding:5px;
}
.img-legende a:hover .bouton { 
	visibility: hidden;
}

.img-legende a:hover .description{
	position: absolute;
	bottom: 12px;
	left: 12px;
	padding: 10px;
	margin: 0;
	display: block;
	background: #dadada;
	width: 380px;
	border-top: 2px solid #b5b5b5;
}

.img-legende a:hover .description h2{
	margin:0;
	padding:0;
	font-size:14px;
	color: #8e8e8e;
}
.img-legende a:hover .description p{
	margin:0;
	padding:0;
	font-size:11px;
	color: #8e8e8e;
}

.img-legende a .description {	
	display: none; 
}
upload/33688-bouton.png
Je ne sais pas envoyer deux images, dans un seul message.
Peut-on envoyer un fichier compressé?

La seconde image n'est pas acceptée.

N'importe quelle image pourra la remplacer.
Bonjour,

Le problème est du au fait que span (description) est un élément en ligne (display : inline) h2 et p sont des éléments de type block (display : block).

Hors un élément en ligne ne peut contenir d’élément en bloc.

Change ton span description en div les erreurs (de validation) disparaîtront.
Modifié par rs459 (25 Feb 2011 - 13:10)
Même les bons livres peuvent avoir des erreurs, ou refléter des pratiques courantes mais pas recommandables. Et plus un livre vieillit, plus on y retrouve des astuces du passé qui n'ont plus forcément lieu d'être. C'est le cas de cette utilisation abusive de l'élément A, dont le seul but est de passer outre une limitation d'Internet Explorer avant sa version 7: la pseudo-classe :hover ne fonctionnait que sur les liens.

Donc tu dois pouvoir simplifier le code HTML:
<div class="img-legende">
  <img src="images/photo1.jpg" alt="photo 1" title="photo 1" /> 
  <span class="bouton">Lire la légende</span> 
  <div class="description"> 
      <h2>Titre de mon image</h2> 
      <p>Du bla bla.</p> 
  </div> 
</div>


Du côté du CSS, tu dois pouvoir supprimer les styles qui s'appliquaient directement au lien (ils ne servaient qu'à supprimer les styles par défaut de cet élément), et supprimer cet élément dans les sélecteurs. Quelques exemples de sélecteurs corrigés:
.img-legende .bouton {} 
.img-legende:hover .description h2 {}
Sujet clos
Aller à