Est-il parfois mauvais d'utiliser <BR />?


157

Est-il parfois mauvais d'utiliser des <BR/>balises?

Je demande parce que certains des premiers conseils que mon équipe de développement m'a donnés étaient les suivants: ne pas utiliser <BR/>; à la place, utilisez des styles. Mais pourquoi? Y a-t-il des résultats négatifs lors de l'utilisation des <BR/>balises?


10
La meilleure façon de trouver la meilleure réponse est d'aller à votre équipe de développement et de leur demander POURQUOI?
azamsharp

48
Est-ce tout à coup la mauvaise chose à faire pour essayer d'obtenir une réponse de StackOverflow plutôt que des membres de l'équipe?
Nosredna

7
Non, c'est juste quelqu'un qui lui a donné une réponse subjective et il nous demande de deviner le raisonnement derrière cela ... Allez simplement demander à la personne qui vous a donné la réponse subjective, surtout si elle est à proximité (dans la même équipe de développement)
Gabriel Magana

8
Habituellement, le «premier conseil» survient lorsque l'employé est nouveau. Un nouvel employé n'a pas toujours envie de demander "pourquoi?" Évidemment, il y a des moments où il vaut mieux demander pourquoi, mais je pense que Burak Ozdogan comprend probablement le «pourquoi» après avoir lu ces questions. Ou du moins comprend assez bien ce que la communauté HTML dans son ensemble a sur le sujet pour en discuter. Je dirais qu'il a fait le bon choix en venant ici pour demander.
Nosredna

5
Je comprends vos conseils et vous avez raison. Mais le problème, c'est que lorsque vous entrez dans une nouvelle équipe, vous obtenez autant de contributions en peu de temps. Et certains d'entre eux sont simplement mentionnés; comme un détail donné entre parenthèses. Je voulais le poser ici pour deux raisons: Pour obtenir une réponse et voir des opinions différentes comment l'aborder. Merci les gars!
PencilCake

Réponses:


173

La principale raison de ne pas utiliser <br>est que ce n'est pas sémantique . Si vous voulez deux éléments dans des blocs visuels différents, vous les voulez probablement dans des blocs logiques différents.

Dans la plupart des cas, cela signifie simplement utiliser différents éléments, par exemple <p>Stuff</p><p>Other stuff</p>, puis utiliser CSS pour espacer correctement les blocs.

Il y a des cas où <br>est sémantiquement valide, c'est-à-dire des cas où le saut de ligne fait partie des données que vous envoyez. Ceci est vraiment limité à 2 cas d'utilisation - la poésie et les adresses postales.


38
Personnellement, je préférerais utiliser <pre/>pour la poésie. De cette façon, vous spécifiez explicitement que l'intention est de conserver la composition d'origine, y compris les éventuelles indentations.
Michał Górny

6
@ MichałGórny soulève un bon point - <br>s ne semblent être appropriés que lorsque toutes les conditions suivantes s'appliquent: 1. Les nouvelles lignes sont sémantiquement significatives, 2. L'indentation n'est pas sémantiquement significative (sinon, vous devriez utiliser a <pre>, 3. Il n'existe pas d'autre sémantiquement approprié comme un paragraphe ou une balise d'en-tête. Les adresses postales remplissent ces trois conditions, tout comme les paroles des chansons. La poésie pourrait de manière plausible enfreindre la condition "l'indentation n'est pas significative", et pourrait donc être mieux placée dans un <pre>.
Mark Amery

2
Qu'en est-il de l'utilisation <br />lors de la signature d'un e-mail, tel que: <footer>Sincerely,<br />StrexCorp</footer> Opinions?
JHS

109

Je pense que votre équipe de développement se réfère à la <br />place de l'espacement des marges. Pour créer un espace vide entre les éléments, utilisez le style de remplissage / marge via CSS.

Mauvaise utilisation de <br />:

<div>
   Content
</div>
<br />
<br />
<br />
<br />
<div>
     More content...
</div>

Bon usage de <br />:

<style>
     div {
          margin-top:10px;
     }
</style>

<div>
   Content<br />
   Line break
</div>

<div>
     More content...
</div>

4
Vous ne pouvez pas simplement supprimer vos <br> et ajouter du CSS, car si vous avez supprimé vos <br>, il n'y a rien à styler. Il n'est pas extrêmement utile de dire "supprimez vos sauts de ligne" sans aider (littéralement) à remplir les blancs
Gareth

7
Vous avez raison, iamkoa, mais cela n'explique pas pourquoi . Il ne répond donc pas à la question. 24 votes positifs semble un peu trop.
Courses de légèreté en orbite le

@iamkoa Vous n'expliquez pas pourquoi .
Fabian Picone

Je pense que la deuxième option est meilleure car elle est plus propre et plus simple, je pense que ce n'est pas nécessaire d'utiliser br
simon

26

Généralement, <br/>c'est une indication d'un HTML sémantique médiocre. Le cas le plus courant est l'utilisation <br/>pour déclarer des séparations de paragraphes, ce qui existe de bien meilleures façons de le faire sémantiquement. Voir Bed and BReakfast .

Il y a des occasions où c'est la bonne balise à utiliser, mais on en abuse assez souvent pour que les gens adoptent une mentalité "ne pas utiliser" pour forcer une meilleure pensée sémantique.


13

Ce que voulait dire votre équipe était probablement de ne pas utiliser les <br> pour se diviser entre les paragraphes.

<p>I am a paragraph</p>
<p>I am a second paragraph</p>

