Apakah terkadang buruk menggunakan <BR />?


157

Apakah kadang-kadang buruk menggunakan <BR/>tag?

Saya bertanya karena beberapa saran pertama yang diberikan tim pengembangan saya kepada saya adalah ini: Jangan gunakan <BR/>; alih-alih, gunakan gaya. Tapi kenapa? Apakah ada hasil negatif saat menggunakan <BR/>tag?


10
Cara terbaik untuk menemukan jawaban terbaik adalah pergi ke tim dev Anda dan tanyakan kepada mereka MENGAPA?
azamsharp

48
Apakah tiba-tiba hal yang salah dilakukan untuk mencoba mendapatkan jawaban dari StackOverflow daripada anggota tim?
Nosredna

7
Tidak, itu hanya seseorang yang memberinya jawaban subyektif dan dia meminta kami untuk menebak alasan di baliknya ... Pergi dan tanyakan pada orang yang memberi Anda jawaban subyektif, khususnya jika mereka ada di dekatnya (dalam tim pengembangan yang sama)
Gabriel Magana

8
Biasanya "saran pertama" datang ketika karyawan baru. Karyawan baru tidak selalu merasa ingin bertanya "mengapa?" Jelas, ada saat-saat ketika yang terbaik untuk bertanya mengapa, tapi saya pikir Burak Ozdogan mungkin memahami "mengapa" setelah membaca pertanyaan-pertanyaan ini. Atau setidaknya mengerti apa yang komunitas HTML pada hal besar tentang subjek cukup baik untuk membahasnya. Saya akan mengatakan dia membuat langkah yang tepat datang ke sini untuk bertanya.
Nosredna

5
Saya mengerti saran Anda dan Anda semua benar. Tetapi masalahnya adalah ketika Anda memasuki tim baru, begitu banyak input yang Anda dapatkan dalam waktu singkat. Dan beberapa dari mereka hanya disebutkan; seperti detail yang diberikan dalam tanda kurung. Saya ingin bertanya di sini karena dua alasan: Untuk mendapatkan jawaban dan melihat pendapat yang berbeda bagaimana mendekatinya. terima kasih kawan!
pencilCake

Jawaban:


173

Alasan utama untuk tidak menggunakan <br>adalah bahwa itu bukan semantik . Jika Anda ingin dua item dalam blok visual yang berbeda, Anda mungkin menginginkannya dalam blok logis yang berbeda.

Dalam kebanyakan kasus ini berarti hanya menggunakan elemen yang berbeda, misalnya <p>Stuff</p><p>Other stuff</p>, dan kemudian menggunakan CSS untuk menempatkan blok dengan benar.

Ada kasus di mana <br>semantik berlaku, yaitu kasus di mana garis putus adalah bagian dari data yang Anda kirim. Ini hanya sebatas 2 kasus penggunaan - puisi dan alamat surat.


38
Secara pribadi, saya lebih suka menggunakan <pre/>puisi. Dengan cara ini, Anda secara eksplisit menentukan bahwa maksudnya adalah mempertahankan komposisi asli, termasuk kemungkinan lekukan.
Michał Górny

6
@ MichałGórny memunculkan poin yang bagus - <br>sepertinya hanya sesuai jika semua ketentuan berikut ini berlaku: 1. Baris baru bermakna secara semantik, 2. Lekukan tidak bermakna secara semantik (jika tidak Anda harus menggunakan <pre>, 3. Tidak ada yang semantik lain sesuai) tag, seperti paragraf atau tag header. Alamat surat-surat memenuhi ketiga kondisi ini, dan begitu juga lirik lagu. Puisi bisa masuk akal melanggar kondisi 'lekukan tidak berarti', dan mungkin lebih baik ditempatkan di <pre>.
Mark Amery

2
Bagaimana dengan menggunakan tanda <br />masuk email, seperti: <footer>Sincerely,<br />StrexCorp</footer> Opini?
JHS

109

Saya pikir tim pengembangan Anda merujuk <br />di tempat jarak margin. Untuk membuat ruang kosong di antara elemen, gunakan gaya padding / margin melalui CSS.

Penggunaan salah <br />:

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

Baik digunakan <br />:

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

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

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

4
Anda tidak bisa hanya menghapus Situs dan menambahkan CSS, karena jika Anda menghapus Situs Anda tidak ada yang perlu ditata. Ini tidak sangat membantu untuk mengatakan "menghapus jeda baris Anda" tanpa membantu (secara harfiah) mengisi kekosongan
Gareth

7
Anda benar, iamkoa, tetapi ini tidak menjelaskan mengapa . Karena itu tidak menjawab pertanyaan. 24 upvotes tampaknya agak banyak.
Lightness Races di Orbit

@iamkoa Anda tidak menjelaskan alasannya .
Fabian Picone

Saya pikir pilihan kedua lebih baik karena lebih bersih dan lebih sederhana. Saya pikir tidak perlu menggunakan br
simon

26

Secara umum, <br/>merupakan indikasi HTML semantik yang buruk. Kasus yang paling umum digunakan <br/>untuk menyatakan pemisahan paragraf, yang ada banyak cara yang lebih baik untuk melakukannya secara semantik. Lihat Tempat Tidur dan BReakfast .

Ada saat-saat di mana itu adalah tanda yang tepat untuk digunakan, tetapi cukup sering disalahgunakan sehingga orang mengadopsi mentalitas "jangan gunakan" untuk memaksa pemikiran semantik yang lebih baik.


