Void Element HTML (Thẻ Tự Đóng) là gì?
Trong bài này chúng ta sẽ cùng nhau đi vào tìm hiểu void element HTML là gì và cách phân biệt thẻ này với các thẻ khác trong HTML nhé. Nào bây giờ hãy cùng đi vào tìm hiểu với mình nha.
Void element là gì?
Trong HTML, chúng ta thường thấy các phần tử có thẻ mở và thẻ đóng, ví dụ như:
<p>Đây là một đoạn văn bản.</p>
<h1>Đây là một tiêu đề.</h1>Những phần tử này được gọi là “non-void elements” vì chúng chứa nội dung bên trong thẻ.
Ngược lại, “void elements” là những phần tử không được phép chứa bất kỳ nội dung nào bên trong thẻ. Thậm chí, cách viết của chúng cũng khác biệt so với các phần tử thông thường.
<tên_thẻ [thuộc_tính] />Trong đó:
tên_thẻ: Là tên của phần tử, ví dụ: hr, br, img, input, meta, link, …[thuộc_tính]: Là các thuộc tính của phần tử (nếu có), ví dụ: src, alt, width, height, type, href,…/>: Dấu gạch chéo và dấu ngoặc nhọn đóng vai trò “đóng” phần tử, cho biết đây là một thẻ tự đóng và không có nội dung.
Ví dụ, đây là một “horizontal rule” element ( <hr /> ):
<hr />Bạn có thể thấy:
- Nó bắt đầu bằng dấu ngoặc nhọn mở (
<) và kết thúc bằng dấu ngoặc nhọn đóng (>). - Điểm đặc biệt là có một dấu gạch chéo (
/) ngay trước dấu ngoặc nhọn đóng.
Lưu ý quan trọng:
- Hãy chắc chắn rằng bạn sử dụng dấu gạch chéo
/(forward slash) theo đúng yêu cầu của thẻ tự đóng chứ không phải dấu gạch chéo ngược\(backslash) nhé.
Tại sao nên sử dụng dấu gạch chéo ở cuối thẻ mở của void element?
Mặc dù không bắt buộc, nhưng việc sử dụng dấu gạch chéo ở cuối thẻ mở của thẻ tự đóng (ví dụ: <hr /> thay vì <hr>) được khuyến khích vì những lý do sau:
- Tính nhất quán: Giúp mã HTML trở nên nhất quán hơn, vì tất cả các void element đều có cùng một cú pháp.
- Khả năng đọc: Giúp người đọc dễ dàng nhận biết void element và phân biệt chúng với các phần tử khác.
Các thẻ tự đóng phổ biến trong HTML
Dưới đây là một số void element phổ biến mà bạn sẽ thường xuyên gặp khi làm việc với HTML:
- <br /> (Break): Tạo một ngắt dòng. Thường được sử dụng để xuống dòng trong một đoạn văn bản mà không tạo ra một đoạn văn bản mới.
- <hr /> (Horizontal Rule): Tạo một đường kẻ ngang, thường được sử dụng để phân chia các phần nội dung trên trang web.
- <img src=”url” alt=”text” /> (Image): Chèn một hình ảnh vào trang web. Thuộc tính
srcchỉ định đường dẫn đến hình ảnh, và thuộc tínhaltcung cấp văn bản thay thế cho hình ảnh (trong trường hợp hình ảnh không hiển thị được). - <input type=”type” /> (Input): Tạo một trường nhập liệu để người dùng nhập dữ liệu. Thuộc tính
typexác định loại trường nhập liệu, ví dụ:text,password,email,number, … - <link rel=”stylesheet” href=”style.css” /> (Link): Liên kết đến một tài nguyên bên ngoài, thường là một tệp CSS để định dạng trang web.
Ví dụ sử dụng void element
Để hiểu rõ hơn về cách sử dụng thẻ tự đóng, chúng ta sẽ xem xét một số ví dụ cụ thể.
1. Sử dụng <hr /> để phân chia nội dung
Giả sử bạn có một trang web giới thiệu về các món ăn Việt Nam. Bạn muốn phân chia trang web thành các phần khác nhau, ví dụ: “Món khai vị”, “Món chính”, “Món tráng miệng”. Bạn có thể sử dụng phần tử <hr /> để tạo ra các đường kẻ ngang phân chia giữa các phần này.
See the Pen
thẻ tự đóng HTML by haycuoilennao19 (@haycuoilennao19)
on CodePen.
Trong ví dụ trên, mỗi phần món ăn được phân chia bằng một đường kẻ ngang do phần tử <hr /> tạo ra.
2. Sử dụng <br /> để ngắt dòng trong địa chỉ
Giả sử bạn muốn hiển thị địa chỉ của một nhà hàng trên trang web. Địa chỉ thường được viết trên nhiều dòng, vì vậy bạn có thể sử dụng phần tử <br /> để ngắt dòng giữa các phần của địa chỉ.
See the Pen
thẻ tự đóng HTML 2 by haycuoilennao19 (@haycuoilennao19)
on CodePen.
Trong ví dụ trên, mỗi dòng của địa chỉ được phân tách bằng một phần tử <br />, giúp địa chỉ hiển thị đúng định dạng.
Điều cần lưu ý khi sử dụng Void Element
Sử dụng void element một cách hợp lý: Chỉ sử dụng thẻ tự đóng khi chúng thực sự cần thiết để tạo ra cấu trúc và hiển thị nội dung mong muốn. Tránh lạm dụng thẻ tự đóng, vì điều này có thể làm cho mã HTML trở nên khó đọc và khó bảo trì. Ví dụ chúng ta hay sử dụng <br /> để tạo khoảng cách giữa các đoạn văn, tuy nhiên bạn nên sử dụng các phần tử <p> riêng biệt và định dạng khoảng cách giữa chúng bằng CSS.
Kết luận
Hy vọng bài viết này đã cung cấp cho bạn một cái nhìn tổng quan về thẻ tự đóng trong HTML. Chúc bạn thành công trên con đường trở thành một nhà phát triển web tài năng nhé!
