HTML là nền tảng quan trọng trong phát triển web, nhưng không phải lập trình viên nào cũng tận dụng được tất cả các tính năng mà HTML cung cấp. Trong bài viết này, chúng ta sẽ khám phá 5 tính năng HTML ít được biết đến nhưng lại có thể cải thiện hiệu suất và tính năng của trang web một cách đáng kể. Những tính năng này bao gồm Thẻ Dialog, Thẻ Picture, Thẻ Output, Thẻ Data, và Thẻ Details cùng Summary.
1. Thẻ Dialog
Thẻ <dialog> cho phép tạo ra các hộp thoại modal dễ dàng mà không cần dùng đến JavaScript, giúp bạn dễ dàng giao tiếp với người dùng thông qua các thông báo hoặc hộp thoại xác nhận. Ví dụ như sau:
<dialog id="myDialog">
<p>Đây là một hộp thoại modal</p>
<button onclick="document.getElementById('myDialog').close()">Đóng</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Mở Hộp Thoại</button>2. Thẻ Picture
Thẻ <picture> rất hữu ích trong việc xử lý hình ảnh đáp ứng, cho phép tải hình ảnh tối ưu dựa trên kích thước màn hình và độ phân giải của thiết bị. Đây là một ví dụ sử dụng thẻ <picture>:
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="Hình ảnh đáp ứng">
</picture>3. Thẻ Output
Thẻ <output> cho phép hiển thị kết quả của một phép tính hoặc phản hồi dựa trên input của người dùng trong các biểu mẫu. Dưới đây là cách sử dụng thẻ này:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="0"> +
<input type="number" id="b" value="0">
= <output name="result" for="a b">0</output>
</form>4. Thẻ Data
Thẻ <data> giúp bạn gán một giá trị có thể đọc được cho các thông tin dễ hiểu hơn. Điều này vô cùng hữu ích để tăng cường ngữ nghĩa cho nội dung và cải thiện SEO. Ví dụ:
<p>Giá: <data value="49.99">$49.99</data></p>5. Thẻ Details và Summary
Sự kết hợp của thẻ <details> và <summary> cho phép tạo các phần nội dung có thể mở rộng, rất phù hợp cho FAQ hoặc những thông tin cần ẩn giấu. Ví dụ:
<details>
<summary>Thông Tin Thêm</summary>
<p>Đây là nội dung ẩn sẽ được hiển thị khi bạn nhấn vào "Thông Tin Thêm".</p>
</details>Kết Luận
Những tính năng HTML này không chỉ mang lại sự tiện lợi mà còn giúp bạn tăng cường chất lượng và trải nghiệm người dùng trên trang web. Tích hợp chúng vào dự án của bạn sẽ giúp bạn tạo ra các trang web hiện đại, đáp ứng nhanh và thân thiện hơn. Đừng ngần ngại thử nghiệm những tính năng này, bạn sẽ ngạc nhiên về khả năng mà chúng mang lại cho quy trình phát triển của bạn. Cảm ơn bạn đã theo dõi bài viết này, và hy vọng nó sẽ hữu ích cho bạn trong công việc lập trình web của mình.
source: viblo
