ในบางครั้งการใช้ <BR /> ไม่ดีหรือไม่

บางครั้งมีการใช้<BR/>แท็กหรือไม่

ฉันถามเพราะคำแนะนำแรก ๆ ที่ทีมพัฒนาของฉันให้มาคือ: อย่าใช้<BR/>; ใช้สไตล์แทน แต่ทำไม มีผลลัพธ์เชิงลบเมื่อใช้<BR/>แท็กหรือไม่

เหตุผลหลักที่ไม่ได้ใช้<br>ก็คือว่ามันไม่ได้เป็นความหมาย หากคุณต้องการสองไอเท็มในบล็อกภาพที่แตกต่างกันคุณอาจต้องการไอเท็มเหล่านั้นในบล็อกเชิงตรรกะที่แตกต่างกัน

ในกรณีส่วนใหญ่นี่หมายถึงเพียงแค่ใช้องค์ประกอบต่าง ๆ เช่น<p>Stuff</p><p>Other stuff</p>จากนั้นใช้ CSS เพื่อเว้นพื้นที่บล็อกอย่างเหมาะสม

มีหลายกรณีที่<br>ความถูกต้องทางความหมายคือกรณีที่ตัวแบ่งบรรทัดเป็นส่วนหนึ่งของข้อมูลที่คุณส่ง นี่เป็นเพียงการ จำกัด การใช้งาน 2 กรณีเท่านั้น - บทกวีและที่อยู่ทางไปรษณีย์

ฉันคิดว่าทีมพัฒนาของคุณกำลังอ้างถึง<br />แทนที่ระยะห่างของระยะขอบ หากต้องการเว้นช่องว่างระหว่างองค์ประกอบให้ใช้ช่องว่างภายใน / การกำหนดสไตล์ผ่าน CSS

การใช้ไม่ดี<br />:

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

ใช้งานได้ดี<br />:

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

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

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

โดยทั่วไป<br/>บ่งบอกถึงความหมายของ HTML ที่ไม่ดี กรณีที่พบบ่อยที่สุดคือการใช้<br/>เพื่อประกาศการแยกย่อหน้าซึ่งมีวิธีที่ดีกว่ามากที่จะทำมันในความหมาย ดูที่พักพร้อมอาหารเช้า

มีหลายครั้งที่มันเป็นแท็กที่เหมาะสมในการใช้งาน แต่มันถูกทารุณกรรมบ่อยครั้งมากพอที่คนจะใช้ความคิดแบบ "ไม่ใช้" เพื่อบังคับใช้ความคิดเชิงความหมายที่ดีกว่า

สิ่งที่ทีมของคุณมีความหมายอาจจะไม่ใช้แยกย่อยระหว่างย่อหน้า

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

เป็นวิธีที่ดีกว่าในการทำเช่นนั้นเพราะคุณสามารถปรับช่องว่างระหว่างย่อหน้าผ่าน CSS ได้อย่างง่ายดาย นอกเหนือจากนั้นฉันไม่สามารถนึกถึงสิ่งที่กำลังพูดบรรทัดแบ่งเป็นเช่นนี้

แนวคิดเดียวกันนี้นำไปใช้กับสาเหตุที่เราไม่ใช้ตารางสำหรับโครงร่างใช้ตารางสำหรับตารางและ CSS สำหรับโครงร่าง

ใช้<br/>สำหรับการขึ้นบรรทัดใหม่ในบล็อกข้อความและ CSS หากคุณต้องการส่งผลต่อเค้าโครง

การระบุเลย์เอาต์โดยตรงทำให้การปรับไซต์เป็นเรื่องยากสำหรับขนาดหน้าหรือแบบอักษรที่แตกต่างกัน

โดยทั่วไปฉันมักจะตั้งค่าระยะขอบที่เหมาะสมและ padding บนองค์ประกอบโดยใช้ CSS - มันยุ่งน้อยกว่าโหลดของ<br />s ทั่วทุกสถานที่นอกเหนือจากการถูกต้องความหมายมากขึ้น

อาจเป็นครั้งเดียวที่ฉันจะใช้การ<br />ตั้งค่าตามระยะขอบและแพ็ดดิ้งที่กำหนดโดย CSS แม้ว่ามันจะไม่ถูกต้องทางเทคนิคอย่างเคร่งครัดคือถ้ามันเป็นเหตุการณ์ที่แยกได้ที่ต้องการพื้นที่เพิ่มขึ้นเล็กน้อย หากฉันมีสไตล์ชีทขนาดใหญ่และดูเหมือนว่ามันไม่คุ้มค่าที่จะสร้างสไตล์เพิ่มเติมสำหรับเหตุการณ์นั้นฉันอาจใช้<br />a one-off

