10 điều bạn có thể làm được mà chỉ cần HTML

Ngày nay, bạn có thể tìm một thư viện JS cho mọi tính năng mà bạn cần trong một trang web. Nhưng nhiều khi điều đó trở thành sự lạm dụng quá mức khi mà HTML cũng có thể làm được điều tương tự. Hơn nữa, việc sử dụng thư viện JS thừa thãi sẽ làm chậm trang web của bạn, ảnh hưởng tới trải nghiệm người dùng.

Bài viết này liệt kê những thứ mà có thể bạn chưa biết là chúng hoàn toàn có thể thực hiện được chỉ với HTML.

1. Menu thả xuống với văn bản có thể tìm kiếm được

https://codepen.io/ananyaneogi/embed/BgZMJM?height=600&default-tab=result&embed-version=2

2. Hộp thoại

https://codepen.io/ananyaneogi/embed/QXMdbb?height=600&default-tab=result&embed-version=2

3. Đo lường tiến độ

https://codepen.io/ananyaneogi/embed/PrKbey?height=600&default-tab=result&embed-version=2

4. Mở rộng/thu gọn chi tiết

https://codepen.io/ananyaneogi/embed/QXgXmd?height=600&default-tab=result&embed-version=2

5. Hiển thị bàn phím di động chính xác dựa trên loại đầu vào

https://codepen.io/ananyaneogi/embed/dBzZvq?height=600&default-tab=result&embed-version=2

6. Thêm một bộ chọn màu đơn giản

https://codepen.io/ananyaneogi/embed/ZdJvyM?height=600&default-tab=result&embed-version=2

7. Tô sáng đoạn văn bản nổi bật

https://codepen.io/ananyaneogi/embed/WqEzPo?height=600&default-tab=result&embed-version=2

8. Tạo một liên kết số điện thoại trực tiếp

Tương tự như liên kết email với mailto, chúng tôi cũng có thể tạo liên kết số điện thoại trực tiếp.

<a href=”tel:+917272727272″>+91-7272727272</a>

9. Biểu thị văn bản bị xóa hoặc được chèn vào

https://codepen.io/ananyaneogi/embed/LKjmZK?height=600&default-tab=result&embed-version=2

10. Chỉnh sửa nội dung trang

https://codepen.io/ananyaneogi/embed/RzZQRL?height=600&default-tab=result&embed-version=2

Chú ý: Không phải tất cả các trình duyệt đều đã triển khai những phần tử và thuộc tính được kể trên. Nhưng chúng ta vẫn có thể sử dụng những thứ này với những cải tiến tiến bộ.

HTML là nền tảng của bất kỳ trang web nào, thật là khôn ngoan khi thực sự chú ý đến nó. Đánh dấu ngữ nghĩa không chỉ giúp SEO mà còn tăng tính tiếp cận cho trang web của bạn.

Nếu bạn còn biết bất cứ điều thú vị nào có thể thực hiện được với HTML, hãy chia sẻ phía dưới bình luận cho mình biết nhé!

Theo: Ananya Neogi