web-dev-qa-db-fra.com

Quand utiliser <p> contre <br>

Quel est le verdict quand vous devriez utiliser un autre <p>...</p> au lieu d'une balise <br />? Quelles sont les meilleures pratiques pour ce genre de chose?

J'ai regardé autour de moi pour cette question, mais la plupart des écrits semblent un peu vieux, alors je ne suis pas sûr que les opinions sur ce sujet aient évolué depuis.

EDIT: pour clarifier la question, voici la situation que je traite. Voulez-vous utiliser <br> 'ou <p>' s pour le contenu suivant (imaginez qu'il soit contenu dans une div sur une page d'accueil):


Bienvenue sur la page d'accueil.

Découvrez nos affaires.

Vous devriez vraiment.


Maintenant, ces lignes ne sont pas techniquement des «paragraphes». Donc, marqueriez-vous ceci en entourant tout le bloc dans une balise <p> avec des <br> entre les deux, ou utilisez-vous plutôt des <p> séparés pour chaque ligne?

57
Will Moritz

Ils remplissent deux fonctions différentes.

<p> (paragraphe) est un élément de bloc utilisé pour contenir du texte. <br /> est utilisé pour forcer un saut de ligne dans l'élément <p>.

Exemple

<p>Suspendisse sodales odio in felis sagittis hendrerit. Donec tempus laoreet
est bibendum sollicitudin. Etiam tristique convallis<br />rutrum. Phasellus 
id mi neque. Vivamus gravida aliquam condimentum.</p>

Résultat

Suspendisse sodales odio in felis sagittis hendrerit. Donec tempus laoreet Est bibendum sollicitudin. Etiam tristique convallis
rutrum. Phasellus Id mi neque. Vivamus gravida aliquam condimentum.

Mettre à jour

Sur la base des nouvelles exigences, j'utiliserais personnellement <p> pour obtenir l'espacement et permettre le style. Si à l'avenir vous souhaitez attribuer un style à l'une de ces pièces, il sera beaucoup plus facile de le faire au niveau du bloc.

<p>Welcome to the home page.</p>

<p style="border: 1px solid #00ff00;">Check out our stuff.</p>

<p>You really should.</p>
63
Kermit

Vous souhaitez utiliser la balise <p> lorsque vous devez diviser deux flux d'informations en pensées distinctes. 

<p> Now is the time for all good men to come to the aid of their country. </p>

<p>The quick brown fox jumped over the lazy sleeping dog.</p>

La balise <br/> est utilisée comme un saut de ligne forcé dans le flux de texte de la page Web. Utilisez-le lorsque vous souhaitez que le texte continue sur la ligne suivante, par exemple avec de la poésie.

<p>  Now is the time for all good men to come to the aid of their country. <br/>
The quick brown fox jumped over the lazy sleeping dog. </p>

la source

7
Eric Goncalves

Je peux enfreindre les règles de l'étiquette en répondant à une question de ce fil (la plupart des réponses étant jusqu'ici excellentes), mais voici comment j'aborde cet argument:

Bien que je convienne qu'un élément 'p' est un élément utilisé pour contenir du texte et qu'une balise 'br' sert à rompre le texte, il est souvent utile de manipuler un 'bloc' de texte comportant des espaces entre eux;

Ex: 
[mon bloc de texte]
Bonjour le monde!
-------- c'est une ligne vide ------
Vous êtes tellement plein de vie!
[/ mon bloc de texte]

Maintenant, beaucoup soutiendraient que vous pouvez simplement placer deux éléments «p» dans un «div», puis manipuler ce «div». Cependant, j'estime que cela prend plus de temps Méthode 'br' — me permettant de manipuler uniquement celui-là 'p.'

Le problème avec ma méthode peu orthodoxe est que si un style spécifique est appliqué à line-height, il y aura certainement une différence notable entre l'espace-ligne créé par un double «br» et un «p». 

Je pense que pour décider quelle technique suivre, considérez:

  • lisibilité du code
  • les meilleures pratiques 
  • temps
  • effets des raccourcis sur le reste de votre code
2
brooklynsweb

Vous devez utiliser <p> lorsque vous souhaitez séparer deux paragraphes. De Wikipedia:

Un paragraphe (du grec paragraphesos, "écrire à côté de" ou "écrit À côté") est une unité autonome d'un discours traitant de l'écriture. avec un point ou une idée particulière.

Utilisez la balise <br> lorsque vous souhaitez forcer une nouvelle ligne dans vos paragraphes.

1
dan_s

La balise p est un élément de niveau bloc et est principalement utilisée pour ajouter du contenu, tandis que la balise br est utilisée pour forcer un saut de ligne dans l'élément. Autrement dit, si vous allez suivre la sémantique. Beaucoup de gens font cela ces jours-ci pour ajouter une signification spécifique aux balises et ainsi de suite. J'espère que ça aide. Bonne chance cependant. =)

0
Tony

Je n'utiliserais pas <p> sauf si vous avez l'intention d'y insérer du contenu. Bien sûr, il ne s’agit que d’une opinion (comme je l’assume, la plupart des réponses le seront).

Cependant, il peut être plus facile de styler une balise <p> (il y a au moins plus d'options) qui peut se prêter à être utilisée plus souvent. Mon seul problème est que ce n'est pas très facile à lire (lors de la lecture du code) et je sens que ces styles pourraient être appliqués ailleurs (éventuellement aux balises qui entoureraient la balise <p>.

En outre, comme d'autres l'ont déjà indiqué, une balise <br /> devrait être utilisée pour séparer le contenu d'un élément de bloc (tel que la balise <p>). Si vous utilisez ce qui suit:

<p class="a">some content...</p>
<p class="break"></p>
<p class="b">some other content...</p>

Ensuite, je dirais que vous devez utiliser des styles sur l'une des balises entourant la balise p.break ou sur les deux pour faire n'importe quel spacing requis.

0
user131441