Cách sử dụng thẻ <br> để tạo ngắt dòng trong HTML

Trong việc xây dựng và thiết kế trang web, việc trình bày nội dung một cách rõ ràng, dễ đọc là vô cùng quan trọng. Một trong những cách hiệu quả để cải thiện trải nghiệm người dùng trên trang web là sử dụng ngắt dòng. Thẻ <br> trong HTML là công cụ đơn giản nhưng cực kỳ hiệu quả để thực hiện điều này.

Khái niệm cơ bản về thẻ <br>

Trong HTML, thẻ <br> là viết tắt của "break" (ngắt). Nó được sử dụng để tạo ra một ngắt dòng, giúp đưa phần tiếp theo của nội dung xuống dòng mới. Thẻ này không phải là thẻ đóng mở như nhiều thẻ HTML khác, vì vậy bạn chỉ cần viết <br> tại vị trí mà bạn muốn tạo ngắt dòng.

Cách sử dụng thẻ <br>

1. Ngắt dòng đơn giản:

   Khi bạn muốn xuống dòng trong một đoạn văn bản, bạn chỉ cần chèn thẻ <br> tại vị trí mong muốn. Ví dụ:

   <p>Đây là dòng đầu tiên.<br>Đây là dòng tiếp theo.</p>
   

   Kết quả sẽ hiển thị như sau:

   Đây là dòng đầu tiên.
   Đây là dòng tiếp theo.
   

2. Ngắt dòng nhiều lần:

   Để tạo khoảng cách lớn hơn giữa các đoạn văn bản, bạn có thể sử dụng thẻ <br> nhiều lần liên tiếp:

   <p>Đây là dòng đầu tiên.<br><br>Đây là dòng tiếp theo với khoảng cách lớn hơn.</p>
   

   Kết quả sẽ hiển thị như sau:

   Đây là dòng đầu tiên.
   
   Đây là dòng tiếp theo với khoảng cách lớn hơn.
   

Các trường hợp sử dụng thẻ <br>

• Trong thơ hoặc lời bài hát: Những dạng văn bản này thường yêu cầu xuống dòng theo một cấu trúc cụ thể.

  <p>Trăm năm trong cõi người ta<br>Chữ tài chữ mệnh khéo là ghét nhau.</p>
  

• Trong biểu mẫu (form): Để tạo khoảng cách rõ ràng giữa các trường dữ liệu, bạn có thể sử dụng thẻ <br>.

  <form>
    Nhập tên:<br>
    <input type="text" name="name"><br><br>
    Nhập email:<br>
    <input type="email" name="email"><br><br>
    <input type="submit" value="Gửi">
  </form>
  

• Trong các đoạn mã kỹ thuật: Khi mô tả mã nguồn hoặc kết quả, việc xuống dòng sẽ giúp nội dung dễ đọc hơn.

  <p>int main() {<br>&nbsp;&nbsp;&nbsp;&nbsp;printf("Hello, World!");<br>}</p>
  

Thận trọng khi sử dụng thẻ <br>

Mặc dù thẻ <br> rất hữu ích, tuy nhiên việc lạm dụng nó có thể làm cho mã nguồn của bạn trở nên khó theo dõi và không theo quy chuẩn. Đối với các khối văn bản lớn hoặc cần nhiều kiểu dáng phức tạp hơn, bạn nên cân nhắc sử dụng CSS để kiểm soát khoảng cách và bố cục.

.paragraph-spacing {
    margin-bottom: 20px;
}

<p class="paragraph-spacing">Đây là đoạn văn bản đầu tiên.</p>
<p class="paragraph-spacing">Đây là đoạn văn bản thứ hai với khoảng cách lớp CSS áp dụng.</p>

Kết luận

Thẻ <br> là một công cụ mạnh mẽ và đơn giản để cải thiện tính đọc của nội dung trên trang web. Khi được sử dụng một cách hợp lý, thẻ này giúp tổ chức nội dung một cách rõ ràng và hiệu quả. Tuy nhiên, hãy luôn nhớ rằng đối với các bố cục phức tạp, bạn nên dựa vào CSS để duy trì mã nguồn gọn gàng và dễ bảo trì.