Đường kẻ ngang trong HTML: thẻ hr và cách định dạng

Cách thêm đường kẻ ngang

Đặt <hr> giữa hai khối nội dung. Thẻ này không có thẻ đóng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <p>The end of the first part of the story.</p>
  <hr>
  <p>Three weeks later, a new part begins.</p>
</body>
</html>

Mặc định đường kẻ trải hết chiều rộng của khối chứa, có một khoảng margin nhỏ ở trên và dưới, và được vẽ bằng một đường viền inset mảnh màu xám (một cạnh sáng và một cạnh tối).

<hr> là viết tắt của horizontal rule. Trong HTML, nó mang nghĩa ngắt chủ đề (thematic break): một sự chuyển đổi chủ đề hoặc cảnh bên trong một phần. Trình đọc màn hình đọc nó là một dấu phân cách. Nếu bạn chỉ muốn một đường kẻ trang trí (dưới tiêu đề, quanh một thẻ card), hãy vẽ nó bằng đường viền CSS trên chính phần tử đó.

Định dạng hr bằng CSS

Giao diện mặc định đến từ đường viền, nên cách chắc chắn để định dạng <hr> là bỏ chúng đi rồi tự vẽ một đường viền:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    hr { margin: 20px 0; }
    .blue { border: none; border-top: 2px solid #2563eb; }
    .thick { border: none; border-top: 6px solid #111827; }
    .dashed { border: none; border-top: 2px dashed #f59e0b; }
    .dotted { border: none; border-top: 3px dotted #16a34a; }
    .short { border: none; border-top: 2px solid #9ca3af; width: 40%; margin-inline: auto; }
    .round { border: none; height: 6px; background: #2563eb; border-radius: 3px; }
  </style>
</head>
<body>
  <hr>
  <hr class="blue">
  <hr class="thick">
  <hr class="dashed">
  <hr class="dotted">
  <hr class="short">
  <hr class="round">
</body>
</html>

Chỉ đặt color: blue cho hr vẫn đổi được màu đường kẻ trên các trình duyệt hiện nay, nhưng kiểu inset mặc định tạo bóng cho nó và nó vẫn cao 2px. Đặt lại đường viền cho bạn đúng thứ bạn muốn.

Các thuộc tính hr cũ

Code cũ dùng thuộc tính ngay trên thẻ:

<hr size="4" width="50%" color="red" noshade align="left">

size, width, color, noshade và align đã lỗi thời. Trình duyệt vẫn áp dụng chúng để các trang cũ hiển thị đúng, nhưng chúng là HTML không hợp lệ và khó sửa về sau. Hãy thay chúng bằng CSS ở trên.

Đường phân cách có chữ ở giữa

Dòng "or" giữa hai nút đăng nhập không phải là <hr> (hr không thể chứa chữ). Đó là một hàng flex với một đường kẻ ở mỗi bên chữ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divider with text</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 320px; }
    .divider { display: flex; align-items: center; gap: 12px; color: #6b7280; font-size: 14px; }
    .divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid #d1d5db; }
    button { width: 100%; padding: 10px; }
  </style>
</head>
<body>
  <button type="button">Continue with email</button>
  <p class="divider">or</p>
  <button type="button">Continue with a passkey</button>
</body>
</html>

Hai phần ::before và ::after mỗi bên chiếm một nửa khoảng trống nhờ flex: 1 và vẽ một đường viền trên. Đổi or thành một từ dài hơn là các đường kẻ co lại cho vừa.

Đường kẻ dọc

Không có phiên bản dọc của <hr>. Hãy vẽ đường kẻ dọc bằng đường viền ở một cạnh của phần tử, hoặc bằng một phần tử mảnh bên trong một hàng flex:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .quote { border-inline-start: 4px solid #2563eb; padding-inline-start: 12px; }
    .row { display: flex; align-items: center; gap: 16px; }
    .vr { width: 1px; align-self: stretch; background: #d1d5db; }
  </style>
</head>
<body>
  <p class="quote">A border on the start side makes a vertical line.</p>
  <div class="row">
    <span>Home</span>
    <span class="vr"></span>
    <span>Docs</span>
    <span class="vr"></span>
    <span>Blog</span>
  </div>
</body>
</html>

border-inline-start đặt đường kẻ ở đầu dòng chữ, tức là bên trái trong tiếng Việt và bên phải trong tiếng Ả Rập hay tiếng Do Thái, nên bố cục chạy đúng theo cả hai chiều.

Lỗi thường gặp

• Viết </hr>. <hr> là phần tử rỗng. Chỉ cần <hr> hoặc <hr />.
• Dùng <hr> để trang trí. Trình đọc màn hình đọc từng thẻ một. Đường kẻ chỉ để nhìn thì thuộc về CSS.
• Định dạng chỉ bằng color. Đặt lại đường viền bằng border: none rồi đặt border-top.
• Dùng <br> hoặc dấu gạch dưới để vẽ đường kẻ. Hãy dùng <hr> hoặc đường viền. Xem trang xuống dòng để biết <br> dùng vào việc gì.
• Dùng thuộc tính lỗi thời. Chuyển size, width, color và noshade sang CSS.