Czy używanie <BR /> czasami jest złe?

157

Czy używanie <BR/>tagów jest czasami złe ?

Pytam, ponieważ pierwsza rada, której udzielił mi mój zespół programistów, brzmiała: Nie używaj <BR/>; zamiast tego użyj stylów. Ale dlaczego? Czy używanie <BR/>tagów ma negatywne skutki ?

ołówekCake
źródło
10
Najlepszym sposobem na znalezienie najlepszej odpowiedzi jest udanie się do swojego zespołu programistów i spytanie ich DLACZEGO?
azamsharp
47
Czy nagle jest to niewłaściwa rzecz, próbując uzyskać odpowiedź ze StackOverflow, a nie członków zespołu?
Nosredna
7
Nie, po prostu ktoś udzielił mu subiektywnej odpowiedzi i prosi nas, abyśmy odgadli powód tego ... Po prostu idź i zapytaj osobę, która udzieliła ci subiektywnej odpowiedzi, szczególnie jeśli jest w pobliżu (w tym samym zespole programistów)
Gabriel Magana
8
Zwykle „pierwsza rada” przychodzi, gdy pracownik jest nowy. Nowy pracownik nie zawsze ma ochotę zapytać „dlaczego”? Oczywiście są chwile, kiedy najlepiej jest zapytać dlaczego, ale myślę, że Burak Ozdogan prawdopodobnie rozumie „dlaczego” po przeczytaniu tych pytań. Lub przynajmniej rozumie, co ogólnie rzecz biorąc społeczność HTML mówi na ten temat na tyle dobrze, aby o tym porozmawiać. Powiedziałbym, że wykonał właściwy ruch, przychodząc tutaj, aby zapytać.
Nosredna
5
Rozumiem twoją radę i mam rację. Ale chodzi o to, że kiedy wchodzisz do nowego zespołu, dostajesz tak wiele informacji w krótkim czasie. A o niektórych z nich właśnie wspomniano; jak szczegół podany w nawiasach. Chciałem o to tutaj zadać z dwóch powodów: aby uzyskać odpowiedź i zobaczyć różne opinie, jak do tego podejść. dzięki chłopaki!
PencilCake

Odpowiedzi:

173

Głównym powodem nieużywania <br>jest to, że nie jest semantyczny . Jeśli chcesz mieć dwa elementy w różnych blokach wizualnych, prawdopodobnie chcesz, aby były w różnych blokach logicznych.

W większości przypadków oznacza to na przykład użycie różnych elementów <p>Stuff</p><p>Other stuff</p>, a następnie użycie CSS do prawidłowego rozmieszczenia bloków.

Istnieją przypadki, w których <br>jest semantycznie poprawne, tj. Przypadki, w których podział wiersza jest częścią wysyłanych danych. Jest to tak naprawdę ograniczone tylko do 2 przypadków użycia - poezji i adresów pocztowych.

