Thêm các dòng ngang để chia nhỏ nội dung trên trang

Cách sử dụng thẻ HR cho tài liệu web

Thẻ HR thường được sử dụng để thêm một đường ngang (đôi khi được gọi là quy tắc ngang) vào tài liệu web. Để thêm một dòng, bạn nhập:


để hướng dẫn trình duyệt vẽ một đường trên toàn bộ chiều rộng của trang hoặc phần tử gốc bằng cách sử dụng cài đặt mặc định. Dòng mặc định này là đơn giản và thường phục vụ mục đích của nó, nhưng các thuộc tính có thể được gán để thay đổi kích thước, màu sắc và vị trí của các dòng trong số các đặc tính khác. Phương pháp sửa đổi giao diện của đường ngang thay đổi giữa HTML4 và HTML5 .

Liệu ngữ nghĩa của thẻ nhân sự có phải không?

Trong HTML4, thẻ nhân sự không phải là ngữ nghĩa. Các phần tử ngữ nghĩa mô tả ý nghĩa của chúng về mặt trình duyệt và nhà phát triển có thể dễ dàng hiểu được. Thẻ HR chỉ là một cách để thêm một dòng đơn giản vào tài liệu ở bất cứ đâu bạn muốn. Chỉ tạo đường viền trên cùng hoặc dưới cùng của phần tử mà bạn muốn dòng xuất hiện đặt một đường ngang ở đầu hoặc cuối phần tử, nhưng nói chung, thẻ nhân sự dễ sử dụng hơn cho mục đích này.

Bắt đầu với HTML5, thẻ HR trở thành ngữ nghĩa và bây giờ xác định một ngắt đoạn chuyên đề theo cấp độ, là sự phá vỡ trong luồng nội dung không đảm bảo một trang mới hoặc dấu phân cách mạnh mẽ hơn — đó là thay đổi chủ đề . Ví dụ: bạn có thể tìm thấy thẻ nhân sự sau khi một cảnh thay đổi trong một câu chuyện hoặc có thể cho biết sự thay đổi chủ đề trong tài liệu tham chiếu.

Nhân sự thuộc tính trong HTML4 và HTML5

Trong HTML4, thẻ HR có thể được gán các thuộc tính đơn giản bao gồm "align", "width" và "noshade". Căn chỉnh có thể được đặt ở bên trái, giữa, bên phải hoặc chính xác. Chiều rộng đã điều chỉnh chiều rộng của đường ngang từ 100% mặc định đã mở rộng dòng trên trang. Thuộc tính noshade hiển thị một đường màu liền thay vì một màu tô bóng. Các thuộc tính này đã lỗi thời trong HTML5 và bạn nên sử dụng CSS để tạo kiểu thẻ HR trong HTML5. Ví dụ: trong HTML 4:


tạo ra một đường ngang với chiều cao là 10 pixel.

Sử dụng CSS với HTML5, một đường ngang có chiều cao 10 pixel được tạo kiểu:


Sử dụng CSS để tạo kiểu cho đường ngang của bạn mang đến cho bạn rất nhiều sự tự do trong việc thiết kế trang web của bạn. Bạn có thể thấy nhiều ví dụ về các kiểu thẻ HR trong Phong cách này trong bài viết Thẻ nhân sự . Chỉ các kiểu chiều rộng và chiều cao nhất quán trên tất cả các trình duyệt, do đó, một số thử nghiệm và lỗi có thể cần thiết khi sử dụng các kiểu khác. Chiều rộng mặc định luôn là 100 phần trăm chiều rộng của trang web hoặc phần tử gốc. Chiều cao mặc định của quy tắc là hai pixel.