3 HTML tag hữu ích mà bạn có thể chưa biết
10/11/2022 01:26
Các nhà phát triển front-end phải quen thuộc với các thẻ HTML vì đây là môi trường tự nhiên của họ hàng ngày. Khám phá thêm 3 HTML tag hữu ích mà bạn có thể chưa biết ngay sau đây
Ngày nay, khả năng truy cập (A11y) là rất quan trọng trong tất cả các giai đoạn xây dựng các sản phẩm phần mềm tùy chỉnh. Bắt đầu từ phần thiết kế UX / UI, nó đi sâu vào các cấp độ nâng cao của việc xây dựng các tính năng trong mã. Nó cung cấp rất nhiều lợi ích cho các nhà phát triển làm việc để tăng DX, nhưng quan trọng hơn là cho người dùng cuối. Một trong số a11 phần đó trong HTML là các thẻ ngữ nghĩa và đó là những gì tôi muốn đề cập ở đây.
Các nhà phát triển front-end phải quen thuộc với các thẻ HTML vì đây là môi trường tự nhiên của họ hàng ngày. Có lẽ tất cả các bạn đều biết một số thẻ cơ bản như <header>, <section>, <footer>v.v. Nhưng, chẳng hạn, bạn có biết rằng bạn có thể đề xuất khoảnh khắc ngắt từ chỉ bằng HTML mà không cần CSS không?
WBR
Giả sử bạn đang làm việc trên một số trang web hoặc ứng dụng cho một khách hàng người Đức. Như bạn đã biết, các từ tiếng Đức có thể rất dài. Vì vậy, bạn có thiết kế với một số nội dung văn bản bạn phải tái tạo bằng mã và nội dung này phải phá vỡ trong những khoảnh khắc rất cụ thể. Đây là <wbr>thẻ để giúp bạn.
<p>Geburtstags<wbr>kuchen</p>METER
Hãy tưởng tượng bạn đang xây dựng một ứng dụng quản lý lưu trữ đĩa. Bạn cần phải hiển thị bằng cách nào đó trong giao diện người dùng dung lượng lưu trữ còn trống và bạn thực sự muốn làm cho nó dễ truy cập nhất có thể. Đây chỉ là một trường hợp sử dụng hoàn hảo cho <meter>thẻ. Nó sẽ chỉ cho bạn giá trị trong một phạm vi xác định. Một điều thú vị khác về thẻ này là các thuộc tính của nó:
- thấp → khi giá trị hiện tại thấp hơn giá trị thấp đã cài đặt, vạch của đồng hồ sẽ chuyển sang màu đỏ;
- tối ưu → khi giá trị hiện tại cao hơn giá trị thuộc tính tối ưu, vạch của đồng hồ sẽ trở thành màu xanh lục;
- cao → khi giá trị cao thấp hơn giá trị tối đa và cao hơn giá trị tối ưu, vạch của đồng hồ sẽ có màu cam. Nếu không, nó sẽ có màu xanh lục.
Bạn cũng có thể biết một thẻ tương tự, đó là tiến trình. Vì vậy, thực sự sự khác biệt giữa chúng là gì? Thẻ tiến trình nên được sử dụng cho các nhiệm vụ đang diễn ra. Nói cách khác, hãy sử dụng thẻ tiến trình khi bạn giải quyết một công việc cụ thể. Với thẻ đồng hồ, nó nên được sử dụng để hiển thị mức sử dụng đĩa hoặc bộ nhớ. Một điểm khác biệt nữa là thẻ đồng hồ không được IE hỗ trợ và đó thực sự là nhược điểm duy nhất của thẻ này.
DEL và INS
Bạn đã bao giờ tự hỏi làm thế nào để xây dựng một chỉ báo có thể truy cập được về các phần nội dung đã xóa và được thêm vào (khác biệt trong GitHub hoặc thông báo qua email từ Jira khi vé đã được cập nhật)? Bạn chỉ cần bọc nội dung đã xóa bằng <del>thẻ. Ví dụ <del><p>Just deleted content</p></del>:. Để chỉ hiển thị phần nội dung đã thêm, bạn có thể sử dụng <ins>thẻ theo cách chính xác. Thẻ này cũng cung cấp hai thuộc tính:
- cite → uri của một tài nguyên giải thích lý do tại sao phần này đã được thêm vào;
- datetime → dữ liệu và thời gian thay đổi
Tất nhiên, có nhiều thẻ hữu ích hơn trong HTML . Tôi thực sự khuyên bạn nên sử dụng tất cả chúng khi có thể và phù hợp. Khách hàng và người dùng ứng dụng của bạn sẽ cảm ơn bạn vì cách tiếp cận như vậy. Tuy nhiên, hãy cẩn thận vì một số thẻ có thể không được dùng nữa.
