HTML là ngôn ngữ cơ bản và cũng là nền tảng đầu tiên khi phát triển một website. Hầu hết bất cứ lập trình viên nào cũng đều đã quá quen thuộc với các thành phần, cấu trúc trong HTML rồi đúng không nào. Tuy nhiên tôi dám chắc với các bạn rằng, vẫn còn một số tính năng vô cùng mạnh mẽ của HTML mà các bạn chưa sử dụng hết đâu, hãy cùng tìm hiểu xem nó là gì nhé.
1. Dialog
Dialog là một element HTML gốc cho phép bạn tạo hộp thoại modal mà không cần dựa vào thư viện JavaScript. Nó có thể được sử dụng cho cảnh báo, hộp thoại xác nhận hoặc cửa sổ bật lên tùy chỉnh, cung cấp cách tiếp cận ngữ nghĩa hơn cho modal.
Sau đây là ví dụ:
<dialog id="myDialog"> <p>This is a modal dialog</p> <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog> <button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>
Với element này, bạn có thể dễ dàng kiểm soát việc mở và đóng hộp thoại, đồng thời cũng dễ truy cập và dễ tạo kiểu.
2. Picture
Element này rất cần thiết để tạo ra hình ảnh phản hồi thích ứng với nhiều kích thước và độ phân giải màn hình khác nhau. Nó cho phép bạn chỉ định nhiều nguồn hình ảnh và chọn nguồn tốt nhất dựa trên khả năng của thiết bị.
Sau đây là ví dụ:
<picture> <source media="(min-width: 800px)" srcset="large.jpg"> <source media="(min-width: 400px)" srcset="medium.jpg"> <img src="small.jpg" alt="Responsive Image">
</picture>
Element này cải thiện thời gian tải và nâng cao trải nghiệm của người dùng bằng cách cung cấp hình ảnh phù hợp nhất cho từng thiết bị.
3. Output
Element này được thiết kế để hiển thị kết quả tính toán hoặc tương tác của người dùng. Nó đặc biệt hữu ích trong các biểu mẫu mà bạn muốn hiển thị phản hồi theo thời gian thực dựa trên dữ liệu đầu vào của người dùng.
Sau đây là 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>
Element này là một cách đơn giản để tạo các biểu mẫu tương tác và động mà bạn không cần sử dụng đến JavaScript chuyên sâu.
4. Data
Element này liên kết giá trị có thể đọc được bằng máy với giá trị tương ứng có thể đọc được bằng con người. Nó đặc biệt hữu ích để thêm ý nghĩa ngữ nghĩa vào nội dung của bạn, chẳng hạn như liên kết ID sản phẩm với tên hiển thị của sản phẩm.
Sau đây là ví dụ:
<p>Price: <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 nội dung của bạn, từ đó có thể cải thiện hiệu suất SEO tốt hơn.
5. Details và Summary
Hai Element này 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 hoàn hảo để tạo ra mục Câu hỏi thường gặp, nội dung có thể thu gọn hoặc bất kỳ trường hợp nào mà bạn muốn ẩn và hiển thị thông tin cho trang web của mình.
Sau đây là ví dụ:
<details> <summary>More Information</summary> <p>This is the hidden content that will be revealed when you click on "More Information".</p>
</details>
Các yếu tố này dễ triển khai và mang lại trải nghiệm tốt hơn cho người dùng bằng cách giảm lượng thông tin hiển thị cùng một lúc, giúp trang của bạn gọn gàng và dễ đọc.
Kết luận
HTML hiện đã phát triển đáng kể và các tính năng này chứng minh cho chúng ta thấy rằng HTML đã trở nên mạnh mẽ và linh hoạt như thế nào. Bằng cách kết hợp các Element ít được biết đến này vào các dự án của bạn, bạn có thể tạo các trang web phản hồi nhanh hơn, năng động hơn 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ử các tính năng HTML hữu ích này nhé, bạn có thể ngạc nhiên về mức độ chúng có thể cải thiện cho công việc của bạn đấy. Cảm ơn các bạn đã theo dõi.