Ist es manchmal schlecht, <BR /> zu verwenden?

157

Ist es manchmal schlecht, <BR/>Tags zu verwenden ?

Ich frage, weil einige der ersten Ratschläge, die mir mein Entwicklungsteam gab, folgende waren: Nicht verwenden <BR/>; Verwenden Sie stattdessen Stile. Aber wieso? Gibt es negative Ergebnisse bei der Verwendung von <BR/>Tags?

Bleistiftkuchen
quelle
10
Der beste Weg, um die beste Antwort zu finden, ist, zu Ihrem Entwicklerteam zu gehen und sie zu fragen, WARUM?
Azamsharp
47
Ist es plötzlich falsch, zu versuchen, eine Antwort von StackOverflow zu erhalten, anstatt von Teammitgliedern?
Nosredna
7
Nein, es ist nur jemand, der ihm eine subjektive Antwort gegeben hat, und er bittet uns, die Gründe dafür zu erraten ... Fragen Sie einfach die Person, die Ihnen die subjektive Antwort gegeben hat, insbesondere, wenn sie in der Nähe ist (im selben Entwicklungsteam)
Gabriel Magana
8
Normalerweise kommt "erster Rat", wenn der Mitarbeiter neu ist. Ein neuer Mitarbeiter möchte nicht immer fragen, warum? Natürlich gibt es Zeiten, in denen es am besten ist, nach dem Warum zu fragen, aber ich denke, Burak Ozdogan versteht wahrscheinlich das "Warum", nachdem er diese Fragen gelesen hat. Oder versteht zumindest, was die HTML-Community im Großen und Ganzen gut genug über das Thema sagt, um es zu diskutieren. Ich würde sagen, er hat den richtigen Schritt gemacht, um zu fragen.
Nosredna
5
Ich verstehe Ihren Rat und Art von Ihnen sind richtig. Aber die Sache ist, wenn Sie in ein neues Team eintreten, so viele Eingaben, die Sie in kurzer Zeit erhalten. Und einige von ihnen werden gerade erwähnt; wie ein Detail in Klammern angegeben. Ich wollte es hier aus zwei Gründen fragen: Um eine Antwort zu bekommen und unterschiedliche Meinungen zu sehen, wie man es angeht. danke Leute!
Bleistiftkuchen

Antworten:

172

Der Hauptgrund für die Nichtverwendung <br>ist, dass es nicht semantisch ist . Wenn Sie zwei Elemente in unterschiedlichen visuellen Blöcken möchten, möchten Sie sie wahrscheinlich in unterschiedlichen logischen Blöcken.

In den meisten Fällen bedeutet dies beispielsweise, nur verschiedene Elemente zu verwenden <p>Stuff</p><p>Other stuff</p>und dann CSS zu verwenden, um die Blöcke richtig zu platzieren.

Es gibt Fälle, in denen <br>die Semantik gültig ist, dh Fälle, in denen der Zeilenumbruch Teil der von Ihnen gesendeten Daten ist. Dies ist wirklich nur auf 2 Anwendungsfälle beschränkt - Gedichte und Postanschriften.

Gareth
quelle
38
Persönlich würde ich es vorziehen, <pre/>für Gedichte zu verwenden. Auf diese Weise geben Sie ausdrücklich an, dass die ursprüngliche Komposition einschließlich möglicher Einrückungen beibehalten werden soll.
Michał Górny
6
@ MichałGórny spricht einen guten Punkt an - <br>s scheinen nur dann angemessen zu sein, wenn alle folgenden Bedingungen zutreffen: 1. Zeilenumbrüche sind semantisch bedeutsam, 2. Einrückung ist nicht semantisch bedeutsam (andernfalls sollten Sie a verwenden <pre>, 3. Es gibt keine andere semantisch angemessene Tag, wie ein Absatz- oder Header-Tag. Postanschriften erfüllen alle drei dieser Bedingungen, ebenso wie Songtexte. Poesie könnte plausibel gegen die Bedingung „Einrückung ist nicht sinnvoll“ verstoßen und daher besser in eine <pre>.
Mark Amery
2
Was ist mit der Verwendung <br />beim Abmelden einer E-Mail, z. B.: <footer>Sincerely,<br />StrexCorp</footer> Meinungen?
JHS
109

Ich denke, Ihr Entwicklungsteam bezieht sich auf den Randabstand <br />. Verwenden Sie Padding / Rand-Styling über CSS, um Leerzeichen zwischen Elementen zu schaffen.

Schlechte Verwendung von <br />:

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

Gute Verwendung von <br />:

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

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

<div>
     More content...
</div>
iamkoa
quelle
4
Sie können nicht einfach Ihre <br> s entfernen und CSS hinzufügen, denn wenn Sie Ihre <br> s entfernt haben, gibt es nichts zu stylen. Es ist nicht unglaublich hilfreich zu sagen "Entfernen Sie Ihre Zeilenumbrüche", ohne (buchstäblich) zu helfen, die Lücken zu füllen
Gareth
7
Du hast recht, iamkoa, aber das erklärt nicht warum . Daher beantwortet es die Frage nicht. 24 Upvotes scheinen ein bisschen viel zu sein.
Leichtigkeitsrennen im Orbit
@iamkoa Du erklärst nicht warum .
Fabian Picone
Ich denke, dass die zweite Option besser ist, weil sie sauberer und einfacher ist. Ich denke, sie wird nicht benötigt. Verwenden Sie br
simon
26

Im Allgemeinen <br/>ist dies ein Hinweis auf schlechtes semantisches HTML. Der häufigste Fall ist <br/>das Deklarieren von Absatztrennungen. Es gibt viel bessere Möglichkeiten, dies semantisch zu tun. Siehe Bett und Frühstück .

Es gibt Fälle, in denen es das richtige Tag ist, aber es wird oft genug missbraucht, dass Menschen eine "Nicht verwenden" -Mentalität annehmen, um ein besseres semantisches Denken zu erzwingen.

Fengb
quelle
13

Mit Ihrem Team war wahrscheinlich gemeint, <br> s nicht zum Aufteilen zwischen Absätzen zu verwenden.

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

Dies ist der bessere Weg, da Sie die Abstände zwischen Absätzen dann einfach über CSS anpassen können. Abgesehen davon kann ich mir nichts vorstellen, was gegen Zeilenumbrüche als solche spricht.

Pekka
quelle
9

Das gleiche Konzept gilt für den Grund, warum wir keine Tabellen für das Layout verwenden - verwenden Sie Tabellen für Tabellen und CSS für das Layout.

Verwenden Sie diese Option <br/>für Zeilenumbrüche in einem Textblock und CSS, wenn Sie das Layout beeinflussen möchten.

Dieter G.
quelle
4

Wenn Sie das Layout direkt angeben, ist es beispielsweise schwierig, die Site an verschiedene Seitengrößen oder Schriftarten anzupassen.

Martin Beckett
quelle
2

Ich werde im Allgemeinen immer geeignete Ränder und Auffüllungen für Elemente mit CSS festlegen - es ist viel weniger chaotisch als jede Menge <br />s überall, abgesehen davon, dass es semantisch korrekter ist.

Wahrscheinlich würde ich die <br />von CSS festgelegten Ränder und Auffüllungen nur dann bevorzugen, wenn dies technisch nicht korrekt ist, wenn es sich um einen Einzelfall handelt, bei dem etwas mehr Platz benötigt wird. Wenn ich eine recht große Sheet bekommen hatte und es schien nicht wert Einrichtung einer zusätzlichen Stil nur für diese eine Begebenheit, ich kann eine Verwendung <br />als Einmal.

Wie die meisten Dinge sind <br />s keine schlechte Sache, vorausgesetzt, sie werden richtig verwendet.

BlissC
quelle
1

Ich versuche, mein Markup so zu schreiben, dass es bei deaktiviertem CSS leicht lesbar ist. Wenn Sie nur BRs verwenden, um Abstände hinzuzufügen, ist es besser, Ränder und Auffüllungen zu verwenden.

BStruthers
quelle
1

<br />sollte nur für Zeilenumbrüche verwendet werden und nicht, um Stil auf eine Seite anzuwenden. Wenn Sie beispielsweise zusätzlichen Abstand zwischen Absätzen benötigen, geben Sie ihnen eine Klasse und wenden Sie den zusätzlichen Abstand auf die Absätze an. Verbreiten Sie Ihre Absätze nicht mit<br /><br ><br />

Zoe
quelle
1

Sie sollen zur Darstellung von Zeilenumbrüchen verwendet werden. Nichts mehr. Nicht so viel Platz ausfüllen wie am durchschnittlichen Standort der Geocities. Es gibt jedoch nur einen Fall , in dem sie können für andere Zwecke nützlich sein , eine neue Zeile als setzen: den Schwimmer zu löschen.

<br style="clear: both;">
BalusC
quelle
1
Obwohl diese Methode verwendet wird, ist XHTML nicht gültig.
Iamkoa
2
Sie können diesen "Hack" oft umgehen, indem Sie stattdessen overflow:autodas enthaltende Element verwenden.
Mpen
2
@iamkoa: Ich benutze kein XHTML. HTML ist HTML, nicht XML.
BalusC
1

Verwenden Sie nicht drei oder mehr aufeinanderfolgende <br>s, das ist ein Signal, das Sie für stilistische Zwecke verwenden, und nein, das sollten Sie nicht.

Einige würden sagen, ein einzelnes <br>ist genug und anstelle von zwei sollten Sie verwenden <p></p>, aber es gibt Situationen (z. B. Drehbücher), in denen Sie eine längere Pause einführen möchten, ohne einen Themenwechsel oder einen Beginn eines neuen Zeitraums zu implizieren, wie dies normalerweise in einem Absatz der Fall ist.

ZJR
quelle
0

Sie sind in Ordnung, wenn sie angemessen verwendet werden. Sie sollten sie beispielsweise nicht anstelle von <p>Tags oder zum Erstellen von Abständen zwischen Elementen verwenden. Sie machen wahrscheinlich etwas falsch, wenn Sie jemals zwei hintereinander haben.

mpen
quelle
0

Wenn du das tust: <BR/> <BR/>

Sie erhalten unterschiedliche Layouts in verschiedenen Browsern.

Tiefer:
Wenn Sie <BR/>nur für Zeilenumbrüche verwenden - ok.
Wenn Sie <BR/>als Linienabstandshalter verwenden - nicht in Ordnung.

GY
quelle
0

Hier ist ein Beispiel, wie <br>sich das Styling negativ auswirken kann (Snippet für Visuals ausführen)

(Beachten Sie die falsch ausgerichtete Schaltfläche und das ungerade Leerzeichen rechts):

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>

mhpreiman
quelle
-2

In HTML (HTML bis 4): Verwendung <br>
in HTML 5: <br> ist bevorzugt, jedoch <br/>und <br />ist auch akzeptabel ,
in XHTML: <br /> bevorzugt. Kann auch <br/>oder verwenden<br></br>

Die Verwendung von <br>Tags ist also vollkommen gültiges HTML. Aber die Verwendung von <br>wird nicht empfohlen?

Der Hauptgrund, warum Sie es nicht verwenden sollten, <br>ist, dass es kein semantisches Tag ist und keinen Inhalt enthält. Seine Verwendung kann wie vermieden werden,

<p>some<br>text<p>

kann ohne <br>als markiert werden

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

Wenn Sie einen <br>anderen Zweck wie den oberen Abstand usw. verwenden, kann dies über die CSS- marginEigenschaft erreicht werden.

Aamir Shahzad
quelle
1
Beachten Sie, dass bei Verwendung von <p> oben und unten ein Rand von ~ 16 Pixel hinzugefügt wird. Setzen Sie jeden Rand des <p> -Tags auf 0px, um zu vermeiden, dass die Linien mehr Höhe haben, als sie sollten.
Satbir Kira