Những thẻ HTML đặc biệt tăng kỹ năng phát triển web của bạn

HTML là một ngôn ngữ đơn giản, nhưng số lượng thẻ của nó thường lớn hơn nhiều người vẫn nghĩ. Dưới đây là những thẻ HTML độc đáo mà bạn có thể sử dụng cho phát triển web tốt hơn.

Là một lập trình viên web, bạn nên thông thạo các thẻ HTML như <div>, <p> và <img> đại diện cho cấu trúc và nội dung của trang web. Tuy nhiên, ngôn ngữ HTML cung cấp nhiều hơn thế.

Bằng cách khám phá những thẻ độc đáo dưới đây, bạn có thể nâng cao chức năng của ứng dụng web, khiến chúng trở nên nổi bật giữa đám đông.

<details> và <summary>

Giả sử bạn có nhiều thông tin hoặc nội dung không muốn làm choáng ngợp người đọc ngay lập tức. Thẻ <details> và <summary> sẽ giúp bạn.

Những thẻ này hoạt động cùng nhau để tạo ra một phần có thể mở rộng với tiêu đề hoặc phần tóm tắt mà người dùng web có thể click vào để hiển thị chúng. Mặc định, nội dung trong thành phần chi tiết sẽ không hiện, giữ cho trang của bạn luôn gọn gàng và có tổ chức.

Khách truy cập có thể dễ dàng click vào phần tóm tắt để truy cập thông tin bị ẩn.

<details>
  <summary>Click để xem nhiều thông tin hơn</summary>

  <p>Nội dung này mặc định sẽ bị ẩn nhưng sẽ hiện khi người dùng click vào phần tóm tắt.</p>
</details>

Với những thẻ này, bạn có thể ẩn các phần lớn của text, code hoặc thông tin khác, cung cấp trải nghiệm thân thiện người dùng trong khi vẫn duy trì thiết kế gọn gàng. Thậm chí chúng có thể giúp bạn cải thiện kỹ năng như một nhà thiết kế giao diện.

<mark>

Thẻ <mark> cho phép bạn highlight các phần cụ thể của nội dung, làm chúng nổi bật. Khi dùng thành phần <mark>, các trình duyệt thường áp dùng màu nền vàng cho text bên trong nhằm thu hút sự chú ý của người đọc.

Tính năng này đặc biệt hữu ích khi bạn muốn nhấn mạnh từ khóa, các cụm từ quan trọng hoặc kết quả trên trang web.

<p>
 Bạn có thể dùng thẻ <mark>mark</mark> để highlight từ hoặc cụm từ quan trọng.
</p>

Ví dụ, nếu web của bạn có chức năng tìm kiếm, bạn có thể dùng thẻ <mark> để highlight truy vấn tìm kiếm phù hợp trong kết quả, giúp người dùng tìm thấy thông tin liên quan dễ dàng hơn.

<s>

Đã bao giờ bạn rơi vào tình huống nội dung trang web cũ hay không còn liên quan nhưng vẫn muốn hiện nó vì mục đích lịch sử hay cho thấy những thay đổi theo thời gian?

Nhập thẻ <s>. Nó là chữ viết tắt của strikethrough (gạch ngang) và hiển thị bất kỳ nội dung bên trong thành phần này với một đường thẳng ở giữa.

<p>
  Sản phẩm <s>out-of-stock</s> hiện đang được giảm giá.
</p>

Ở ví dụ này, text out-of-stock sẽ hiện với một đường kẻ đi qua nó, cho biết rằng trạng thái hàng trong kho đã thay đổi.

<time>

Khi muốn thêm ngữ nghĩa cho ngày tháng và thời gian trong nội dung của bạn, thẻ <time> sẽ rất hữu ích.

Dùng thuộc tính datetime, bạn có thể xác định phiên bản ngày tháng hoặc thời gian mà máy có thể đọc, giúp trình duyệt, công cụ tìm kiếm và trình đọc màn hình hiểu nội dung.

<p>
  Bản tuyên ngôn độc lập được ký vào ngày
  <time datetime="1776-07-04">4/7/1776</time>.
</p>

Bằng cách dùng thẻ <time>, bạn cho nội dung có cấu trúc hơn và giúp nhiều người dễ truy cập nó hơn, bao gồm cả người khuyết tật dùng trình đọc màn hình.

<bdi>

Quản lý văn bản ở nhiều ngôn ngữ trên trang web đôi khi thật sự là một thử thách, nhất là trong trường hợp mỗi phần lại yêu cầu định dạng khác nhau.

Thẻ <bdi> sẽ “cứu” bạn trong trường hợp này bằng cách cô lập một phần văn bản mà trình duyệt sẽ xử lý khác do những yêu cầu khác biệt về ngôn ngữ.

<p>
<bdi>5,000</bdi> người đã tham dự hội thảo này.
</p>

Ở ví dụ này, thành phần <bdi> bao gồm số 5,000. Điều này đảm bảo nếu text xung quanh ở một ngôn ngữ khác hay yêu cầu định dạng khác, nó sẽ không ảnh hưởng tới số.

Học cách dùng những thẻ HTML trên có thể cải thiện đáng kể kỹ năng phát triển web của bạn. Vì thế, đừng ngại thử nhé!