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

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?

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.

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>

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.

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.

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.

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

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.

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.

<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 />

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;">

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.

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.

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.

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>

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 .