5568 sujets

Sémantique web et HTML

Bonjour,

je suis actuellement en train de travailler sur un site internet (je ne suis pas professionnel dans le domaine) et j'essaie de le rendre valide HTML5 via le W3C Validator.

J'ai déjà corrigé quelques erreurs mais maintenant je suis confronté à quelques "impasses".

Le site comporte 5 pages, autant dire que c'est un petit projet (mais un gros pour moi).

Aussi je sollicite un petit coup de main de la part de ceux qui on le temps (et l'envie)

Tout d'abord l'index :

10 Errors, 4 warning(s)


 Line 47, Column 333: The scrolling attribute on the iframe element is obsolete. Use CSS instead.
…overflow:hidden; width:200px; height:365px;" allowTransparency="true"></iframe>

 Line 47, Column 333: The frameborder attribute on the iframe element is obsolete. Use CSS instead.
…overflow:hidden; width:200px; height:365px;" allowTransparency="true"></iframe>

 Line 47, Column 333: The allowtransparency attribute on the iframe element is obsolete. Use CSS instead.
…overflow:hidden; width:200px; height:365px;" allowTransparency="true"></iframe>

 Line 133, Column 10: No p element in scope but a p end tag seen.
	     </p>

 Line 137, Column 24: Duplicate ID nouvelles.
	     <p id="nouvelles">

 Line 127, Column 24: The first occurrence of ID nouvelles was here.
	     <p id="nouvelles">

 Line 143, Column 10: No p element in scope but a p end tag seen.
	     </p>

 Line 147, Column 20: Duplicate ID nouvelles.
	 <p id="nouvelles">

 Line 127, Column 24: The first occurrence of ID nouvelles was here.
	     <p id="nouvelles">

 Line 154, Column 6: No p element in scope but a p end tag seen.
	 </p>

 Line 158, Column 20: Duplicate ID nouvelles.
	 <p id="nouvelles">

 Line 127, Column 24: The first occurrence of ID nouvelles was here.
	     <p id="nouvelles">

 Line 165, Column 6: No p element in scope but a p end tag seen.
	 </p>


Pour info le code ressemble à ça :

Ligne 47:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBICOMRP&amp;width=200&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false&amp;height=365" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:365px;" allowTransparency="true"></iframe>


Ici j'ai bien peur que ça vienne du fait que du CSS se trouve dans le code Iframe récupéré sur Facebook... j'imagine qu'il n'a rien à faire dans le .html et devrait se trouver dans la feuille de style mais c'est un peu problématique ....


Ensuite, c'est le même problème qui se reproduit plusieurs fois, un exemple :

<section> 

	     <p id="nouvelles">
         <img src="img/news/news_blabla.jpg" alt="blabla" />
         <h2>blabla</h2>
		 <h3>blablaF</h3>
         blablabla
         <br><br><br><br>
	     </p>

<hr class="blanc">  <!-- barre horizontale -->
<br>
	     <p id="nouvelles">
         <img src="img/news/news_blabla.jpg" alt="blabla" />
         <h2>blabla</h2>
		 <h3>blabla</h3>
        blabla
         <br><br><br><br>
	     </p>
	 
<hr class="blanc">   <!-- barre horizontale -->

... et ainsi de suite jusqu'à :
</section>




Sur les autres pages, c'est le même problème à la ligne 47 (sur toutes les pages...)
et encore des " Duplicate ID presentation", "The first occurrence of ID presentation was here"

J'ai une page bourrée d'erreur, en fait bourrée de la même erreur qui est :

Line 136, Column 226: Bad value 125px for attribute height on element img: Expected a digit but saw p instead.
…t="125px" alt="blabla" title="blabla"/></a> 
Syntax of non-negative integer:
One or more digits (0–9). For example: 42 and 0 are valid, but -273


Voici la ligne 136 :

<figure> 
        <a href="http://www.blabla.html" target="blank"><img src="../img/logos/accessoires/blabla.jpg" width="125px" height="125px" alt="blabla" title="blabla"/></a> 


Je ne comprend pas où le validateur voit un problème ici ...


Line 136, Column 33: The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.
     <h2><a name="ancre1"></a>Nom de mon ancre1…


Dans mon code :

<h2><a name="ancre1"></a>Nom de mon ancre1</h2>



J'ai bien conscience que j'en demande beaucoup, mais je relativise aussi et me dit qu'il n'y a pas "tant" d'erreurs que ça et j'aimerai bien rendre ça un peu plus "propre"

D'avance merci à tout ceux qui jetteront un oeil à mes problèmes !
Modifié par sat39 (25 May 2011 - 16:10)
Modérateur
Bonjour,

La valeur d'un attribut ID doit être unique dans un même document. Tu as plusieurs fois le id nouvelles. Tu dois plutôt utiliser une class.
Bonjour,

Merci pour la rapidité,

En fait j'utilisais id et ce plusieurs fois dans un soucis de mise en page :
Une image à gauche, du texte à droite.

En remplaçant mes id par class, et en modifiant ma classe css de #nouvelles à .nouvelles
Cela fonctionne !

J'ai corrigé mes pages avec cette information ! j'étais réellement passé au travers, merci beaucoup !

Je me permets de poster à nouveau l'index dans l'état actuel :

Line 47, Column 333: The scrolling attribute on the iframe element is obsolete. Use CSS instead.
…overflow:hidden; width:200px; height:365px;" allowTransparency="true"></iframe>

 Line 47, Column 333: The frameborder attribute on the iframe element is obsolete. Use CSS instead.
…overflow:hidden; width:200px; height:365px;" allowTransparency="true"></iframe>

 Line 47, Column 333: The allowtransparency attribute on the iframe element is obsolete. Use CSS instead.
…overflow:hidden; width:200px; height:365px;" allowTransparency="true"></iframe>

 Line 133, Column 10: No p element in scope but a p end tag seen.
	     </p>

 Line 143, Column 10: No p element in scope but a p end tag seen.
	     </p>

 Line 154, Column 6: No p element in scope but a p end tag seen.
	 </p>

 Line 165, Column 6: No p element in scope but a p end tag seen.
	 </p>


La partie posant toujours problème concerne l'IFRAME
L'autre :

         <p class="nouvelles"> 
         <img src="img/news/news_blabla.jpg" alt="blabla" /> 
         <h2>blabla</h2> 
         <h3>blablaF</h3> 
         blablabla 
         <br><br><br><br> 
         </p> 


Je n'ai plus sur aucune page aucun problème de duplicate ID !
C'est déjà un pas en avant !

Merci!!
Salut,

La balise <p> ne peut pas contenir des titres <h2> et <h3> en l’occurrence.
Remplace ta balise <p> par un <div>.
De plus tes <br /> à tire larigot ne sont pas très propre, utilise plutôt les feuilles de style CSS et la propriété padding
Modifié par XdiZ (18 May 2011 - 18:44)
Salut et merci !

Donc en remplaçant mes <p> par des <div> en effet, le code est de plus en plus valide !

Cependant, ma mise en page m'a explosé au visage sans que je change la classe c'est toujours :

.nouvelles {
  float:left;
  clear:both;
  text-align:justify;
  margin-left: 25px;
  margin-right: 15px;
 }


Deux petites images pour illustrer sur l'accueil :

Avant :
Avant

Après :
Après

D'avance merci

edit: pour les br je vais essayer d'utiliser le padding comme tu le suggère !
Modifié par sat39 (18 May 2011 - 19:11)
Il faut modifier tous tes balises <p> par des <div> et supprimer les <br />.

Avant :
<section>  
 
         <p id="nouvelles"> 
         <img src="img/news/news_blabla.jpg" alt="blabla" /> 
         <h2>blabla</h2> 
         <h3>blablaF</h3> 
         blablabla 
         <br><br><br><br> 
         </p> 
 
<hr class="blanc">  <!-- barre horizontale --> 
<br> 
         <p id="nouvelles"> 
         <img src="img/news/news_blabla.jpg" alt="blabla" /> 
         <h2>blabla</h2> 
         <h3>blabla</h3> 
        blabla 
         <br><br><br><br> 
         </p> 
      
<hr class="blanc">   <!-- barre horizontale --> 
 
... et ainsi de suite jusqu'à : 
</section>


Après :
<section>  
 
         <div class="nouvelles"> 
           <img src="img/news/news_blabla.jpg" alt="blabla" /> 
           <h2>blabla</h2> 
           <h3>blablaF</h3> 
           <p>blabla</p> 
         </div> 
 
<hr class="blanc">  <!-- barre horizontale --> 
         <div class="nouvelles"> 
           <img src="img/news/news_blabla.jpg" alt="blabla" /> 
           <h2>blabla</h2> 
           <h3>blabla</h3> 
             <p>blabla</p> 
         </div> 
      
<hr class="blanc">   <!-- barre horizontale --> 
 
... et ainsi de suite jusqu'à : 
</section>


Et ton code CSS serait :

.nouvelles {
  padding-bottom : 2em;
}
.blanc {
  clear: both;
}


Petit conseil, essaye de donner un nom plus explicite au nom de tes classes, par exemple au lieu de mettre une class blanc, met plutot une class trait. Egalement tu n'es pas obligé de mettre une class à ta balise <hr />, tu peux très bien faire cela en CSS :
hr {
  clear: both;
  border-top: 1px solid #fff;
  border-left: none;
  border-right: none;
  border-bottom: none;
}
Merci à toi !

Pour les modifications que tu me conseilles, pas de problème j'ai effectué ça

Donc remplacement du <p> par <div>, la suppression des <br> et j'ai ajouté la propriété both à "blanc"

En fait concernant mes hr, j'ai plusieurs classes car j'utilise des hr stylés différemment sur une autre page!

hr.blanc {
height: 1px;
margin: -0.5em 0;
padding: 0;
color: #FFFFFF;
background-color: #FFFFFF;
border: 0; 
clear:both;
}

hr.orange {
height: 1px;
margin: -0.5em 0;
padding: 0;
color: #F37021;
background-color: #F37021;
border: 0; 
}


Maintenant le seul truc qui marche étrangement c'est l'alignement entre mes images et mon texte qui avec <p class="nouvelles"> fonctionnait mais qui avec <div class="nouvelles"> ne fonctionne pas ! Déstabilisant !

Voici un printscreen du rendu avec les modifications effectuées :
http://imageshack.us/photo/my-images/828/28068706.jpg/

En changeant mes H2 et H3 dans le css et en leur appliquant : inline-block au lieu de block,
J'ai ça :

http://imageshack.us/photo/my-images/155/61942639.jpg/

Il faudrait juste que le rendu redevienne semblable au rendu initial !

En tout cas d'énormes merci !
Je pense qu'il faut simplement mettre l'image en flottante gauche, comme ceci :
.nouvelles img {
  float: left;
  margin-right : 1em;
}

Et tu peux rajouter une petite bordure à ton image
.nouvelles img {
  float: left;
  margin-right : 1em;
  padding : 3px;
  border: 1px solid #a96f47;
}


Ok pour les <hr />
Modifié par XdiZ (18 May 2011 - 20:10)
Euhhh tu veux m'épouser ?

Plus sérieusement merci beaucoup !

Mon index est comme je le voulais maintenant =)

