Semantique correcte pour ligne blanche [Résolu]

Bonjour,

Je suis en train de faire du nettoyage de code.
Dans un site construit en HTML 4 et avec une feuille CSS, comment codez vous une ligne blanche?
Autrement dit est ce que les lignes suivantes ne sont pas adéquates?

<p> blabla1>/p>
<p>&nbsp;</p>
<p>blabla2</p>

ou

<p>&nbsp<br>&nbsp<br>&nbsp;</p>

Et le cas échéant auriez vous l'amabilité de m'indiquer un moyen plus correct?



merci d'avance
Modifié par donkey (04 Apr 2006 - 19:20)

Salut,

S'il s'agit d'un saut de ligne dans un parapgraphe, il me parait plus simple de coder

<p>Texte<br />Texte</p>

Modifié par papyjo (04 Apr 2006 - 07:49)

+1. Un paragraphe vide n'a pas vraiment de sens, sauf si c'est pour faire une grande séparation (plus grande que br). Si la séparation est vraiment vraiment grande, après, il vaut mieux utiliser <hr /> ou des titres hn.

Un grand Merci pour ces renseignements!

hr donne une jolie ligne horizontale grise qui casse un peu l'aspect de la page.

Encore 2 petites questions:
1) quid de l'emploi des images blanches?
2)J'ai cru comprendre aussi que ce genre de code était montré du doigt (2 br de suite) :

<p>blabla.....blabla<br><br>une phrase</p>

quelle(s) solution(s)?

meilleurs messages

Si le cas revient souvent dans le site tu peux aussi déclarer une classe genre

p.blanc { margin-bottom: 2em; }

En fait, "ligne blanche" ne veut pas dire grand chose. Que signifie un espace blanc dans un texte, si ce n'est que le texte qui suit est (plus ou moins fortement) séparé du précédent ?

Donc, soit on se contente d'une classe pour créer un retrait, comme l'indique Arsene, et de temps en temps dans le texte on aura :

<p>Bla bla</p>
<p class="retrait">Bla bla</p>
<p>Bla bla</p>

Où le paragraphe de classe "retrait" est le premier paragraphe d'une nouvelle section de texte, et aura une marge en haut margin-top: 1em; par exemple.

Soit on estime qu'il faut marquer la séparation dans le code, et on insère une ligne de séparation (balise <hr>). Si on veut que celle-ci soit invisible, on peut faire, en CSS :

hr {visibility: hidden;}

Et également lui rajouter des marges en haut et en bas si on veut un retrait plus important.

Enfin, si on utilise des titres de section (h1, h2, h3, h4, h5, h6) au début de chaque section, c'est à ces titres qu'on appliquera des marges (en particulier une marge supérieure) pour créer le retrait.

Ces deux dernières solutions ne demandent pas que l'on utilise une classe spécifique pour certains paragraphes.

RAPPEL :
<br> est une balise qui indique un retour à la ligne au sein d'un même paragraphe. Même si enchaîner deux <br> donne l'illusion visuelle d'avoir deux paragraphes, ça n'est pas le cas. On se retrouve souvent dans certains sites web avec des articles entiers, de par exemple 30 paragraphes visuels, où tout le texte de l'article est en fait contenu dans un seul et unique paragraphe.

Le retour à la ligne au sein d'un paragraphe permet de marquer une rupture moins forte que le changement de paragraphe. Il est parfois utilisé pour mettre en forme des texte poétiques en vers :

<p>J'ai relevé les yeux.</p>

<p>Derrière la fenêtre,<br />
au fond du jour,<br />
des images quand même passent.</p>

<p>Navettes ou anges de l'être,<br />
elles réparent l'espace.</p>

