HTML là nền tảng của phát triển web. Mặc dù hầu hết các lập trình viên đều quen thuộc với các thẻ cơ bản như
<div>,<p>, và<img>, nhưng HTML còn cung cấp nhiều tính năng nâng cao có thể tăng cường đáng kể chức năng và hiệu suất của trang web. Tuy nhiên, nhiều tính năng mạnh mẽ này vẫn chưa được sử dụng một cách rộng rãi. Trong bài viết này, mình sẽ giới thiệu 5 tính năng HTML mà bạn có thể chưa sử dụng nhưng chắc chắn nên thử.
Top 5 Tính Năng HTML - Safdar Ali
1. Thẻ Dialog
Thẻ <dialog> là một thẻ HTML gốc cho phép bạn tạo các hộp thoại dạng modal mà không cần phụ thuộc vào các thư viện JavaScript. Thẻ này có thể được sử dụng cho các thông báo, hộp thoại xác nhận, hoặc các pop-up tùy chỉnh, mang lại một cách tiếp cận có tính ngữ nghĩa hơn cho các modal.
Dưới đây là một ví dụ:
<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>
Với thẻ <dialog>, bạn có thể dễ dàng kiểm soát việc mở và đóng các modal, đồng thời nó cũng dễ dàng truy cập và dễ dàng để tạo kiểu.
2. Thẻ Picture
Thẻ <picture> rất quan trọng trong việc tạo hình ảnh đáp ứng mà có thể thích ứng với các kích thước màn hình và độ phân giải khác nhau. Thẻ này cho phép bạn chỉ định nhiều nguồn hình ảnh và chọn hình ảnh tốt nhất dựa trên khả năng của thiết bị.
Dưới đây là một ví dụ:
<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>
Thẻ <picture> cải thiện thời gian tải và tăng cường trải nghiệm người dùng bằng cách phục vụ hình ảnh phù hợp nhất cho từng thiết bị.
3. Thẻ Output
Thẻ <output> được thiết kế để hiển thị kết quả của một phép tính hoặc tương tác của người dùng. Thẻ này đặc biệt hữu ích trong các biểu mẫu khi bạn muốn hiển thị phản hồi thời gian thực dựa trên đầu vào của người dùng.
Dưới đây là một ví dụ:
<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>
Thẻ <output> là một cách đơn giản để tạo ra các biểu mẫu tương tác và động mà không cần đến JavaScript phức tạp.
4. Thẻ Data
Thẻ <data> liên kết một giá trị có thể đọc được bởi máy với đối tác có thể đọc được bởi con người. Thẻ này đặc biệt hữu ích để thêm ý nghĩa ngữ nghĩa cho nội dung của bạn, như liên kết một mã sản phẩm với tên hiển thị của nó.
Dưới đây là một ví dụ:
<p>Giá: <data value="49.99">$49.99</data></p>
Các công cụ tìm kiếm và trình thu thập dữ liệu web có thể sử dụng thông tin bổ sung này để hiểu rõ hơn về nội dung của bạn, từ đó có thể cải thiện hiệu suất SEO của bạn.
5. Thẻ Details và Summary
Thẻ <details> và <summary> hoạt động cùng nhau để tạo các phần nội dung có thể mở rộng. Tính năng này rất phù hợp cho việc tạo câu hỏi thường gặp (FAQ), nội dung có thể thu gọn, hoặc bất kỳ tình huống nào mà bạn muốn ẩn và hiển thị thông tin.
Dưới đây là một 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>
Các thẻ này dễ dàng triển khai và cung cấp trải nghiệm người dùng tốt hơn bằng cách giảm lượng thông tin hiển thị cùng lúc, giúp trang của bạn sạch sẽ và dễ đọc hơn.
Kết Luận
HTML đã phát triển đáng kể, và những tính năng này cho thấy sức mạnh và sự linh hoạt của nó. Bằng cách tích hợp những thẻ ít được biết đến này vào các dự án của bạn, bạn có thể tạo ra các trang web đáp ứng, động và thân thiện với người dùng hơn mà không cần phụ thuộc nhiều vào các thư viện và framework bên ngoài. Vì vậy, hãy thử những tính năng HTML này – bạn có thể sẽ ngạc nhiên về việc chúng có thể cải thiện quy trình phát triển của bạn đến mức nào.
Cảm ơn anh em đã đọc bài viết của mình. Hi vọng bài viết sẽ giúp ích cho anh em.
Anh em hãy theo giõi mình để có thêm nhiều bài viết hay và bổ ích nhé !
Xem bài viết gốc tại đây