A volte è male usare <BR />?

A volte è male usare i <BR/>tag?

Lo chiedo perché alcuni dei primi consigli che il mio team di sviluppo mi ha dato è stato questo: non usare <BR/>; invece usa gli stili. Ma perché? Ci sono risultati negativi quando si usano i <BR/>tag?

Il motivo principale per cui non si utilizza <br>è che non è semantico . Se vuoi due elementi in diversi blocchi visivi, probabilmente li vuoi in diversi blocchi logici.

Nella maggior parte dei casi ciò significa semplicemente utilizzare elementi diversi, ad esempio <p>Stuff</p><p>Other stuff</p>, e quindi utilizzare CSS per distanziare correttamente i blocchi.

Ci sono casi in cui <br>è semanticamente valido, cioè casi in cui l'interruzione di linea fa parte dei dati che stai inviando. Questo è davvero limitato a 2 casi d'uso: indirizzi di poesia e di posta.

Penso che il tuo team di sviluppo si riferisca al <br />posto della spaziatura dei margini. Per creare uno spazio vuoto tra gli elementi, utilizzare lo stile di riempimento / margine tramite CSS.

Cattivo utilizzo di <br />:

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

Buon uso di <br />:

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

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

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

Generalmente, <br/>è un'indicazione di HTML semantico scarso. Il caso più comune sta usando <br/>per dichiarare le separazioni di paragrafo, che ci sono modi molto migliori per farlo semanticamente. Vedi Bed and BReakfast .

Ci sono occasioni in cui è il tag giusto da usare, ma è abusato abbastanza spesso che le persone adottano una mentalità "non usare" per forzare un migliore pensiero semantico.

Quello che intendeva dire la tua squadra era probabilmente di non usare <br> per dividere i paragrafi.

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

è il modo migliore per farlo, perché è quindi possibile regolare facilmente gli spazi tra i paragrafi tramite CSS. A parte questo, non riesco a pensare a nulla che parli di nuovo a interruzioni di linea in quanto tali.

Lo stesso concetto si applica al motivo per cui non utilizziamo le tabelle per il layout: utilizzare le tabelle per le tabelle e CSS per il layout.

Utilizzare <br/>per le linee di interruzione in un blocco di testo e CSS se si desidera influire sul layout.

La specifica diretta del layout rende difficile ad esempio l'adattamento del sito a dimensioni di pagina o caratteri diversi.

Generalmente imposterò sempre i margini e il riempimento appropriati sugli elementi usando i CSS - è molto meno disordinato di un sacco di <br />s in tutto il luogo oltre ad essere più semanticamente corretto.

Probabilmente l'unica volta in cui preferirei una <br />preferenza ai margini e all'imbottitura impostati dai CSS, anche se non è strettamente tecnicamente corretto, è se si trattasse di un incidente isolato in cui era necessario leggermente più spazio. Se avessi avuto piuttosto una grande foglio di stile e non mi sembra impostazione del valore massimo uno stile aggiuntivo solo per questo un avvenimento, io possa utilizzare un <br />come un one-off.

Come la maggior parte delle cose, <br />non sono una cosa negativa a condizione che vengano utilizzati correttamente.

Provo a scrivere il mio markup in modo che sia facilmente leggibile con CSS disabilitato. Se stai solo usando BR per aggiungere la spaziatura, è meglio usare i margini e il riempimento.

<br />deve essere utilizzato solo per le interruzioni di riga e non per applicare lo stile a una pagina. Ad esempio, se hai bisogno di spazio extra tra i paragrafi, dai loro una classe e applica il riempimento extra ai paragrafi. Non distribuire i tuoi paragrafi con<br /><br ><br />

Devono essere usati per rappresentare le nuove linee. Niente di più. Non riempire lo spazio come nel sito medio di geocities. Vi è tuttavia solo un caso in cui possono essere utili per scopi diversi da quelli di mettere una nuova riga: eliminare i galleggianti.

<br style="clear: both;">

Non usare tre o più <br>s consecutivi , è un segnale che li stai usando per scopi stilistici e no, non dovresti.

Alcuni direbbero che un singolo <br>è abbastanza e invece di due che dovresti usare <p></p>, ma ci sono situazioni (ad esempio sceneggiature) in cui vuoi introdurre una pausa più lunga senza implicare un cambio di argomento o un nuovo periodo di inizio, come fa di solito un paragrafo.

Stanno bene, se usati in modo appropriato. Ad esempio, non dovresti usarli al posto dei <p>tag o per creare una spaziatura tra gli elementi. Probabilmente stai sbagliando qualcosa se ne hai mai due di fila.

Se lo fai: <BR/> <BR/>

Otterrai un layout diverso su diversi browser.

Più profondo:
se lo usi <BR/>solo per le interruzioni di riga, ok.
Se lo usi <BR/>come distanziatore di linea, non va bene.

Ecco un esempio di come <br>può influire negativamente sullo stile (esegui snippet per elementi visivi)

(notare il pulsante disallineato e lo spazio dispari a destra):

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>

In HTML (fino a HTML 4): uso <br>
in HTML 5: <br> è preferito, ma <br/>ed <br />è anche accettabile
in Valid: <br /> è preferito. Può anche usare <br/>o<br></br>

Quindi l'uso del <br>tag è un codice HTML perfettamente valido. Ma l'uso di <br>non è raccomandato?

Il motivo principale per cui non utilizzare <br>è perché non è un tag semantico e non contiene contenuti. Il suo uso può essere evitato come,

<p>some<br>text<p>

può essere marcato senza <br>as

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

Se stai usando <br>altri scopi come top-spacing ecc. Che possono essere raggiunti tramite la marginproprietà CSS .