INDEX :

Il est maintenant plus propre, juste le problème de styles à l'intérieur du Iframe à priori.

Line 47, Column 333: The scrolling attribute on the iframe element is obsolete. Use CSS instead.
…overflow:hidden; width:200px; height:365px;" allowTransparency="true"></iframe>

 Line 47, Column 333: The frameborder attribute on the iframe element is obsolete. Use CSS instead.
…overflow:hidden; width:200px; height:365px;" allowTransparency="true"></iframe>

 Line 47, Column 333: The allowtransparency attribute on the iframe element is obsolete. Use CSS instead.
…overflow:hidden; width:200px; height:365px;" allowTransparency="true"></iframe>


Page "équipe":

Problème d'iFrame également mais aussi de :

Line 122, Column 38: The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.
     <h2><a name="Ancre1"></a>Nom de l'ancre 1…

 Line 137, Column 33: The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.
     <h2><a name="ancre 2"></a>Nom de l'ancre 2…


Dans mon code :

<h2><a name="ancre1"></a>Nom de mon ancre1</h2>


Je me demande si je ne devrais pas utiliser "id" à la place de "name", ça sera peut-être un peu plus valide ?

Page clients:

Sur la page clients j'ai environ 216 erreurs ...
3 dues à l'Iframe
quelques unes dues au même problème que la page "équipe"
puis les autres :

