<hr>: Phần tử Ngắt chủ đề (Đường kẻ ngang)
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phần tử <hr> trong HTML đại diện cho sự ngắt chủ đề giữa các phần tử cấp đoạn văn: ví dụ, sự thay đổi cảnh trong một câu chuyện, hoặc sự chuyển đổi chủ đề trong một mục.
Try it
<p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p>
<hr />
<p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>
hr {
border: none;
border-top: 3px double #333333;
color: #333333;
overflow: visible;
text-align: center;
height: 5px;
}
hr::after {
background: white;
content: "§";
padding: 0 4px;
position: relative;
top: -13px;
}
Trong lịch sử, phần tử <hr> luôn được trình bày dưới dạng đường kẻ ngang. Mặc dù nó vẫn có thể được hiển thị dưới dạng đường kẻ ngang trong các trình duyệt trực quan, phần tử này hiện được định nghĩa theo nghĩa ngữ nghĩa, chứ không phải theo nghĩa trình bày. Do đó, nếu bạn muốn vẽ một đường ngang, bạn nên thực hiện điều đó bằng cách thêm đường viền vào một phần tử hiện có sử dụng CSS.
Các thuộc tính border-* (ví dụ: border-style và border-color) cho phép bạn tùy chỉnh đáng kể giao diện của đường kẻ, cho dù bạn đang tùy chỉnh phần tử <hr> hay đường viền được vẽ trên một phần tử khác.
Thuộc tính
Các thuộc tính của phần tử này bao gồm các thuộc tính toàn cục.
alignDeprecated Non-standard-
Đặt căn chỉnh của đường kẻ trên trang. Nếu không có giá trị nào được chỉ định, giá trị mặc định là
left. colorDeprecated Non-standard-
Đặt màu của đường kẻ thông qua tên màu hoặc giá trị thập lục phân.
noshadeDeprecated Non-standard-
Đặt đường kẻ không có bóng.
sizeDeprecated Non-standard-
Đặt chiều cao, tính bằng pixel, của đường kẻ.
widthDeprecated Non-standard-
Đặt độ dài của đường kẻ trên trang thông qua giá trị pixel hoặc phần trăm.
Ví dụ
HTML
<p>
This is the first paragraph of text. This is the first paragraph of text. This
is the first paragraph of text. This is the first paragraph of text.
</p>
<hr />
<p>
This is the second paragraph of text. This is the second paragraph of text.
This is the second paragraph of text. This is the second paragraph of text.
</p>
Kết quả
Tóm tắt kỹ thuật
| Danh mục nội dung | Nội dung luồng. |
|---|---|
| Nội dung được phép | Không có; đây là void element. |
| Bỏ qua thẻ | Phải có thẻ mở và không được có thẻ đóng. |
| Phần tử cha được phép |
|
| Vai trò ARIA ngầm định | separator |
| Vai trò ARIA được phép |
presentation hoặc none
|
| Giao diện DOM | HTMLHRElement |
Thông số kỹ thuật
| Specification |
|---|
| HTML # the-hr-element |