เช่นเดียวกับสิ่งอื่น ๆ ส่วนใหญ่<br />ไม่ใช่เรื่องเลวร้ายหากใช้อย่างถูกต้อง

ฉันพยายามเขียนมาร์กอัปในลักษณะที่สามารถอ่านได้ง่ายเมื่อปิดการใช้งาน CSS หากคุณเพิ่งใช้ BR เพื่อเพิ่มระยะห่างควรใช้ระยะห่างและช่องว่างภายใน

<br />ควรใช้สำหรับการขึ้นบรรทัดใหม่เท่านั้นและไม่ควรใช้สไตล์กับเพจ ตัวอย่างเช่นถ้าคุณต้องการพื้นที่พิเศษระหว่างย่อหน้าให้ชั้นเรียนกับพวกเขาและใช้ช่องว่างภายในเพิ่มเติมกับย่อหน้า อย่ากระจายย่อหน้าของคุณด้วย<br /><br ><br />

พวกเขาจะถูกใช้เพื่อแสดงบรรทัดใหม่ ไม่มีอะไรเพิ่มเติม ไม่ต้องเติมเต็มพื้นที่เช่นเดียวกับที่เว็บไซต์ทางภูมิศาสตร์โดยเฉลี่ย อย่างไรก็ตามมีเพียงกรณีเดียวที่พวกมันอาจจะมีประโยชน์สำหรับวัตถุประสงค์อื่นนอกเหนือจากการขึ้นบรรทัดใหม่: เพื่อล้างลอย

<br style="clear: both;">

อย่าใช้อย่างต่อเนื่องสามครั้งขึ้น<br>ไปนั่นเป็นสัญญาณที่คุณใช้เพื่อจุดประสงค์และไม่ควรทำ

บางคนบอกว่าซิงเกิล<br>นั้นเพียงพอและแทนที่จะใช้สอง<p></p>อัน แต่มีสถานการณ์ (เช่นบทภาพยนตร์) ที่คุณต้องการแนะนำการหยุดชั่วคราวที่ยาวขึ้นโดยไม่แสดงถึงการเปลี่ยนหัวข้อหรือจุดเริ่มต้นใหม่เช่นย่อหน้าปกติ

พวกมันใช้ได้ถ้าใช้อย่างเหมาะสม ตัวอย่างเช่นคุณไม่ควรใช้แทน<p>แท็กหรือสร้างระยะห่างระหว่างองค์ประกอบ คุณอาจทำอะไรผิดถ้าคุณมีสองคนติดกัน

หากคุณทำสิ่งนี้: <BR/> <BR/>

คุณจะได้รับเค้าโครงที่แตกต่างในเบราว์เซอร์ที่แตกต่างกัน

Deeper:
ถ้าคุณใช้<BR/>เพื่อแบ่งบรรทัด - ok
หากคุณใช้<BR/>เป็นตัวเว้นวรรคบรรทัด - ไม่เป็นไร

นี่คือตัวอย่างว่า<br>จะมีผลเสียต่อการจัดแต่งทรงผมอย่างไร (เรียกใช้ตัวอย่างสำหรับภาพ)

(ให้สังเกตปุ่มที่ไม่ถูกต้องและมีช่องว่างทางด้านขวา):

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>

ในรูปแบบ HTML (ถึง HTML 4):การใช้งาน<br>
ในรูปแบบ HTML 5: <br>เป็นที่ต้องการ แต่<br/>และ<br />ยังเป็นที่ยอมรับ
ใน XHTML: <br />เป็นที่ต้องการ ยังสามารถใช้<br/>หรือ<br></br>

ดังนั้นการใช้<br>แท็กจึงเป็น HTML ที่ถูกต้องสมบูรณ์ แต่<br>ไม่แนะนำให้ใช้

สาเหตุหลักที่ทำไมไม่ใช้<br>เพราะไม่ใช่แท็กความหมายและไม่มีเนื้อหาอยู่ภายใน การใช้งานสามารถหลีกเลี่ยงได้เช่น

<p>some<br>text<p>

สามารถทำเครื่องหมายโดยไม่ต้อง<br>เป็น

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

หากคุณใช้<br>เพื่อวัตถุประสงค์อื่นเช่นระยะห่างสูงสุดเป็นต้นซึ่งสามารถทำได้ผ่านmarginคุณสมบัติCSS