Line 136, Column 226: Bad value 125px for attribute width on element img: Expected a digit but saw p instead.
…t="125px" alt="Lien vers le site de blabla" title="Site de blablabla"/></a> 
Syntax of non-negative integer:
One or more digits (0–9). For example: 42 and 0 are valid, but -273 is not.


<figure> 
        <a href="http://blablabla.html" target="blank"><img src="../img/logos/blabla.jpg" width="125px" height="125px" alt="Lien vers le site de blabla" title="Site de blabla"/></a> 
        </figure> 


#content figure {
	display:inline-block;
	position: relative;
	vertical-align:top;
	width:125px;
	height:125px;
	background:rgba(255,255,255,0.2);
	border:2px solid rgba(255,255,255,0.2);
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-moz-box-shadow:1px 1px 13px #999;
	-webkit-box-shadow:1px 1px 13px #999;
	box-shadow:1px 1px 13px #999;
	margin:0 40px 40px 0;
	-webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;


J'y vais progressivement et au risque de me répéter merci !
Modérateur
Bonjour,

Quel est ton niveau en anglais? C'est que le validateur t'indique clairement ce qui ne va pas. La plupart des erreurs indiquent que tu dois supprimer des attributs obsolètes pour les remplacer par leur équivalent CSS.

Pour l'ancre, le validateur te dis aussi d'utiliser un id plutôt que name.

Puis pour le "Bad value 125px for attribute width on element img", c'est que l'attribut width et l'attribut height de img doit être de valeur numérique, sans le mot px après.
Bonjour,

Supprimer des attributs obsolètes et les remplacer par leur équivalent CSS, je comprends le principe mais le code étant un widget récupéré directement sur un site tiers (facebook), le modifier me parait bien difficile ... je suis donc condamné à devoir être invalide si j'utilise le widget.