[Philippe Jaccottet, extrait de Leçons, in À la lumière d'hiver, p.28 (Poésie/Gallimard)]

Dans l'exemple ci-dessus, les espaces visuels sont juste une question de mise en forme du code HTML, ils ne sont pas nécessaires.

Et voilà
Bonne continuation

PS: Ha ha, j'ai réussi à citer du Jaccottet sur Alsacréations !
Modifié par mpop (04 Apr 2006 - 16:07)

L'emploi de l'expression "ligne blanche" et du code

<p> &nbsp; </p>

s'explique parce qu'à l'origine un programme "what you see what you get" a été utilisé. A l'époque je n'ai pas été choqué parce que l'on peut retrouver ce genre de code dans d'autres sites et c'est resté comme ça.

J'espere qu'il n'y a pas trop de plaisanteries (=code foireux) de ce type là à découvrir ...

Entre les hr caché, p et hn avec marge supérieure, il y a de quoi faire disparaître ces codes "blancs" .

Merci et meilleurs messages.

Euh, cette réflexion est hors sujet! Mais en regardant la feuille CSS je m'aperçois que les marges sont en pixels et je crois me souvenir avoir lu quelque part que si les font devaient être en em, cela était déconseillé pour les margin (px était mieux).
???? (parce que je suis un autodidacte).

Bonjour Donkey,

Mieux vaut créer un topic par question, cette dernière étant plus à sa place dans le salon css, à la limite.

Mais avant, si la présente question est réglée, merci de bien vouloir l'indiquer dans le titre, en insérant un "Resolu".

Enfin, ne pas hésiter à faire
une recherche sur le forum pour s'assurer qu'un topic n'a pas été créé sur la question, par exemple ...

Pour répondre à la question du double br : à mon avis, c'est illogique, car bien souvent, deux sauts de ligne de suite symbolisent un nouveau paragraphe, qui devrait alors être codé <p>...</p><p>...</p> comme tout paragraphe conventionnel.

Maintenant, pourquoi on retrouve deux br de suite souvent même dans les sites propres et standardisés, c'est peut-être dû au fait que les contenus sont saisis par formulaire, et que, par simplicité d'utilisation, on utilise systématiquement la fonction nl2br (ou assimilés). Remplacer deux br de suite par un paragraphe nécéssite un traitement supplémentaire auquel on ne pense pas vraiment puisque de toute façon visuellement ça ne change quasiment rien.

Je n'en mettrais pas ma main à couper, mais je pense qu'on peut même trouver des double br dans le présent post. Je vais vérifier une fois que j'aurai cliqué sur Envoyer.

EDIT : En effet.
Modifié par QuentinC (04 Apr 2006 - 19:29)

Il me semble que c'est toujours le cas dans les syntaxes de type wiki, dans les forums, dans les fonctions de rédaction de billets dans les blogs.

Sous Dotclear, par exemple, souvent employé dans la communauté des standards, la rédaction de billet peut se faire en mode wiki (par défaut), avec la possibilité de passer en xhtml.

En mode wiki, un saut de ligne correspond à un br ...

Il faut passer en xhtml pour une mise en forme plus riche.

Info juste en passant : transformer le double br en saut de paragraphe en php :

$chaine = preg_replace('#(<br />\\s*){2,}#', '</p><p>', $chaine);

<mode hors-sujet mais il fallait le dire>

QuentinC tu es un mec vraiment incroyable, tu réussis toujours à apporter des solutions simples et efficaces à toutes les questions ! Le nombre de sites qui mériteraient un picto "Helped by QuentinC" à côté du "W3C Xhtml 1.0 Valid" doit être impressionnant... Je propose un hourrah général pour toute la clarté, la gentillesse et la pertinence de tes interventions.

Hoooooouuuuuuuuuuraaaaaaaaaaah

</mode>

Vero a écrit :
En mode wiki, un saut de ligne correspond à un br ...

Pas dans la classe wiki2xhtml utilisée dans Dotclear en tout cas. Avec celle-ci il faut laisser une ligne vide entre chaque bloc de même nature (2 paragraphes, 2 blocs de citation, etc.). Et là tu auras des <p> ou des <blockquote> bien comme il faut et où il faut.
Pour générer un <br /> il faut utiliser le code wiki %%%

QuentinC a écrit :
Info juste en passant : transformer le double br en saut de paragraphe en php :

$chaine = preg_replace('#(<br />\\s*){2,}#', '</p><p>', $chaine);

Il ne faut quand même pas oublier d'ouvrir le 1er paragraphe et de fermer le dernier. Et si, par exemple, un <strong> s'ouvre avant le double <br /> et se ferme après aïe aïe la validité...