HTML/CSS | Thẻ br trong HTML

Học HTML, CSS từ Zero Tới Hero

Giới thiệu thẻ br

Thẻ ngắt dòng (Line Break element) trong HTML là <br />, được sử dụng để tạo ra một dòng mới (ngắt dòng) trong cùng một đoạn văn. Đây là một thẻ tự đóng.

Trong thực tế, thẻ <br> rất hữu ích để tạo điểm ngắt dòng cho một bài thơ hoặc một địa chỉ.

Ví dụ, một bài thơ:

Trong HTML, nhiều khoảng trắng hoặc dấu ngắt dòng chỉ được coi là một khoảng trắng (một dấu cách). Vì vậy, nếu bạn sử dụng dấu ngắt dòng trong code thì kết quả có thể không như ý.

Ví dụ không sử dụng <br>:

Có thể bạn sẽ nghĩ, mỗi thẻ <p> luôn bắt đầu trên một dòng mới. Vậy tại sao không sử dụng mỗi dòng bằng một thẻ <p>? Chúng ta sẽ tìm hiểu điều này trong phần tiếp theo nhé.

Cách sử dụng thẻ br

Hãy xem xét hai đoạn mã HTML qua hai ví dụ dưới đây.

Ví dụ, ngắt dòng bằng thẻ <br>:

Ví dụ, ngắt dòng bằng việc sử dụng thẻ <p>:

Kết quả hiển thị trên trình duyệt của hai đoạn mã trên gần như giống hệt nhau. Tuy nhiên, chúng khác nhau về ngữ nghĩa sử dụng và khả năng truy cập (Web accessibility).

Tuy hiển thị giống nhau. Nhưng theo bạn, đâu mới là cách sử dụng đúng đắn?

Câu trả lời là:

Thẻ <br> không nên được sử dụng để phân tách hai đoạn văn hoặc hai nội dung khác nhau để đảm bảo tính ngữ nghĩa. Trường hợp duy nhất bạn nên sử dụng thẻ <br> đó là để tạo dòng mới trong cùng một đoạn văn.

Tóm tắt

• Thẻ ngắt dòng (Line Break element) trong HTML là <br />, được sử dụng để tạo ra một dòng mới trong một đoạn văn. Đây là một thẻ tự đóng.
• Trong thực tế, thẻ <br> rất hữu ích để tạo điểm ngắt dòng cho một bài thơ hoặc một địa chỉ.
• Trong HTML, nhiều khoảng trắng hoặc dấu ngắt dòng chỉ được coi là một khoảng trắng (một dấu cách).
• Thẻ <br> không nên được sử dụng để phân tách hai đoạn văn hoặc hai nội dung khác nhau, để đảm bảo tính ngữ nghĩa. Trường hợp duy nhất bạn nên sử dụng thẻ <br> đó là để tạo dòng mới trong cùng một đoạn văn.