Concernant l'ancre, c'est ok !

Pour le bad value, je remplace, ceci dit je comprend pas bien la logique ... on arrête de préciser que c'est des "px" ... le(s) navigateur(s) l'interprète(nt) peut-être bien tout seul !

Merci pour votre aide à tous !
Modérateur
Bonjour,

Le widget de Facebook, n'est-ce pas simplement le code d'un iframe? Si oui, il suffit d'enlever les attributs obsolètes. Ça n'empêchera pas le widget de fonctionner. C'est souvent le cas des widgets fournis par les sites tiers. Ils ne sont pas toujours valides, mais rien n'empêche de les améliorer lors de leur intégration dans ton site.

Pour les attributs HTML width et height de l'image, c'est que la valeur est toujours en pixels. Par contre, si jamais tu définissais ses dimensions via CSS, là il faudrait mettre l'unité de mesure px (ou autre) dans la déclaration CSS.
Modifié par Tony Monast (19 May 2011 - 17:12)
+1 Tony Monast

Aussi je vois que pour ça
<h2><a name="ancre1"></a>Nom de mon ancre1</h2>

tu ne met pas ton texte entre la balise <a> et tu utilises l'attribut "name" qui n'est pas valide, cela devrait être :
<h2><a id="ancre1">Nom de mon ancre1</a></h2>
Bonjour,

Tony Monast, tu avais raison, on peut enlever des valeurs pour le widget (celles qui empêchaient la validation).

Le code était :

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBICOMRP&amp;width=200&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false&amp;height=365" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:365px;" allowTransparency="true"></iframe>


Il devient :

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBICOMRP&amp;width=200&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false&amp;height=365" style="border:none; overflow:hidden; width:200px; height:365px;" ></iframe>


Tout fonctionne parfaitement sur chrome, opera, firefox
Et évidement ... ie8 : le fond du widget est blanc alors qu'il est orange sur les autres navigateurs et il a comme des bordures étranges.

J'ai supprimé uniquement :
Scrolling=no, (ça ne change rien)
Frameborder=0 (mon histoire de bordure)
Allowtransparency=true (mon histoire de couleur)

Coté css j'ai ça :

position: absolute;
top:150px;
position:fixed;
background-color:#F37021;
width:200px;


j'ai essayé de préciser pas de bordure, cela ne change rien.

Avez-vous des suggestions ?
Modérateur
En tout cas, avec IE7, on ne peut pas retirer les scrollbars via CSS. Il faut utiliser l'attribut HTML scrolling="no". À mon avis, tu pourrais tolérer cette erreur de validation. Ça n'empêchera pas le site de fonctionner. Pareil pour le allowtransparency pour régler ton problème de couleur de fond.

Attention, dans ton code CSS, tu déclares deux fois position. C'est le deuxième qui va être utilisé. Puis tu as aussi des styles en ligne dans le code HTML, tu devrais les retirer et les mettre directement dans la feuille de styles (style="border:none; overflow:hidden; width:200px; height:365px;").

Un spécialiste du HTML5 pourra mieux te conseiller que moi. Je ne m'y intéresse très peu, étant donné que ce n'est pas encore un standard officiel.
Modifié par Tony Monast (20 May 2011 - 18:18)
Merci encore pour les infos,

Position, c'est réglé, j'avais besoin du deuxième de toute manière ! mais c'est vrai que c'est plus propre comme ça !

En déclarant les style dans le css, le widget réagit bizarrement je vais donc comme tu me le conseille laisser le widget dans l'état actuel, il ne génère que 3 erreurs qui ne sont en effet pas "si graves" que ça ...

Les outils Facebook évoluant quand même assez rapidement, j'essaierai de mettre ça à jour dans le futur !

Merci !!!!
Intéressant de voir comme Facebook n'en à rien à cirer de W3C ... vu leur renommée certainement !

En tout cas merci pour ces quelques précisions Smiley smile
vallsymachinant a écrit :
Intéressant de voir comme Facebook n'en à rien à cirer de W3C ... vu leur renommée certainement !

Ce n'est pas une question de renommée.
Ça peut être pour les raisons suivantes (et sans doute une combinaison des deux):
- Une relative incompétence des ingénieurs/développeurs chez Facebook sur ce point (c'est pas rare d'avoir un très bon ingénieur mais pas intégrateur, et qui bidouille du code front-end sans maitriser cette spécialité sur le bout de doigts).
- Une nécessité de compatibilité avec des vieux navigateurs. Facebook préfère proposer un code qui marche dans tous les navigateurs plutôt qu'un code valide, lorsque ce choix se présente. C'est très raisonnable. Les standards et la validation sont des outils, et la pratique doit s'arranger de la réalité technique.