Est-il parfois mauvais d'utiliser <BR />?
Est-il parfois mauvais d'utiliser des balises <BR/>?
Je pose la question parce que certains des premiers conseils donnés par mon équipe de développement étaient les suivants: n’utilisez pas <BR/>; utilisez plutôt des styles. Mais pourquoi? Existe-t-il des résultats négatifs lors de l’utilisation des balises <BR/>?
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 existe des cas où <br> est sémantiquement valide, c'est-à-dire où le saut de ligne correspond à une partie des données que vous envoyez. Ce n'est vraiment limité qu'à 2 cas d'utilisation - poésie et adresses postales.
Je pense que votre équipe de développement fait référence à <br /> à la place de l'espacement des marges. Pour créer un espace vide entre les éléments, utilisez un style de remplissage/marge via CSS.
Mauvaise utilisation de <br />:
<div>
Content
</div>
<br />
<br />
<br />
<br />
<div>
More content...
</div>
Bonne utilisation de <br />:
<style>
div {
margin-top:10px;
}
</style>
<div>
Content<br />
Line break
</div>
<div>
More content...
</div>
De manière générale, <br/> est une indication d'un code HTML sémantique médiocre. Le cas le plus courant consiste à utiliser <br/> pour déclarer des séparations de paragraphes, qu'il existe de bien meilleures façons de le faire sémantiquement. Voir Bed and Breakfast .
Il y a des cas où c'est la balise appropriée à utiliser, mais on en abuse trop souvent pour que les gens adoptent une mentalité du "ne pas utiliser" afin de forcer une meilleure pensée sémantique.
Ce que votre équipe voulait dire était probablement de ne pas utiliser <br> s pour scinder en paragraphes.
<p>I am a paragraph</p>
<p>I am a second paragraph</p>
c’est la meilleure façon de le faire, car vous pouvez alors facilement ajuster les espaces entre les paragraphes via CSS. En dehors de cela, je ne peux penser à rien qui parle contre les sauts de ligne comme tels.
Le même concept s'applique à la raison pour laquelle nous n'utilisons pas de tableaux pour la présentation - utilisez des tableaux pour les tableaux et CSS pour la présentation
Utilisez <br/> pour les lignes de séparation 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.
En général, je vais toujours définir les marges et les marges appropriées sur les éléments à l'aide de CSS - c'est beaucoup moins salissant que des charges de <br />s partout sauf que je suis plus sémantiquement correct.
La seule fois où j'utiliserais plutôt un <br /> par rapport aux marges et au bourrage définis par CSS, même si ce n'est pas techniquement correct, c'est s'il s'agissait d'un incident isolé nécessitant un peu plus d'espace. Si j'avais une feuille de style assez volumineuse et qu'il ne semblait pas utile de créer un style supplémentaire uniquement pour cette occurrence, je pourrais / utiliser un <br /> comme élément unique.
Comme la plupart des choses, <br />s n'est pas une mauvaise chose à condition d'être utilisé correctement.
Ils doivent être utilisés pour représenter les nouvelles lignes. Rien de plus. Pas pour remplir l'espace comme sur le site moyen des géocités. Il n'y a cependant qu'un seul cas où ils peuvent soient utiles à d'autres fins que de mettre une nouvelle ligne: nettoyer les flotteurs.
<br style="clear: both;">
<br /> doit être utilisé uniquement 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, attribuez-leur une classe et appliquez le remplissage supplémentaire aux paragraphes. Ne répartissez pas vos paragraphes avec <br /><br ><br />
Si vous faites cela: <BR/> <BR/>
Vous obtiendrez une mise en page différente sur différents navigateurs.
Plus profond:
Si vous utilisez <BR/> uniquement pour les sauts de ligne - ok.
Si vous utilisez <BR/> comme espaceur de ligne, vous n’allez pas
N'utilisez pas trois ou plus de <br>s consécutifs, c'est un signe que vous les utilisez à des fins stylistiques et non, vous ne devriez pas.
Certains diraient qu'un seul <br> est suffisant et qu'au lieu de deux, vous devez utiliser <p></p>, mais il existe des situations (par exemple des scénarios) dans lesquelles vous souhaitez introduire une pause plus longue sans impliquer un changement de sujet ou un nouveau point, comme un paragraphe Est-ce que.
Voici un exemple montrant comment <br> peut avoir un effet négatif sur le style
(notez le bouton mal aligné et l’espace impair à 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">↑</button>
</span>
<button id="moveLeft" value="vasakule">←</button>
<button id="moveDown" value="alla">↓</button>
<button id="moveRight" value="paremale">→</button>
<br> <!-- note the shifted button and odd space on right -->
<span>or move with keyboard arrows</span>
</div>J'essaie d'écrire mon balisage de manière à ce qu'il soit facilement lisible avec CSS désactivé. Si vous utilisez uniquement des BR pour ajouter de l'espacement, il est préférable d'utiliser des marges et du remplissage.
Ils vont bien, s'ils sont utilisés correctement. Par exemple, vous ne devriez pas les utiliser à la place des balises <p> ou pour créer un espacement entre les éléments. Vous faites probablement quelque chose de mal si vous en avez déjà deux de suite.