You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Thẻ Hr giúp bạn tạo đường kẻ ngang vô cùng đơn giản trong HTML

Thẻ Hr giúp bạn tạo đường kẻ ngang vô cùng đơn giản trong HTML

Chúng ta sẽ học về cách làm sao để vẽ được đường thẳng gạch ngang trong HTML.

Xem thêm bài viết

Thẻ mà chúng ta chuẩn bị học chính là thẻ đơn giản nhất trong số những thẻ mà bạn đã từng học qua. Thậm chí còn đơn giản hơn. Bạn sẽ rất ngạc nhiên vì sao mà thẻ này lại có tác dụng đơn giản đến vậy. Đơn giản chính là một trong những ưu điểm của loại thẻ này. Bạn còn nhớ bài viết trước mình có nói về thẻ gạch ngang trong HTML. Thẻ có thể làm được điều này chính là thẻ <hr>.

Thẻ này có công dụng vô cùng đơn giản nhưng thiếu thẻ này thì không được. Bởi có những lúc bạn thật sự cần đến thẻ này. Bạn thường xuyên lướt web mỗi ngày nên chắc chắn bạn sẽ bắt gặp những kiểu trang web có giao diện chính chia làm nhiều phần. Trang web có thể chia ra thành nhiều phần theo hướng ngang. Bạn cứ tưởng tượng ra một trang báo mạng. Giao diện chính của trang web ở ô đầu tiên chứa các Menu (danh mục) của trang web. Phần tiếp theo là cụm tin nóng của ngày, sau đó là tiêu điểm của tuần, tiếp đến là các bài cần đăng. Mỗi một phần đều được chia cách bằng những đường gạch ngang. Những đường gạch ngang này sẽ được trang trí bằng CSS. Bạn sẽ học kĩ thuật này sau. Nhưng nếu không có các đường kẻ trước thì làm sao bạn có thể trang trí được. Thẻ <hr> sẽ cho phép bạn thực hiện những đường kẻ đó. Chần chừ gì nữa mà không học ngay thẻ này.

Hồ sơ nhân viên “vẽ đường” chuyên nghiệp <hr>

Thẻ <hr> là một thẻ khá đặc biệt. Thẻ <hr> (Hr) và Br là hai thẻ Empty Tag trong phần thẻ Body.  Điều này đồng nghĩa với việc cú pháp của hai thẻ này giống nhau. Cả hai chỉ khác nhau về công dụng. Bên cạnh đó bạn rất hay nhầm lẫn giữa Hr và Br do chúng có phần tương tự nhau.

Nếu bạn sợ nhầm lẫn thì bạn có thể  tưởng tượng ra một câu chuyện vui vui để nhớ tốt hơn. Nếu Br là chuyên viên cao cấp thì Hr chính là một anh chàng chuyên vẽ đường phân chia hai chiều đi cho các phương tiện giao thông. Cả hai là bạn. Sống kế bên nhà nhau. Nhưng làm công việc không có liên quan gì đến nhau. Br thì ngồi máy lạnh với làn da soái ca. Trong khi đó Hr thì suốt ngày phải phơi nắng ngoài đường suốt cả ngày.

Công dụng chính của Hr là giúp bạn có những đường kẻ ngang trên trang web. Chỉ đơn giản như vậy thôi.

Cú pháp thẻ Hr trong HTML

Chúng ta cùng nhìn sơ qua cú pháp của thẻ Hr :

<hr> hoặc </hr>

Thẻ Hr là một thẻ Empty Tag. Thẻ này chỉ có thể mở và không có thẻ đóng. Thẻ này bạn có hai cách viết. Cách viết đầu tiên là bạn có thể viết mà không cần dấu slash. Cách thứ hai thì bạn thêm dấu slash vào. Mình khuyến khích bạn sử dụng cách thứ hai. Đây là một thẻ rỗng. Thế nên bạn không cần bất kỳ một Content nào trong thẻ này.

Cú pháp thẻ này đơn giản đúng không nào. Chúng ta cùng xem qua ví dụ nhé!

Ví dụ

 