est le meilleur moyen de le faire, car vous pouvez ensuite facilement ajuster les espaces entre les paragraphes via CSS. A part cela, je ne peux penser à rien qui parle des sauts de ligne en tant que tels.


9

Le même concept s'applique à la raison pour laquelle nous n'utilisons pas de tableaux pour la mise en page - utilisez des tableaux pour les tableaux et CSS pour la mise en page.

Utilisez <br/>pour les lignes de rupture dans un bloc de texte et CSS si vous souhaitez affecter la mise en page.


4

La spécification directe de la mise en page rend difficile l'adaptation du site à différentes tailles de page ou polices par exemple.


2

Je définirai généralement toujours des marges et un rembourrage appropriés sur les éléments en utilisant CSS - c'est beaucoup moins compliqué que des tas de <br />s partout en plus d'être plus sémantiquement correct.

La seule fois où j'utiliserais a <br />de préférence aux marges et au rembourrage définis par CSS, même si ce n'est pas strictement techniquement correct, c'est s'il s'agissait d'un incident isolé où un peu plus d'espace était nécessaire. Si j'avais une feuille de style assez volumineuse et que cela ne valait pas la peine de configurer un style supplémentaire juste pour cette occurrence, je peux utiliser un <br />comme une seule.

Comme la plupart des choses, les <br />s ne sont pas une mauvaise chose à condition qu'ils soient utilisés correctement.


1

J'essaie d'écrire mon balisage de manière à ce qu'il soit facilement lisible avec CSS désactivé. Si vous utilisez simplement des BR pour ajouter de l'espacement, il est préférable d'utiliser des marges et un remplissage.


1

<br />ne doit être utilisé que pour les sauts de ligne et non pour appliquer un style à une page. Par exemple, si vous avez besoin d'espace supplémentaire entre les paragraphes, donnez-leur une classe et appliquez le remplissage supplémentaire aux paragraphes. N'étalez pas vos paragraphes avec<br /><br ><br />


1

Ils doivent être utilisés pour représenter les nouvelles lignes. Rien de plus. Ne pas remplir l'espace comme sur le site de géocités moyen. Il n'y a cependant qu'un seul cas où ils peuvent être utiles à d'autres fins que de mettre une nouvelle ligne: pour effacer les flotteurs.

<br style="clear: both;">

1
Bien qu'utilisée, cette méthode n'est pas un XHTML valide.
iamkoa

2
Vous pouvez souvent contourner ce "hack" en utilisant overflow:autoplutôt l'élément contenant.
mpen

2
@iamkoa: Je n'utilise pas XHTML. HTML est HTML, pas XML.
BalusC

1

N'utilisez pas trois<br> s consécutifs ou plus , c'est un signal que vous les utilisez à des fins stylistiques et non, vous ne devriez pas.

Certains diront qu'un seul <br>suffit et au lieu de deux, vous devriez utiliser <p></p>, mais il y a des situations (par exemple des scénarios) dans lesquelles vous voulez introduire une pause plus longue sans impliquer un changement de sujet ou une nouvelle période commençant, comme le fait habituellement un paragraphe.


0

Ils sont bien, s'ils sont utilisés de manière appropriée. Par exemple, vous ne devez pas les utiliser à la place de <p>balises ou pour créer un espacement entre les éléments. Vous faites probablement quelque chose de mal si jamais vous en avez deux de suite.


0

Si tu fais ça: <BR/> <BR/>

Vous obtiendrez une mise en page différente sur différents navigateurs.

Deeper:
Si vous utilisez <BR/>juste pour les sauts de ligne - ok.
Si vous utilisez <BR/>comme espaceur de ligne - pas ok.


0

Voici un exemple comment <br>peut affecter négativement le style (exécuter un extrait de code pour les visuels)

(notez le bouton mal aligné et l'espace impair sur la droite):

button {
  width: 70px;
  height: 70px;
}
#arrows {
  border: solid thin red;
  display: inline-block;
}
#arrows span:first-of-type { 
  text-align: center; 
  display: block;
}
#moveUp {
  margin: 0;
}
/* In the current case instead of <br> use display */
/*
#arrows span:last-of-type { 
  display: block;
}
*/
<div id="arrows">
  <span>
    <button id="moveUp" value="üles">&uarr;</button> 
  </span>
  <button id="moveLeft" value="vasakule">&larr;</button> 
  <button id="moveDown" value="alla">&darr;</button> 
  <button id="moveRight" value="paremale">&rarr;</button> 
  <br>    <!-- note the shifted button and odd space on right -->
  <span>or move with keyboard arrows</span>
</div>


-2

Dans HTML (HTML jusqu'à 4): l' utilisation <br>
dans HTML 5: <br> est préféré, mais <br/>et <br />est également acceptable
en XHTML: <br /> est préféré. Peut également utiliser <br/>ou<br></br>

L'utilisation de <br>balise est donc parfaitement valide en HTML. Mais l'utilisation de <br>n'est pas recommandée?

La principale raison pour laquelle ne pas utiliser <br>est parce que ce n'est pas une balise sémantique et n'a pas de contenu à l'intérieur. Son utilisation peut être évitée comme,

<p>some<br>text<p>

peut être marqué sans <br>que

 <p>some</p>
 <p>text<p>

Si vous utilisez un <br>autre objectif comme l'espacement du haut, etc., cela peut être réalisé via la marginpropriété CSS .


1
Notez que l'utilisation de <p> ajoutera une marge d'environ 16 pixels en haut et en bas. Définissez chacune des marges de la balise <p> sur 0px pour éviter d'espacer les lignes en utilisant plus de hauteur qu'elles ne le devraient.
Satbir Kira
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.