Gareth
źródło
38
Osobiście wolałbym używać <pre/>do poezji. W ten sposób wyraźnie określisz, że intencją jest zachowanie oryginalnej kompozycji, w tym ewentualnych wcięć.
Michał Górny
6
@ MichałGórny podnosi słuszną uwagę - <br>wydaje się, że są odpowiednie tylko wtedy, gdy spełnione są wszystkie poniższe warunki: 1. Nowych wierszy ma znaczenie semantyczne, 2. Wcięcie nie ma znaczenia semantycznego (w przeciwnym razie należy użyć a <pre>, 3. Nie ma innych odpowiednich semantycznie znacznik, taki jak znacznik akapitu lub nagłówka. Adresy pocztowe spełniają wszystkie te trzy warunki, podobnie jak teksty piosenek. Poezja może prawdopodobnie naruszać warunek „wcięcie nie ma znaczenia”, więc lepiej byłoby umieścić je w a <pre>.
Mark Amery
2
A co z wykorzystaniem <br />do podpisywania wiadomości e-mail, na przykład: <footer>Sincerely,<br />StrexCorp</footer> Opinie?
JHS
109

Myślę, że twój zespół programistów odnosi się do <br />odstępów między marginesami. Aby zrobić pustą przestrzeń między elementami, użyj stylu dopełnienia / marginesów przez CSS.

Złe użycie <br />:

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

Dobre wykorzystanie <br />:

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

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

<div>
     More content...
</div>
iamkoa
źródło
4
Nie możesz po prostu usunąć swoich zdjęć i dodać CSS, ponieważ jeśli usunąłeś swoje zdjęcia, nie ma nic do stylizacji. Powiedzenie „usuń znaki końca wiersza” bez pomocy (dosłownie) w wypełnieniu luk nie jest niezwykle pomocne
Gareth
7
Masz rację, iamkoa, ale to nie wyjaśnia dlaczego . Dlatego nie odpowiada na to pytanie. 24 głosy poparcia wydają się trochę za dużo.
Wyścigi lekkości na orbicie,
@iamkoa Nie wyjaśniasz dlaczego .
Fabian Picone
Myślę, że ta druga opcja jest lepsza bo jest czystsza i prostsza myślę że nie jest potrzebna użyj br
simon
26

Ogólnie <br/>jest oznaką słabego semantycznego kodu HTML. Najczęstszym przypadkiem jest użycie <br/>do deklarowania separacji akapitów, które są znacznie lepsze, aby zrobić to semantycznie. Zobacz Łóżko i BReakfast .

Są sytuacje, w których jest to właściwy tag, ale jest on nadużywany na tyle często, że ludzie przyjmują mentalność „nie używaj”, aby wymusić lepsze myślenie semantyczne.

fengb
źródło
13

Twój zespół prawdopodobnie miał na myśli to, że nie używaj klawiszy <br> do dzielenia akapitów.

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

jest lepszym sposobem, aby to zrobić, ponieważ możesz łatwo dostosować odstępy między akapitami za pomocą CSS. Poza tym nie przychodzi mi do głowy nic, co mówi o przerwach między wierszami.

Pekka
źródło
9

Ta sama koncepcja dotyczy tego, dlaczego nie używamy tabel do układu - użyj tabel do tabel i CSS do układu.

Używaj <br/>do łamania linii w bloku tekstu i CSS, jeśli chcesz zmienić układ.

Dieter G.
źródło
4

Bezpośrednie określenie układu utrudnia na przykład dostosowanie witryny do różnych rozmiarów stron lub czcionek.

Martin Beckett
źródło
2

Generalnie zawsze będę ustawiał odpowiednie marginesy i dopełnienie elementów za pomocą CSS - jest o wiele mniej bałaganu niż mnóstwo <br />s w każdym miejscu, poza tym, że jest bardziej poprawny semantycznie.

Prawdopodobnie jedyny przypadek, w którym użyłbym a <br />zamiast marginesów i wypełnienia ustawionych przez CSS, nawet jeśli nie jest to ściśle technicznie poprawne, to przypadek odizolowany, w którym potrzebne było nieco więcej miejsca. Gdybym dostał sporą stylów i nie wydaje się wart utworzenie dodatkowego stylu tylko dla tego jednego wystąpienia, ja może używać <br />jako jednorazową.

Jak większość rzeczy, <br />nie są one złe, pod warunkiem, że są prawidłowo używane.

BlissC
źródło
1

Staram się pisać moje znaczniki w taki sposób, aby były czytelne przy wyłączonym CSS. Jeśli używasz tylko BR do dodawania odstępów, lepiej jest użyć marginesów i dopełnienia.

BStruthers
źródło
1

<br />powinien być używany tylko do znaków końca wierszy, a nie do stosowania stylu do strony. Na przykład, jeśli potrzebujesz dodatkowej przestrzeni między akapitami, nadaj im klasę i zastosuj dodatkowe wypełnienie do akapitów. Nie rozkładaj akapitów za pomocą<br /><br ><br />

Zoe
źródło
1

Mają być używane do reprezentowania nowych linii. Nic więcej. Nie zapełniają przestrzeni, jak na przeciętnej stronie geocities. Jest jednak tylko jeden przypadek, w którym mogą one być użyteczne do innych celów niż wstawianie nowej linii: do wyczyszczenia pływaków.

<br style="clear: both;">
BalusC
źródło
1
Chociaż jest używana, ta metoda nie jest poprawnym XHTML.
iamkoa
2
Często można obejść ten „hack”, używając overflow:autozamiast tego elementu zawierającego.
otwarte
2
@iamkoa: Nie używam XHTML. HTML to HTML, a nie XML.
BalusC
1

Nie używaj trzech lub więcej kolejnych <br>s, to sygnał, że używasz ich do celów stylistycznych i nie, nie powinieneś.

Niektórzy powiedzieliby, że <br>wystarczy jeden , a zamiast dwóch powinieneś użyć <p></p>, ale są sytuacje (np. Scenariusze), w których chcesz wprowadzić dłuższą pauzę bez sugerowania zmiany tematu lub rozpoczęcia nowego okresu, jak zwykle robi to akapit.

ZJR
źródło
0

Są w porządku, jeśli są odpowiednio używane. Na przykład nie należy ich używać zamiast <p>tagów lub do tworzenia odstępów między elementami. Prawdopodobnie robisz coś złego, jeśli kiedykolwiek będziesz mieć dwa z rzędu.

mpen
źródło
0

Jeśli to zrobisz: <BR/> <BR/>

Otrzymasz inny układ w różnych przeglądarkach.

Głębiej:
jeśli używasz <BR/>tylko do łamania linii - ok.
Jeśli używasz <BR/>jako przekładki liniowej - nie jest w porządku.

GY
źródło
0

Oto przykład, jak <br>może negatywnie wpłynąć na stylizację (uruchom fragment kodu dla wizualizacji)

(zwróć uwagę na niewyrównany przycisk i dziwną spację po prawej stronie):

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
źródło
-2

W HTML (do HTML 4): użyj <br>
W HTML 5: <br> jest preferowane, ale <br/>i <br />jest również dopuszczalne.
W XHTML: <br /> jest preferowane. Można również użyć <br/>lub<br></br>

Zatem użycie <br>tagu jest całkowicie poprawnym kodem HTML. Ale użycie <br>nie jest zalecane?

Głównym powodem, dla którego nie należy go używać, <br>jest to, że nie jest to znacznik semantyczny i nie zawiera treści. Można tego uniknąć, np.

<p>some<br>text<p>

można oznaczyć bez <br>jako

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

Jeśli używasz <br>innych celów, takich jak górne odstępy itp., Można to osiągnąć za pomocą marginwłaściwości CSS .

Aamir Shahzad
źródło
1
Zwróć uwagę, że użycie <p> doda ~ 16 pikseli marginesu na górze i na dole. Ustaw każdy z marginesów znacznika <p> na 0 pikseli, aby uniknąć odstępów między wierszami przy użyciu większej wysokości niż powinna.
Satbir Kira