Trong HTML, một đoạn văn luôn bắt đầu trên một dòng mới, thế nhưng để tạo được dòng mới cho văn bản trong một đoạn văn thì bạn sẽ cần tạo ngắt dòng trong HTML. Vậy làm thế nào để xuống dòng trong HTML?
Đọc bài viết dưới đây để được tìm hiểu rõ hơn về:
- Tại sao nên sử dụng xuống dòng trong HTML.
- Cách tạo ngắt dòng trong HTML một cách đơn giản và nhanh chóng.
Xuống dòng trong HTML là gì?
Xuống dòng trong HTML là vị trí mà tại đó một dòng kết thúc theo chiều ngang và dòng tiếp theo sẽ bắt đầu trên một dòng mới. Thông thường, để tạo một đoạn ngắt trong văn bản, bạn có thể sử dụng thẻ <p> ở cuối mỗi dòng như sau:
<p>ITviec Blog</p> <p>Trang thông tin phát triển sự nghiệp IT</p> <p>Tổng hợp những bài viết mới nhất về IT</p>
Kết quả hiển thị:
|
ITviec Blog Trang thông tin phát triển sự nghiệp IT Tổng hợp những bài viết mới nhất về IT |
Tuy nhiên, phương pháp này không đem lại hiệu quả cao bởi vì bạn đã tạo thành ba đoạn văn. Trong trường hợp trình duyệt web hiển thị nội dung này sẽ trở thành ba đoạn văn nhỏ thay vì một câu được ngắt dòng. Điều này sẽ gây ảnh hưởng đến khả năng truy cập web.
Chính vì vậy, bạn nên ưu tiên sử dụng những phần tử có công dụng phù hợp để tạo ngắt dòng cho trang web.
Xem thêm: Giải đáp “tất tần tật” những điều cần biết về HTML
Cách xuống dòng trong HTML đơn giản
Sử dụng thẻ <br>
Trong HTML, thẻ <br> thường được sử dụng để tạo ngắt dòng trong văn bản, bạn có thể thêm nó vào bất cứ nơi nào bạn muốn kết thúc và tạo một dòng mới. Thẻ <br> có thể được sử dụng trong các nội dung về bài thơ, lời bài hát, địa chỉ hoặc nội dung cần xuống dòng phù hợp.
Thẻ <br> là một phần tử không có thẻ đóng, bạn có thể sử dụng thẻ này cho các dạng phần tử nội tuyến khác như liên kết hoặc nội dung văn bản. Cụ thể như sau:
<p> ITviec Blog <br> Ý tưởng phát triển <br> sự nghiệp IT </p> <div> <a href="https://itviec.com/blog/">ITviec</a> <br> <a href="https://itviec.com/blog/">Blog</a> </div>
Kết quả hiển thị:
|
ITviec Blog Ý tưởng phát triển sự nghiệp IT
|
Đối với phần tử nội tuyến <a>, bạn sẽ dùng thẻ <br> vào giữa hai đường link để ngắt liên kết thành hai dòng khác nhau. Tương tự với nội dung văn bản thông thường, bạn cũng chèn thẻ <br> vào vị trí muốn ngắt dòng, trang web sẽ hiển thị nội dung phù hợp với những gì bạn đã lập trình.
Một ví dụ khác thể hiện sự phổ biến của <br> để hiển thị các bài thơ hoặc lời bài hát. Bạn sẽ gói gọn các khổ thơ trong thẻ <p> và đặt thẻ <br> vào những vị trí muốn ngắt dòng trong mỗi khổ thơ, văn bản sau thẻ <br> sẽ được bắt đầu ở dòng tiếp theo. Cụ thể như sau:
<h2>Chiến thắng Điện Biên</h2> <p>Giải phóng Điện Biên Bộ đội ta<br> tiến quân trở về giữa mùa này hoa nở<br> miền Tây Bắc tưng bừng vui<br> bản mường xưa nương lúa mới trồng<br> Kìa đàn em bé giữa đồng nắm tay xoè hoa</p> <p>Dọc đường chiến thắng ta tiến về<br> đoàn dân công tiền tuyến<br> vẫy chào pháo binh vượt qua.<br> Súng đại bác quấn lá ngụy trang<br> từng đàn bươm bướm trắng rỡn lá ngụy trang.</p> <p>Xiết bao sướng vui từ ngày lên Tây Bắc<br> Đồng bào nao nức mong đón ta trở về<br> Giờ chiến thắng ta đã về<br> Vui mừng đón chúng ta tiến về<br> núi sông bừng lên đất nước ta sáng ngời<br> cánh đồng Điện Biên cờ<br> chiến thắng tưng bừng trên trời.</p> <p><em>Đỗ Nhuận</em></p>
Kết quả hiển thị:
Sử dụng Pseudo-Elements (Phần tử giả)
Bên cạnh thẻ <br> thì bạn có thể xuống dòng trong HTML bằng cách sử dụng pseudo-elements. Pseudo-elements hay còn gọi là phần tử giả được sử dụng để tạo kiểu cho một phần cụ thể của phần tử và ::after được dùng để tạo xuống dòng cho một phần tử HTML.
<!DOCTYPE html>
<html lang="vn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS ::after With \a</title>
</head>
<style>
span {
padding: 1px 8px;
}
span::after {
content: '\a';
white-space: pre;
}
::
</style>
<body>
<div>
<span>Chuyên môn IT</span>
<span>Sự nghiệp IT</span>
<span>Việc làm IT</span>
<span>Chuyện IT</span>
</div>
</body>
</html>
Ở đoạn mã trên, thuộc tính ::after được sử dụng trên mỗi phần tử nội tuyến, biểu thị bằng <span> để thêm dấu xuống dòng (\a) sau dòng văn bản. ::after trong trường hợp này có content property (nội dung) và white space property (khoảng trắng) để sử dụng.
- Content property mô tả nội dung bạn muốn đưa vào khoảng trắng;
- Trong khi white space kiểm soát cách xử lý khoảng trắng trong nội dung khi được dùng với giá trị pre để giữ nguyên khoảng trắng.
Bạn có thể sử dụng phần tử cấp khối như <p> hoặc <div> để tạo ngắt dòng trong văn bản, tuy nhiên đối với một số trường hợp thì bạn nên cân nhắc sử dụng phần tử khác (<br> hoặc Pseudo-Elements) có chức năng phù hợp. Điều này sẽ giúp cải thiện tốc độ tải trang cũng như nâng cao tính thẩm mỹ của trang web hiệu quả.
Xem thêm Việc làm Lập trình viên Front-End tại TP. Hồ Chí Minh
Xem thêm Việc làm Lập trình viên Front-End tại Hà Nội
Các câu hỏi về xuống dòng trong HTML thường gặp
Có nên sử dụng thẻ <br> thường xuyên không?
Phần tử <br> được sử dụng để chèn ngắt dòng hoặc một dòng trống trong đoạn văn bản. Mặc dù trông có vẻ thuận tiện nhưng bạn không nên sử dụng thẻ ngắt dòng này thường xuyên, bởi vì thẻ <br> không có khả năng thích ứng tốt với kích thước màn hình hoặc các cửa sổ trình duyệt khác nhau.
Điều này dẫn đến bố cục trang web không rõ ràng, gây ảnh hưởng đến tính thẩm mỹ cũng như khả năng truy cập của người dùng.
Bạn có thể sử dụng một số yếu tố khác để thay thế như:
- Margin và Padding: Sử dụng các thuộc tính của CSS để tạo xuống dòng sẽ giúp đảm bảo tính nhất quán trên các thiết bị khác nhau.
- Các phần tử cấp khối (Block-level Elements): Sử dụng các thẻ như <p>, <div> hoặc <section> để phân tách các phần nội dung khác nhau, tạo ra không gian và cấu trúc theo chiều dọc giúp cải thiện bố cục trang web hiệu quả.
- CSS Flexbox và Grid: Những công cụ linh hoạt và dễ dàng kiểm soát chính xác khoảng cách cũng như vị trí của các phần tử.
Tại sao thẻ <br> không hiển thị tốt trên trang web?
Nếu phần tử ngắt dòng HTML không hoạt động thì có thể bạn đang sử dụng thành phần này không chính xác. Bạn chỉ nên sử dụng thẻ <br> trong một số trường hợp như địa chỉ, viết thơ hoặc lời bài hát, tránh lạm dụng thẻ <br> quá nhiều trong đoạn mã HTML.
Thẻ <br> không có khả năng thích ứng tốt trên một số thiết bị, trang web sẽ tự động thay đổi bố cục phù hợp với kích thước màn hình. Chính vì vậy, nó sẽ ngắt dòng văn bản khi cần thiết gây ảnh hưởng đến bố cục và tính thẩm mỹ của trang web. Do đó, bạn nên cân nhắc và sử dụng thẻ <br> vào những trường hợp hợp lý.
Tổng kết về xuống dòng trong HTML
Bài viết trên đã giải đáp và hướng dẫn về cách tạo xuống dòng trong HTML đơn giản và nhanh chóng. Hy vọng qua bài viết, bạn có thể tích lũy thêm một số tips học HTML cơ bản để trau dồi thêm kinh nghiệm cho bản thân. Đối với thị trường tuyển dụng cạnh tranh hiện nay, nắm vững về HTML sẽ giúp bạn thêm phần tự tin trên con đường thăng tiến trong công việc.
Bạn thấy bài viết hay và hữu ích? Đừng ngại Share với bạn bè và đồng nghiệp nhé.
Và nhanh tay tham khảo việc làm IT “chất” trên ITviec!