13

Apa yang dimaksud oleh tim Anda mungkin tidak menggunakan Situs untuk membagi antara paragraf.

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

adalah cara yang lebih baik untuk melakukan itu, karena Anda kemudian dapat dengan mudah menyesuaikan spasi antara paragraf melalui CSS. Selain itu, saya tidak bisa memikirkan apa pun yang berbicara tentang garis putus seperti itu.


9

Konsep yang sama berlaku untuk mengapa kita tidak menggunakan tabel untuk tata letak - gunakan tabel untuk tabel dan CSS untuk tata letak.

Gunakan <br/>untuk memecah baris dalam blok teks dan CSS jika Anda ingin memengaruhi tata letak.


4

Menentukan tata letak secara langsung membuat sulit mengadaptasi situs untuk berbagai ukuran halaman atau font misalnya.


2

Saya biasanya akan selalu mengatur margin dan padding yang tepat pada elemen menggunakan CSS - itu jauh lebih berantakan daripada banyak <br />s di semua tempat selain lebih semantik benar.

Mungkin satu-satunya waktu saya akan menggunakan <br />dalam preferensi untuk margin dan padding yang ditetapkan oleh CSS, bahkan jika itu tidak benar secara teknis benar, adalah jika itu adalah insiden terisolasi di mana sedikit lebih banyak ruang diperlukan. Jika saya mendapatkan stylesheet yang cukup besar dan sepertinya tidak ada gunanya menyiapkan gaya tambahan hanya untuk satu kejadian, saya dapat menggunakan <br />sebagai satu kali.

Seperti kebanyakan hal, <br />itu bukan hal yang buruk asalkan mereka digunakan dengan benar.


1

Saya mencoba menulis markup dengan cara yang mudah dibaca dengan CSS dinonaktifkan. Jika Anda hanya menggunakan BRs untuk menambahkan spasi, lebih baik menggunakan margin dan padding.


1

<br />harus digunakan hanya untuk jeda baris, dan tidak untuk menerapkan gaya ke halaman. Misalnya, jika Anda membutuhkan ruang ekstra di antara paragraf, beri mereka kelas dan terapkan bantalan ekstra untuk paragraf. Jangan menyebar paragraf Anda dengan<br /><br ><br />


1

Mereka harus digunakan untuk mewakili baris baru. Tidak ada lagi. Tidak mengisi ruang seperti di situs geocities rata-rata. Namun hanya ada satu kasus di mana mereka mungkin berguna untuk tujuan lain selain meletakkan baris baru: untuk menghapus float.

<br style="clear: both;">

1
Meskipun digunakan, metode ini tidak valid XHTML.
iamkoa

2
Anda sering dapat menyiasati "peretasan" ini dengan menggunakan overflow:autoelemen yang mengandungnya.
mpen

2
@iamkoa: Saya tidak menggunakan XHTML. HTML adalah HTML, bukan XML.
BalusC

1

Jangan gunakan tiga atau lebih berturut-turut <br>, itu adalah sinyal yang Anda gunakan untuk tujuan gaya dan tidak, Anda tidak harus.

Beberapa orang akan mengatakan satu <br>sudah cukup dan bukan dua yang harus Anda gunakan <p></p>, tetapi ada situasi (misalnya skenario) di mana Anda ingin memperkenalkan jeda yang lebih lama tanpa menyiratkan perubahan topik atau periode baru dimulai, seperti paragraf biasanya.


0

Mereka baik-baik saja, jika digunakan dengan tepat. Misalnya, Anda tidak boleh menggunakannya sebagai pengganti <p>tag atau untuk membuat spasi antar elemen. Anda mungkin melakukan sesuatu yang salah jika Anda memiliki dua berturut-turut.


0

Jika kamu melakukan ini: <BR/> <BR/>

Anda akan mendapatkan tata letak yang berbeda pada browser yang berbeda.

Deeper:
Jika Anda gunakan <BR/>hanya untuk jeda baris - ok.
Jika Anda gunakan <BR/>sebagai pengatur garis - tidak ok.


0

Berikut ini contoh bagaimana <br>dapat secara negatif memengaruhi penataan (jalankan cuplikan untuk visual)

(perhatikan tombol yang tidak selaras dan ruang aneh di sebelah kanan):

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>


-2

Dalam HTML (hingga HTML 4): gunakan <br>
Dalam HTML 5: <br> lebih disukai, tetapi <br/>dan <br />juga dapat diterima
Dalam XHTML: <br /> lebih disukai. Bisa juga menggunakan <br/>atau<br></br>

Jadi penggunaan <br>tag adalah HTML yang benar-benar valid. Tetapi penggunaan <br>tidak dianjurkan?

Alasan utama mengapa tidak digunakan <br>adalah karena ini bukan tag semantik & tidak memiliki konten di dalamnya. Penggunaannya bisa dihindari seperti,

<p>some<br>text<p>

dapat ditandai tanpa <br>sebagai

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

Jika Anda menggunakan <br>tujuan lain seperti top-spacing dll. Yang dapat dicapai melalui marginproperti CSS .


1
Perhatikan bahwa menggunakan <p> akan menambah ~ 16px margin ke atas dan bawah. Setel setiap margin tag <p> ke 0px untuk menghindari penspasian garis menggunakan ketinggian lebih dari yang seharusnya.
Satbir Kira
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.