Sau một thời gian, mình đã vô tình tìm hiểu được vài tag HTML thú vị nên muốn chia sẻ với mọi người, nếu bạn biết rồi thì cho qua nhé!
22. <dfn>
Đầu tiên sẽ là tag <dfn>, tag này dùng để định nghĩa một thuật ngữ (xuất hiện lần đầu trong tài liệu) trong HTML. Cách sử dụng của nót tương tự như các từ in nghiêng ở giữa đoạn văn bản.
Tag cha gần nhất của tag <dfn> phải chứa định nghĩa/giải thích về thuật ngữ bên trong tag <dfn>.
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dfn</span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dfn</span><span class="token punctuation">></span></span> is the hypertext markup language<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> |
Hầu hết các trình duyệt sẽ hiển thị phần tử <dfn> với định dạng CSS như sau:
1 2 3 4 | <span class="token selector">dfn</span> <span class="token punctuation">{</span> <span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Tag <dfn> được hấu hết các trình duyệt hỗ trợ nên bạn cứ yên tâm dùng nhé!
23. <s>
Tiếp theo là tag <s>, tag này dùng để chỉ định một văn bản không còn đúng, chính xác hoặc phù hợp nữa. Văn bản sẽ được hiển thị với một dòng gạch ngang (gạch bỏ) đi.
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>s</span><span class="token punctuation">></span></span>Java<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>s</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ins</span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ins</span><span class="token punctuation">></span></span> is the hypertext markup language.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> |
Vì có là dòng gạch ngang nên định dạng CSS của tag sẽ như này:
1 2 3 4 | <span class="token selector">s</span> <span class="token punctuation">{</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> line-through<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Tag <s> sẽ không dùng để định nghĩa văn bản thay thế hoặc muốn xoá, nếu muốn xử lý các trường hợp ấy nên sử dụng tag <del> nha.
24. <legend>
Tag <legend> định nghĩa một chú thích cho các phần tử <fieldset>.
1 2 3 4 | <fieldset> <legend>Chú thích<legend> <fieldset> |
Cú pháp sử dụng:
1 2 | <legend thuoctinh=<span class="token string">"giatri"</span>></legend> |
Thuộc tính của <legend> là align: top/bottom/left/right và các thuộc tính của tag này không hỗ trợ trong HTML5.
Ví dụ sử dụng:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Personalia:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>First name:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Last name:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Age:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>age<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> |
Tag này cũng được hỗ trợ trong đa số các trình duyệt.
25. <xmp>
Tag <xmp> xác định phần văn bản định dạng trước. Tag này là tag cũ (Deprecated Tag).
Ví dụ:
1 2 3 4 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> Trong HTML, co <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>xmp</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span> de in dam van ban, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span> de in nghieng van ban <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>xmp</span><span class="token punctuation">></span></span>. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> |
Kết quả của đoạn code trên sẽ là :
1 2 3 | Trong HTML, co <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span> de in dam van ban, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span> de in nghieng van ban. |
26. <kbd>
Tag <kbd> là thẻ cụm từ. Nó định nghĩa thông tin nhập từ bàn phím. Nó là một thẻ phrase.
1 2 3 4 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Ban hay su dung <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>Ctrl<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span>+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>Shift<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span>+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>T<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> |
Tag này được dùng khi một tài liệu đơn giản chỉ cần hiển thị văn bản người dùng nhập từ bàn phím, không nên nhầm lẫn với tag <input> nha.
Định dạng mặt định CSS của tag này là:
1 2 3 4 | <span class="token selector">kbd</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> monospace<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Tổng kết
Trên là một số trong các tag ít khi được sử dụng và thú vị mà mình biết. Qua bài chia sẻ, mình hi vọng sẽ truyền cảm hứng cho bạn để có những ý tưởng mới và tìm thấy một số trường hợp sử dụng cho các tag này. Đây chắc sẽ là phần cuối cùng của seri “Những đứa con rơi của HTML”, vì ở đâu ra mà nhiều con rơi thế đúng không :v Cảm ơn bạn đã dành thời gian đọc bài viết! Các bạn có thể tham khảo các tài liệu sau: