Thẻ hr trong HTML
Bùi Tấn Lực - 1517
- 29/09/2025
Chức năng của Thẻ hr trong HTML
Thẻ hr trong HTML là một thẻ ngăn cách giúp tách biệt các nhóm phần tử cho dễ nhìn, mặc định thẻ có border-width là 1 px màu xám, margin-bottom là 0.5em, margin-top là 0.5em, ngoài ra bạn có thể css lại về chiều cao, màu nền lại,... nó chỉ có thẻ mở mà không có thể đóng.
Cú pháp của Thẻ hr trong HTML
<hr>
Code Thẻ hr trong HTML
Thẻ hr mặc định trong HTML
<h1>Thẻ hr mặc định trong HTML</h1>
<p>CSS (Cascading Style Sheets) là ngôn ngữ quy định cách hiển thị của các thành phần trong HTML như font chữ, màu sắc, background, bố cục, viền,… hoạt động theo phương pháp tìm và dựa vào các vùng chọn (có thể là thẻ HTML, ID, class,...) sau đó áp dụng các thuộc tính cần thay thế lên vùng chọn đó.</p>
<hr>
<p>HTML (viết tắt của Hypertext Markup Language) là ngôn ngữ đánh dấu siêu văn bản, được sử dụng để tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng và không phải là ngôn ngữ lập trình, không thể tạo ra các chức năng "động", phân chia các đoạn văn, heading, links, blockquotes,…</p>
<hr>
<p>JavaScript (JS) là ngôn ngữ lập trình được tích hợp hoặc nhúng vào HTML để tạo ra các hành động tương tác, hiệu ứng, chức năng trên website, đó là những chức năng thực tế như slideshow, pop-up quảng cáo, tính năng autocomplete,...</p>
Css cho Thẻ hr trong HTML
<!DOCTYPE html>
<html>
<head>
<title>Css cho Thẻ hr trong HTML</title>
<style>
hr{height:2px;border-width:0;background:red}
</style>
</head>
<body>
<h1>Css cho Thẻ hr trong HTML</h1>
<p>CSS (Cascading Style Sheets) là ngôn ngữ quy định cách hiển thị của các thành phần trong HTML như font chữ, màu sắc, background, bố cục, viền,… hoạt động theo phương pháp tìm và dựa vào các vùng chọn (có thể là thẻ HTML, ID, class,...) sau đó áp dụng các thuộc tính cần thay thế lên vùng chọn đó.</p>
<hr>
<p>HTML (viết tắt của Hypertext Markup Language) là ngôn ngữ đánh dấu siêu văn bản, được sử dụng để tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng và không phải là ngôn ngữ lập trình, không thể tạo ra các chức năng "động", phân chia các đoạn văn, heading, links, blockquotes,…</p>
<hr>
<p>JavaScript (JS) là ngôn ngữ lập trình được tích hợp hoặc nhúng vào HTML để tạo ra các hành động tương tác, hiệu ứng, chức năng trên website, đó là những chức năng thực tế như slideshow, pop-up quảng cáo, tính năng autocomplete,...</p>
</body>
</html>
Những lưu ý khi sử dụng thẻ hr trong HTML
Khi nào nên dùng thẻ hr?
Thẻ hr nên được sử dụng khi bạn muốn thể hiện sự chuyển đổi rõ ràng giữa các chủ đề hoặc các nhóm nội dung trong cùng một trang. Đây là cách giúp người đọc dễ nhận biết rằng nội dung phía dưới là một phần mới nhưng vẫn thuộc cùng một tài liệu.
- Phân tách các chương hoặc mục lớn trong bài viết dài.
- Đánh dấu sự chuyển sang một chủ đề khác mà không cần tạo tiêu đề mới.
- Ngăn cách giữa phần nội dung chính và các ghi chú, thông tin bổ sung.
- Tạo điểm nghỉ giúp bài viết dễ đọc hơn khi có nhiều đoạn văn liên tiếp.
Chỉ nên sử dụng thẻ hr khi việc phân chia nội dung mang ý nghĩa về mặt ngữ nghĩa. Nếu mục đích chỉ là tạo khoảng cách hoặc làm đẹp giao diện, bạn nên sử dụng CSS thay vì thêm nhiều thẻ hr.
Khi nào không nên dùng thẻ hr?
Không phải mọi đường kẻ xuất hiện trên trang web đều cần sử dụng thẻ hr. Việc lạm dụng thẻ này có thể làm cấu trúc nội dung trở nên rời rạc và giảm tính ngữ nghĩa của tài liệu.
- Không dùng để tạo khoảng trắng giữa các đoạn văn.
- Không dùng để trang trí giao diện hoặc tạo hiệu ứng thị giác.
- Không chèn nhiều thẻ hr liên tiếp để tạo khoảng cách lớn.
- Không thay thế cho tiêu đề khi bắt đầu một phần nội dung mới.
Trong các trường hợp trên, CSS là giải pháp phù hợp hơn vì giúp kiểm soát giao diện mà không làm thay đổi ý nghĩa của tài liệu HTML.
Thẻ hr có ảnh hưởng đến SEO không?
Thẻ hr không phải là yếu tố xếp hạng trực tiếp của công cụ tìm kiếm. Tuy nhiên, khi được sử dụng đúng cách, nó góp phần tạo nên cấu trúc nội dung rõ ràng, giúp cả người đọc và công cụ tìm kiếm hiểu được sự chuyển đổi giữa các phần trong bài viết.
- Giúp nội dung được phân chia hợp lý và dễ theo dõi.
- Hỗ trợ trình thu thập dữ liệu hiểu mạch nội dung tốt hơn.
- Cải thiện trải nghiệm đọc đối với các bài viết có nội dung dài.
Mặc dù vậy, SEO vẫn phụ thuộc chủ yếu vào chất lượng nội dung, hệ thống tiêu đề, liên kết nội bộ và nhiều yếu tố khác. Vì vậy, không nên sử dụng quá nhiều thẻ hr với mong muốn cải thiện thứ hạng tìm kiếm.
Thẻ hr có ảnh hưởng đến Accessibility (trợ năng) không?
Có. Thẻ hr mang ý nghĩa ngữ nghĩa nên nhiều trình đọc màn hình sẽ thông báo cho người dùng biết rằng tài liệu đã chuyển sang một phần nội dung khác. Điều này giúp người khiếm thị hiểu cấu trúc của trang tốt hơn.
- Giúp xác định ranh giới giữa các nhóm nội dung.
- Tăng khả năng điều hướng đối với các tài liệu dài.
- Hạn chế gây nhầm lẫn nếu được đặt đúng vị trí.
Ngược lại, nếu sử dụng hr chỉ để trang trí hoặc chèn quá nhiều trong một trang, người dùng trình đọc màn hình có thể gặp trải nghiệm không tốt vì liên tục nghe thông báo về các đường phân cách không cần thiết.
Những lỗi thường gặp khi sử dụng thẻ hr
Dưới đây là những lỗi mà người mới học HTML thường gặp khi sử dụng thẻ hr.
- Sử dụng hr để tạo khoảng cách thay vì dùng CSS.
- Đặt nhiều thẻ hr liên tiếp nhằm tạo hiệu ứng trình bày.
- Chèn hr giữa các đoạn văn không có sự thay đổi về chủ đề.
- Thay thế tiêu đề bằng hr khiến nội dung thiếu cấu trúc rõ ràng.
- Lạm dụng CSS để biến hr thành các thành phần không còn đúng ý nghĩa ban đầu.
Nguyên tắc đơn giản là chỉ sử dụng thẻ hr khi thực sự cần thể hiện sự phân tách về mặt nội dung. Mọi yêu cầu liên quan đến bố cục hoặc trang trí nên được xử lý bằng CSS để đảm bảo mã HTML rõ ràng, dễ bảo trì và đúng chuẩn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ hr trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
