EnglishChào các ban! HTML là ngôn ngữ đánh dấu phổ biến nhất trong phát triển web, và một trong những khái niệm quan trọng cần nắm vững chính là các thẻ HTML không cần thẻ đóng. Những thẻ này được gọi là self-closing tags hoặc empty tags và thường được sử dụng để biểu diễn các nội dung không yêu cầu phần tử con.
Trong bài viết này, CodeTutHub sẽ giúp bạn hiểu rõ hơn về những thẻ HTML không cần thẻ đóng, cách sử dụng chúng, và các lưu ý quan trọng khi làm việc với chúng.
Self-Closing tags là gì?
Self-closing tags là các thẻ HTML không yêu cầu một thẻ đóng đi kèm. Điều này có nghĩa là chúng tự hoàn thiện cú pháp trong chính thẻ mở. Các thẻ này thường được sử dụng để thêm nội dung hoặc tính năng mà không chứa nội dung lồng bên trong.
Danh sách các thẻ HTML không cần thẻ đóng
1. Thẻ <br> – xuống dòng
Thẻ <br> được sử dụng để ngắt dòng (xuống dòng) trong văn bản.
<p>Đây là một dòng.<br>Đây là dòng tiếp theo.</p>2. Thẻ <img> – hình ảnh
Thẻ <img> dùng để chèn hình ảnh vào trang web. Nó cần thuộc tính src để chỉ định đường dẫn đến tệp hình ảnh và có thể có thêm thuộc tính alt để mô tả hình ảnh.
<img src="https://codetuthub.com/assets/images/logo-codetuthub.webp" alt="Logo CodeTutHub">3. Thẻ <hr> – đường kẻ ngang
Thẻ <hr> tạo ra một đường kẻ ngang để phân chia nội dung.
<p>Phần trên.</p>
<hr>
<p>Phần dưới.</p>4. Thẻ <input> – trường nhập liệu
Thẻ <input> được sử dụng để tạo các trường nhập liệu trong form, như ô nhập văn bản, nút bấm, hoặc hộp kiểm.
<input type="text" placeholder="Nhập tên của bạn">5. Thẻ <meta>
Thẻ <meta> cung cấp thông tin metadata cho trình duyệt, chẳng hạn như mã hóa ký tự hoặc mô tả nội dung trang.
<meta charset="UTF-8">
<meta name="description" content="Trang web học lập trình">6. Thẻ <link>
Thẻ <link> được dùng để liên kết trang HTML với các tài nguyên bên ngoài, chẳng hạn như file CSS hoặc favicon.
<link rel="stylesheet" href="styles.css">7. Thẻ <source>
Thẻ <source> được sử dụng trong các phần tử đa phương tiện như <video> và <audio> để chỉ định các nguồn khác nhau.
<video controls>
<source src="video.mp4" type="video/mp4">
Trình duyệt của bạn không hỗ trợ video.
</video>8. Thẻ <col> – định dạng cột
Thẻ <col> được sử dụng trong bảng HTML để định dạng các cột.
<table>
<colgroup>
<col style="background-color: yellow;">
<col style="background-color: pink;">
</colgroup>
<tr>
<td>Cột 1</td>
<td>Cột 2</td>
</tr>
</table>9. Thẻ <area> – vùng nhấp chuột
Thẻ <area> xác định một khu vực trên bản đồ hình ảnh.
<img src="map.jpg" usemap="#map">
<map name="map">
<area shape="rect" coords="0,0,100,100" href="https://codetuthub.com">
</map>Cách sử dụng Self-Closing tags trong HTML5
Trong HTML5, self-closing tags không yêu cầu dấu gạch chéo (/) ở cuối. Ví dụ:
<!-- HTML5 chuẩn -->
<img src="https://codetuthub.com/assets/images/logo-codetuthub.webp" alt="Logo CodeTutHub">Tuy nhiên, nếu bạn đang làm việc với XHTML, dấu gạch chéo (/) là bắt buộc để đảm bảo cú pháp hợp lệ:
<!-- XHTML chuẩn -->
<img src="https://codetuthub.com/assets/images/logo-codetuthub.webp" alt="Logo CodeTutHub" />Lưu ý khi sử dụng các thẻ không cần thẻ đóng
- Không sử dụng thẻ đóng cho các thẻ self-closing: Các thẻ như
<br>,<img>không được có thẻ đóng, nếu không trình duyệt có thể gặp lỗi.
<!-- Sai -->
<br></br>
<img src="logo.png"></img>- Giữ mã nguồn sạch: Các thẻ này nên được viết gọn gàng và không lạm dụng nếu không cần thiết.
- Kiểm tra khả năng tương thích: Một số phiên bản trình duyệt cũ hoặc môi trường đặc biệt như XML có thể yêu cầu dấu gạch chéo (
/) trong thẻ tự đóng.
Tại sao nên hiểu rõ các thẻ Self-Closing?
- Hiệu quả mã nguồn: Giúp bạn tránh những thẻ không cần thiết, làm mã gọn nhẹ hơn.
- Khả năng bảo trì: Dễ dàng sửa đổi và quản lý các dự án web lớn.
- Hiệu suất tải trang: Ít mã HTML hơn dẫn đến tốc độ tải trang nhanh hơn.
Kết luận
Hiểu rõ các thẻ HTML không cần thẻ đóng là một kỹ năng quan trọng trong việc viết mã HTML sạch, dễ đọc, và tối ưu. Nắm vững cách sử dụng các thẻ như <br>, <img>, <meta> hay <input> sẽ giúp bạn xây dựng các trang web chuyên nghiệp hơn.
Nếu bạn thấy bài viết này hữu ích, đừng quên ghé thăm CodeTutHub.com để khám phá thêm nhiều mẹo lập trình hay khác!