<!doctype html/>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
    </head>
    <body>
        <h1>Ẩm thực sáng tạo Sài Gòn 47 hẻm</h1>
        <p>Khám phá ẩm thực ở vùng đất được xem là hòn ngọc viễn Đông. Nơi đậm tính văn hoá xen lẫn hiện đại của Sài Gòn. </p><hr/>
        <pre>
            Sài Gòn không giống với Hà Nội bởi thời tiết Sài Gòn luôn thất thường.
                Sài Gòn không có đặc sản của riêng mình vì Sài Gòn là nơi dung nạp mọi nền văn hoá.
                    Muốn ăn món Thái, 
                            Có ngay! 
                    Muốn ăn món Hàn, 
                            Hãy nhìn bên kia đường! 
                    Muốn ăn thịt nướng, 
                            Đi thêm vài bước nữa! 
                    Muốn ăn món Nhật, 
                            Ghé đối diện! 
                Sài Gòn tuy có vẻ đơn điệu về ẩm thực nhưng chính Sài Gòn cũng có một phong cách rất riêng mà chỉ có ở Sài Gòn <br/>
                    Những buổi tối không ngủ 
                        Ngắm nhìn đường phố nhộp nhịp
                            Bên cạnh những người mình yêu thương cùng ly cà phê hương vị đậm đà. 
                Sài Gòn là nơi của những ly cà phê đặc biệt. 
                Hiếm có nơi mà người ta có thể thưởng thức được ly cà phê hấp dẫn bằng nhiều hình thức khác nhau. 
                Có một Sài Gòn rất khác... 
            
            Chúng ta sẽ khám phá Sài Gòn bằng mọi cung bậc mà bạn có thể cảm nhận được. Thấm nhuần những giá trị tinh thần khác biệt. Đó mới là Sài Gòn. Một Sài Gòn diễm tình hoa lệ.
        </pre>
        <hr/>
        <h3>Sài Gòn một nửa yêu thương</h3>
        
    </body>
</html>

Bạn hãy nhìn vào đoạn mã ví dụ. Bạn sẽ thấy có hai chỗ mình đã đặt thẻ Hr. Đằng sau đoạn văn (Khám phá...hiện đại của Sài Gòn.) và một thẻ ở ngay sau thẻ đóng của thẻ Pre. Bây giờ chúng ta sẽ xem kết quả mà thẻ HR sẽ hiển thị trên trình duyệt.

 Như bạn đã thấy ở trên hình. Các đoạn có sự ngăn cách ở từng đoạn. Bạn đã nhìn thấy hai đường kẻ của thẻ Hr trên hình. Có thêm những đường kẻ này bạn có thể nhìn thấy sự gọn gàng của những đoạn văn mà bạn muốn viết trong HTML. Nếu bạn áp dụng chúng hợp lý thì bạn có thể làm cho trang web của mình vừa nổi bật nhưng cũng gọn gàng hơn hẳn.

Sau ví dụ này bạn cảm thấy thế nào. Trang web của bạn sau khi được mở bằng trình duyệt cho bạn cảm giác khá thú vị. Các phần đều được phân chia khá hợp lý và mang lại cho bạn cảm giác dễ chịu hơn. Các phần được phân biệt rõ ràng nên sẽ không khiến người dùng thấy rối mắt.

Thẻ Hr cho phép bạn tạo ra những trang web khá trực quan. Đem lại hứng khởi đăc biệt dành cho người dùng. Còn nếu bạn không muốn dùng thì cũng không thể ép bạn được. Thiết kế web vốn phải sáng tạo. Nhưng mà những thẻ mà các nhà lập trình web thường dùng thì bạn cũng nên biết. Sau này muốn dùng cũng dễ dàng hơn.

Chúng ta đã học xong thẻ Hr trong HTML. Thẻ này tuy đơn giản nhưng thực tế lại không hề giản đơn.  Một loại thẻ cần thiết và thường được sử dụng. Đây là thẻ bạn nên biết để sau này biết để ứng dụng vào làm web.

 

 

 




Đặt câu hỏi cho bài viết này ?