Tìm hiểu về các thẻ hỗ trợ định nghĩa văn bản trong HTML5

Trong một số trường hợp khi trình bày văn bản với HTML, chúng ta thường sẽ viết tắt một số từ ngữ hay thuật ngữ để câu văn được ngắn gọn. Tuy nhiên, nếu như chúng ta muốn đảm bảo sao cho người dùng khi cần thì vẫn hiểu rõ các từ ngữ hay thuật ngữ đó thì làm sao? Có thể một số bạn lúc này sẽ nghĩ ngay đến việc hiển thị bằng các tooltip ví dụ như jQuery Tooltip chẳng hạn, nhưng thật ra thì không cần đâu vì chúng ta sẽ sử dụng đến các thẻ hỗ trợ định nghĩa văn bản có sẵn trong HTML5.

Tìm hiểu hai thẻ HTML5 hỗ trợ định nghĩa văn bản: <abbr> & <dfn>

Thẻ hỗ trợ viết tắt – <abbr>

Các bạn hãy thử rê chuột lên chữ WHO dưới đây và xem điều gì xảy ra:

WHO was founded in 1984.
Có phải các bạn thấy một tooltip hiện lên không? đó chính là nhiệm vụ của thẻ <abbr>.

Cách sử dụng rất đơn giản:

<b><abbr title=”World Health Organization”>WHO</abbr></b> was founded in 1984.

Không chỉ vậy, với các search engine như Google, Bing,… thẻ này sẽ giúp cho các search engine này hiểu được từ WHO là gì, từ đó nội dung trong trang web bạn rõ ràng cũng như một ai đó tìm kiếm trên search engine mà nhập tên đầy đủ của tổ chức WHO thì trang web của bạn sẽ có mặt trong kết quả tìm kiếm.

Thẻ định nghĩa – <dfn>

Ngoài việc, thêm thông tin cho từ viết tắt. HTML5 còn hỗ trợ ta bổ sung thông tin về định nghĩa các thuật ngữ.

Ví dụ, ta có câu:
“Ngày nay, rất nhiều doanh nghiệp sử dụng digital marketing như một chiến lược kinh doanh chủ đạo.”

Trong câu trên, ta sẽ định nghĩa digital marketing là gì, thông qua thẻ <definition> như sau:

“Ngày nay, rất nhiều doanh nghiệp sử dụng <dfn title=”Digital Marketing là hình thức marketing thông qua các thiết bị số như máy tính cá nhân, laptop, tablet, smart phone… Nó sử dụng công nghệ hoặc các nền tảng như website, email, mạng xã hội hoặc các ứng dụng để thực hiện quảng bá sản phẩm.”>digital marketing</dfn> như một chiến lược kinh doanh chủ đạo.”

"Ngày nay, rất nhiều doanh nghiệp sử dụng digital marketing như một chiến lược kinh doanh chủ đạo."

Khi trình duyệt hiển thị, ta cũng thấy cách nó thực hiện giống như xử lý viết tắt. Đó là hiển thị một tooltip khi ta rê chuột đến chữ Digital Marketing. Và cũng như thẻ abbreviation, thì thẻ definition cũng giúp cho các search engine hoặc các hệ thống khác nhận biết thông tin để thực hiện những xử lý phù hợp.

Kết luận

Như vậy thông qua tutorial này, các bạn đã biết thêm một cách để sử dụng các thẻ định nghĩa văn bản có sẵn trong HTML5 như một tooltip để diễn giải hoặc chú thích nội dung cho từ ngữ hoặc thuật ngữ nào đó, thay vì sử dụng bằng jQuery Tooltip thì đây là cách hay vì nó đơn giản là chỉ sử dụng các thẻ HTML đơn thuần đúng không nào? Hy vọng bài viết này giúp ích cho các bạn.