[Résolu] Sémantique : plusieurs <p> sous un titre <h> ou u

Hello,

voilà je voudrais savoir ce qui es tle mieux en temre de sémantique pour mettre en page du texte avec alinéas et saut de ligne :

- définir text-indent (aliné) et padding-bottom (saut de ligne) directement dans la balise <p>
ou la laisser "styleless" et définir ces attributs dans un span que je répèterai.

En gros est-ce que c'est pénalisant en temre de sémantique d'avoir plusieurs paragraphes à la suite sous un seul titre H ?

Merci d'avance

edit: je crois que je me suis trompé de catégorie, si un modo peut déplacer ce message en "xhtml et sémantique" plz
Modifié par anatok (22 Jul 2009 - 15:42)

Bonjour,

Selon moi, il vaut mieux opter pour des styles à mêmes les <p> (même si ces derniers n'ont aucune valeur sémantique) et ce, notamment pour que ta page soit "aérée" dans le cas d'une navigation sans les feuilles de styles. De plus ce serait dommage de "polluer" ton code avec des balises (en l'occurence des <span>) uniquement dédiées à faire de la mise en page...

a écrit :
En gros est-ce que c'est pénalisant en temre de sémantique d'avoir plusieurs paragraphes à la suite sous un seul titre H ?

En aucun cas.

Merci mecho pour ta réponse, por moi aussi l'usage abusif du span ne me semble pas une bonne idée.

Par contre en quoi la balise <p>texte</p> n'a aucune valeur sémantique ? Ce n'est pas par elle que sont définies les zones de contenu ?

mecho > le <p> A une valeur sémantique, le <p> désigne un paragraphe et doit être utilisé comme tel !

Anatok > L'utilisation de plusieurs <p>aragraphe sous un <hn> n'est aucunement pénalisant en terme de référencement et est une bien meilleure pratique que d'utiliser des <br> (par exemple).

Merci Laurie-Anne pour cette confirmation ! Pendant que j'y suis, j'ai encore une question allant dans ce sens : est-ce que ça s'est vu/est possible de séparer le HN de son/ses P par une div.


Genre,html

<div id="haut-de-page-avec-deco"><hn>TITRE</hn></div>
<div id="descriptif"><p>contenu</p></div>

En gros est-ce que la lecture sémantique des moteurs est à ce point strict qu'elle fait fi de la mise en page css?

Salut,

Les éléments div et span n'ont aucune valeur sémantique, de plus p est un type bloc et hn aussi donc les mettre dans des div ne sert à rien, le mieux est d'alors leur ajouter des id ou classes pour les cibler directement du type:

<hn id="haut-de-page-avec-deco">TITRE</hn> 
<p  id="descriptif">contenu</p>

Par contre tu ne pourras pas mettre d'autre élément de type bloc dans ton p...
Les moteurs prennent en compte les balises sémantiques mais mieux vaut ne pas trop imbriquer tes balises. Tu peux parfaitement séparer le titre de son paragraphe par des div sinon ^^
Modifié par N-J (22 Jul 2009 - 14:44)

mmm très intéréssant et ça me donnerait quoi en css

hn .haut_de_page_avec_deco {width:; height:; font:; background:;}
p .descriptif {text-indent:; margin-bottom:;}

bon là je pense que 9 fois sur 10 ma rédaction de la parentée est mauvaise

anatok a écrit :
mmm très intéréssant et ça me donnerait quoi en css

hn .haut_de_page_avec_deco {width:; height:; font:; background:;}
p .descriptif {text-indent:; margin-bottom:;}

bon là je pense que 9 fois sur 10 ma rédaction de la parentée est mauvaise

Dans le cas d'id proposé par N-J il faut les cibler comme suit:

hn#haut_de_page_avec_deco {} /*le titre dont l'identifiant est haut_de_page_avec_deco*/
p#descriptif {}/*le paragraphe dont l'identifiant est descriptif*/

A relire: Comprendre l'héritage et la parenté des styles CSS

Merci Igor, je l'avais pas lu celui-là..

mais en fait je réfléchis, en employant cette méthode je vais me retrouver avec plusieurs fois la même id sur une seule page, si je n'en défini pas une par paragraphe <p>?

exemple HTML

<hn id="titre_deco">titre</hn>
<p id="descriptif">texte</p>
/*saut de ligne défini dans p*/
<p id="descriptif">suite texte</p>

si je dis pas de bétise c mal d'avoir plusieurs fois la meme id ? no ?

est ce que :
CSS

hn#titre_deco{}
p.descriptif {}

puis

<hn id="titre_deco">titre</hn>
<p class="descriptif">texte</p>
/*saut de ligne défini dans p*/
<p class="descriptif">suite texte</p>

serait pas un peu plus propre dans ce cas ?.. merci et dsl pour le sujet à rallonge, mais ça me semble relatif dans l'absolu.

C'est tout à fait juste ce que tu écrits, si un élément se répète et que tu veux répéter la mise en forme aussi utilises des classes , vu qu'un id ne peut se répéter deux fois de suite ^^
Modifié par N-J (22 Jul 2009 - 15:39)

Ok, cette fois-ci on est bon

Verbiage lourd et inutile.

#col h1 {...}
#col p  {...}
#page h1 {...}
#page p  {...}

<div id="col">
<h1>Titre</h1>
<p>Texte</p>
</div>
<div id="page">
<h1>Titre</h1>
<p>Texte</p>
</div>

pardon, de ?

anatok a écrit :
serait pas un peu plus propre dans ce cas

On parlera plus volontier de validité du code que de propreté
(comme tu l'as justement souligné, il n'est pas valide d'avoir plusieurs fois le même identifiant sur une même page )

Cdt,
Sylvain

<div id="col">
      <h1>
        Mon titre
      </h1>
      <p>
        La tagline de ce site qui déchire
      </p>
</div>
<div id="page">
      <h1>
        Plop
      </h1>
      <p>
        IE5 roxor
      </p>
</div>

h1{
propriété: valeur;
}
p{
propriété: valeur;
}
#col h1 + p{
 propriété: valeur; /*on cible le paragraphe qui suit immédiatement le h1 de la division #col*/
}

h1+p ? c'est de l'écriture sémantique avancée ?

en fait la problématique etait design vs sémantique et pour que mon h1 ait le bon background, et que le <p> ne soit pas sur ce background, je crois que je suis obligé de les mettre dans deux divs différentes. Pour infos :

CSS

#descriptif { float : left; display: inline;min-height : 350px; width : 670px; color : #333; text-align : justify; }
#descriptif img {text-align:right; margin : 0; border: 0px;} 
#descriptif bienvenue img {margin:0;}
#descriptif a:link {color:#666} 
#descriptif a:hover {color:#ff8a00;font-style:italic;}
#descriptif a:visited {color:#1062a7;}
#descriptif p {text-indent:15px; display:block; margin-top: 10px;}
#descriptif h1 {color: #113f67; font: bold italic 18px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;} 
.slogan{font: bold italic 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;font-variant: small-caps;letter-spacing :-1.3px; color:#ee8b22; vertical-align:baseline; line-height:22px;}
#descriptif h2 { display:inline-block;margin-right:15px;margin-bottom:10px;padding-left: 40px; color:#1062a7; font-size: 16px; 
font-style: italic; text-align: right;background: url(images/H_under.png) no-repeat right bottom;} 
#descriptif h3 { margin-bottom: 8px;padding : 18px 0 0 40px;color : #6bace4; font-size : 14px; font-weight : bold;
text-align: right;background: url(images/H3_under.png) no-repeat right bottom; } 
#descriptif h3 a{text-decoration:none;}
#descriptif h3 a{background-image: url();} 
#bienvenue_gen {padding : 10px 75px 10px 75px; min-height: 105px; background-image: url(images/bkg_clean.png); background-repeat : no-repeat; text-align:center;}
#descriptif_gen { padding : 0 50px 10px 50px;background-image: url(images/border.png); background-repeat : no-repeat;
background-position: left bottom;}
#descriptif_gen img{text-align:center;}
#descriptif_gen p {text-indent:15px; margin-top:20px; margin-bottom: 10px; text-align: left;}

