×

Cách sử dụng thẻ <hr> để tạo đường kẻ ngang trong HTML

Avatar of admin
admin 3 Views

Trong thiết kế web, việc chia tách nội dung thành các phần riêng biệt là điều vô cùng quan trọng để giúp người dùng dễ dàng theo dõi và nắm bắt thông tin. Một trong những cách hiệu quả để thực hiện điều này là sử dụng thẻ <hr> trong HTML. Thẻ <hr> sẽ tạo ra một đường kẻ ngang giúp phân cách nội dung một cách trực quan.

Cách sử dụng cơ bản của thẻ <hr>

Thẻ <hr> rất đơn giản để sử dụng. Đây là một thẻ rỗng, không có phần đối thẻ (closing tag), vì vậy bạn chỉ cần sử dụng nó một lần dưới dạng:

<hr>

Khi dòng lệnh này được đưa vào mã HTML, một đường kẻ ngang sẽ xuất hiện trên trang web, mặc định được căn giữa và kéo dài toàn bộ chiều rộng của khung chứa nó.

Tùy chỉnh đường kẻ ngang với CSS

Mặc dù thẻ <hr> có cách sử dụng đơn giản, bạn có thể tùy chỉnh nó để phù hợp với giao diện của trang web bằng cách sử dụng CSS. Dưới đây là một số thuộc tính CSS thường được sử dụng để tùy chỉnh đường kẻ ngang:

  1. Thay đổi màu sắc:
hr {
    border-color: #333;
}
  1. Thay đổi độ dày:
hr {
    border-width: 2px;
}
  1. Thay đổi kiểu nét (solid, dashed, dotted):
hr {
    border-style: dashed;
}
  1. Thay đổi độ dài và căn lề:
hr {
    width: 50%;
    margin: auto;
}
  1. Thay đổi độ cao và màu nền:
hr {
    height: 5px;
    background-color: #ccc;
    border: none;
}

Thí dụ thực tế về việc sử dụng và tùy chỉnh thẻ <hr>

Giả sử bạn muốn tạo một dòng kẻ ngang giữa các phần nội dung trên trang web của mình. Dưới đây là một ví dụ cụ thể về cách bạn có thể triển khai nó:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ví dụ thẻ hr</title>
    <style>
        hr {
            border: none;
            height: 2px;
            background-color: #000;
            width: 80%;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <h1>Phần tiêu đề</h1>
    <p>Đây là phần nội dung đầu tiên trên trang web.</p>

    <hr>

    <h2>Phần tiêu đề thứ hai</h2>
    <p>Đây là phần nội dung thứ hai trên trang web.</p>
</body>
</html>

Trong ví dụ này, ta đã dùng thẻ <hr> để tạo ra một đường kẻ ngang ngăn cách giữa hai phần nội dung. Đường kẻ này có độ cao là 2px, màu nền đen và chiều rộng bằng 80% của khung chứa. Điều này tạo ra một sự phân cách rõ ràng và thẩm mỹ giữa các phần nội dung nhưng vẫn đảm bảo tính cân đối của trang web.

Lưu ý khi sử dụng thẻ <hr>

Mặc dù thẻ <hr> rất tiện ích, bạn nên sử dụng nó một cách hợp lý để tránh làm rối mắt người xem. Đường kẻ ngang không nên xuất hiện quá nhiều trên một trang web mà chỉ nên dùng ở những vị trí thật sự cần thiết để phân tách nội dung.

Kết luận

Thẻ <hr> là một công cụ mạnh mẽ và dễ sử dụng trong HTML để tạo ra các đường kẻ ngang giúp phân chia nội dung. Với sự hỗ trợ của CSS, bạn có thể tùy chỉnh chúng để phù hợp hơn với thiết kế tổng thể của trang web. Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về cách sử dụng và tùy chỉnh thẻ <hr> cũng như áp dụng chúng một cách hiệu quả trong các dự án web của mình.

Comments

Bài viết liên quan