Thực hiện thẻ xuống dòng trong HTML là một lệnh rất thường dùng trong ngôn ngữ lập trình HTML rất đơn giản và thuận tiện khi muôn sử dụng ký tự xuống dòng trong HTML. Trong bài viết này, atpweb.vn sẽ viết bài viết Hướng dẫn thực hiện thẻ xuống dòng HTML mới nhất 2022.
Hướng dẫn thực hiện thẻ xuống dòng HTML mới nhất 2022
Thẻ <br>
Thẻ <br> dùng để chèn một ngắt xuống dòng
Thẻ <br> thường được đặt bên trong đoạn văn để ngắt văn bản xuống dòng, hoặc đặt giữa hai phần tử để tạo khoảng cách giữa hai phần tử.
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<p>LẬP<br>TRÌNH<br>WEB</p>
<p>Tài liệu hướng dẫn học HTML</p>
<br><br><br><br>
<p>Tài liệu hướng dẫn học CSS</p>
</body>
</html>
Lưu ý:
Thẻ <br> là thẻ đơn, nên nó không có thẻ đóng.
Trong XHTML, để dùng thẻ <br> thì ta phải thêm dấu gạch chéo thành <br />

Thẻ đoạn văn <p>
Trong HTML thẻ <p> xác định một đoạn văn bản.
Ví dụ
<p>Đây là một đoạn văn bản</p>
<p>Đây là một đoạn văn bản khác</p>
Các trình duyệt sẽ tự động thêm vào một dòng trắng trước và sau một đoạn văn bản.
Hiển thị HTML
Bạn có thể không thể biết chắc chắn cách HTML sẽ được hiển thị như thế nào.
Kích thước màn hình lớn hoặc nhỏ và thay đổi kích thước cửa sổ sẽ tạo ra các kết quả khác nhau.
Với HTML, bạn không thể thay đổi đầu ra bằng cách thêm nhiều khoảng trắng hoặc thêm dòng trống vào mã HTML của bạn.
Trình duyệt sẽ xóa các khoảng trắng hoặc các dòng trống khi trang web hiển thị.
Những khoảng trắng và các dấu xuống dòng nhiều hơn một thì trình duyệt web chỉ giữ lại một khoảng trống.
Ví dụ
<p>
Đây là đoạn văn
chứa rất nhiều dòng
trong mã nguồn,
nhưng trình duyêt
bỏ qua nó.
</p>
<p>
Đây là đoạn văn
chứa nhiều khoảng trắng
trong mã nguồn,
nhưng trình duyệt
bỏ qua nó.
</p>
Kết quả
Đây là đoạn văn chứa rất nhiều dòng trong mã nguồn, nhưng trình duyêt bỏ qua nó. Đây là đoạn văn chứa nhiều khoảng trắng trong mã nguồn, nhưng trình duyệt bỏ qua nó.

Đừng quên thẻ đóng
Hầu hết các trình duyệt sẽ hiển thị một cách chính xác nội dung trong HTML ngay cả khi nếu bạn quên thẻ đóng.
Ví dụ
<p>Đây là một đoạn văn bản
<p>Đây là một đoạn văn bản khác
Ví dụ trên sẽ làm việc trong hầu hết các trình duyệt, nhưng không nên quá tin tưởng vào điều này.
Quên thẻ kết thúc có thể tạo ra một chương trình có kết quả không mong muốn hoặc bị lỗi.
Các phiên bản chặt chẽ hơn HTML, như XHTML, không cho phép bạn bỏ qua các thẻ kết thúc.
Thẻ xuống dòng <br>
Trong HTML thẻ <br> định nghĩa một dấu xuống dòng.
Sử dung thẻ <br> Nếu bạn muốn xuống dòng hoặc tạo một dòng mới mà không cần bắt đầu một đoạn mới.
Ví dụ
<p>Đây là<br>một đoạn<br>văn với dấu ngắt dòng</p>
Thẻ <br>là thẻ rất quan trọng của HTML. Nó có thể không cần thẻ kết thúc.
Sự cố của các bài thơ
Ví dụ
<p>Bài thơ sẽ hiển thị như một dòng:</p>
<p>
Đừng dại mà yêu bọn IT.
Chúng nó tài năng, mỗi tội kỳ.
Bạn gái chúng đòi đi đăng ký.
“Bẻ khóa được rồi đăng ký chi?”.
</p>
Kết quả
Bài thơ sẽ hiển thị như một dòng:Đừng dại mà yêu bọn IT. Chúng nó tài năng, mỗi tội kỳ. Bạn gái chúng đòi đi đăng ký. “Bẻ khóa được rồi đăng ký chi?”.

Thẻ <pre>
Thẻ <pre> giữ nguyên định dạng như khi chúng ta soạn thảo văn bản.
Phần văn bản nằm trong thẻ<pre> sẽ hiển thị với font chữ cố định về chiều rộng (thường là font Courrier) và nó giữ nguyên các khoảng trắng và các dấu xuống dòng:
Ví dụ
<pre>
Đừng dại mà yêu bọn IT.
Chúng nó tài năng, mỗi tội kỳ.
Bạn gái chúng đòi đi đăng ký.
“Bẻ khóa được rồi đăng ký chi?”.
</pre>
Kết quả
Đừng dại mà yêu bọn IT.
Chúng nó tài năng, mỗi tội kỳ.
Bạn gái chúng đòi đi đăng ký.
“Bẻ khóa được rồi đăng ký chi?”.

(Nguồn: Tổng hợp)
Lời tổng kết
Qua bài viết trên của ATP Web đã cung cấp đến các bạn đọc một số thông tin về hữu ích. Hy vọng những thông tin trên của bài viết sẽ hữu ích với các bạn đọc. Cảm ơn các bạn đã dành nhiều thời gian để xem qua bài viết này nhé.
ATPWeb – XÂY DỰNG NGÔI NHÀ ONLINE
- Hotline: 0707 6666 56
- Fanpage: ATP Web
- Gmail: [email protected]
- Website: https://atpweb.vn/