HTML

		  
<div id="descriptif"> 
<div id="bienvenue_gen"><h1>À remplir</h1></div>
<div id="descriptif_gen"><p>À remplir sans oublier le ^title^ et les ^métas^</p>
</div></div>

Alors pour le h1+p, cela signifie tout élément p directement précédé d'un élément h1.

Sinon tu peux avoir Tous les détails dans le tableau

@Laurie Anne - Je me suis surement mal exprimé dans mon premier post.

Je ne pense pas dire de grosses bêtises ou c'est que je me suis mal renseigné mais :

Ce que je voulais dire est que le fait d'utiliser une balise <p> pour encapsuler un "bloc de texte" n'a pas vraiment d'"intérêt" pour une aide technique type lecteur d'écran. En utilisant une balise neutre (<div>), le rendu oral de la synthèse vocale d'un lecteur d'écran sera le même que si on avait opté pour une balise <p>.

Au final, peu de balises html sont "reconnues" et apportent du sens pour les utilisateurs de lecteurs d'écran (les titres de section (hn), les listes (ul, ol,), les citations (blockquote, q) les liens ...).

J'utilise tout de même la balise <p> pour encapsuler mes blocs de texte car elle est tout simplement faite pour ça ...

En même temps, il n'as pas été question d'accessibilité pour les lecteurs d'écran dans la question d'anatok, mais bien de sémantique. Donc ma remarque était bien valable. <p> a une valeur sémantique et doit être utilisé conformément à cette valeur, qu'elle apporte ou non une aide aux utilisateurs de lecteurs d'écran est un autre sujet (non, ce sont les hn qui sont important).
Modifié par Laurie-Anne (23 Jul 2009 - 07:25)