Giới thiệu
HTML, hay HyperText Markup Language, là ngôn ngữ đánh dấu nền tảng cho quá trình phát triển một trang web. Hầu hết các lập trình viên điều quen thuộc với cấu trúc và các thành phần cơ bản của HTML. Tuy nhiên, có một số tính năng mạnh mẽ mà nhiều người vẫn chưa biết đến hoặc chưa tận dụng hết. Trong bài viết này, chúng ta sẽ cùng tìm hiểu 5 tính năng ít người dùng nhưng lại cực kỳ hữu ích trong HTML.
1. Element Dialog
Element dialog cho phép bạn tạo các hộp thoại modal mà không cần phải sử dụng đến thư viện JavaScript ngoài. Nó rất hữu ích để tạo các cảnh báo, hộp thoại xác nhận hoặc các cửa sổ pop-up tùy chỉnh. Bằng cách sử dụng element này, bạn có thể quản lý việc mở hoặc đóng hộp thoại một cách dễ dàng và cung cấp trải nghiệm người dùng tốt hơn.
Ví dụ:
html
<dialog id="myDialog">
<p>Đây là 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. Element Picture
Element picture rất cần thiết để tạo hình ảnh phản hồi phù hợp với kích thước và độ phân giải của nhiều thiết bị khác nhau. Nó cho phép bạn chỉ định nhiều nguồn hình ảnh và tự động chọn nguồn tốt nhất cho thiết bị hiện tại, từ đó nâng cao trải nghiệm người dùng.
Ví dụ:
html
<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 phản hồi">
</picture>3. Element Output
Element output được thiết kế để hiển thị kết quả của các phép tính hoặc tương tác của người dùng. Đây là một công cụ hữu ích trong các biểu mẫu, khi bạn muốn cung cấp phản hồi trực tiếp dựa trên dữ liệu đầu vào của người dùng mà không cần viết nhiều mã JavaScript.
Ví dụ:
html
<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. Element Data
Element data giúp bạn kết nối các giá trị có thể đọc được bằng máy với các giá trị dễ hiểu hơn cho con người. Nó rất hữu ích trong việc cung cấp ngữ nghĩa cho 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 sản phẩm hiển thị.
Ví dụ:
html
<p>Giá: <data value="49.99">$49.99</data></p>Các công cụ tìm kiếm có thể tận dụng thông tin này để hiểu sâu về nội dung của bạn, từ đó cải thiện hiệu suất SEO.
5. Element Details và Summary
Hai element này hoạt động cùng nhau để tạo ra các phần nội dung có thể mở rộng. Tính năng này rất hữu ích cho mục Câu hỏi thường gặp (FAQ) hoặc bất kỳ nội dung nào bạn muốn ẩn và hiển thị theo yêu cầu.
Ví dụ:
html
<details>
<summary>Thông tin thêm</summary>
<p>Đây là nội dung ẩn mà bạn sẽ thấy khi nhấp vào "Thông tin thêm".</p>
</details>Các yếu tố này giúp người dùng giảm bớt thông tin hiển thị một cách đồng thời, làm cho trang web trở nên gọn gàng và dễ đọc hơn.
Kết luận
HTML đã có những bước tiến vượt bậc và các tính năng này chứng minh rằng ngôn ngữ này ngày càng mạnh mẽ và linh hoạt hơn. Bằng cách tích hợp các element ít được biết đến vào các dự án của mình, bạn có thể tạo ra những trang web nhanh chóng, năng động và thân thiện với người dùng mà không cần phải phụ thuộc nhiều vào các thư viện và framework bên ngoài. Hãy thử nghiệm với các tính năng hữu ích này trong HTML, có thể bạn sẽ gặp nhiều bất ngờ tích cực trong công việc của mình. Cảm ơn bạn đã theo dõi bài viết này.
source: viblo
