After a while, I accidentally found out some interesting HTML tags, so I wanted to share them with everyone, if you know, then let it go!
22. <dfn>
The first will be the <dfn>
tag, which is used to define a term (which appears for the first time in the document) in the HTML. Its usage is similar to words in italics in the middle of a paragraph.
The closest parent tag of the <dfn>
tag must contain a definition / explanation of the term inside the <dfn>
tag.
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> |
Most browsers will render an <dfn>
element with the following CSS format:
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> |
The <dfn>
is <dfn>
by most browsers, so feel free to use it!
23. <s>
Next is the <s>
tag, which is used to designate a text that is no longer correct, exact, or relevant. The text will be displayed with a dash (strikethrough) line.
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> |
Since it is a dash, the CSS format of the tag will look like this:
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> |
The <s>
tag will not be used to define the replacement text or to remove, if you want to handle such cases, you should use the <del>
tag.
24. <legend>
The <legend>
tag defines a caption for <fieldset>
elements.
1 2 3 4 | <fieldset> <legend>Chú thích<legend> <fieldset> |
Syntax of use:
1 2 | <legend thuoctinh= <span class="token string">"giatri"</span> ></legend> |
The <legend> attribute is align: top / bottom / left / right and the attributes of this tag are not supported in HTML5.
Usage example:
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> |
This tag is also supported in most browsers.
25. <xmp>
The <xmp>
defines the pre-formatted text. This tag is the old tag (Deprecated Tag). For example:
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> |
The result of the above code will be:
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>
The <kbd
> tag is the phrase tag. It defines the information entered from the keyboard. It’s a 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> |
This tag is used when a simple document only needs to display the text the user enters from the keyboard, not to be confused with the <input>
tag.
The default CSS format for this tag is:
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> |
summary
Above are some of the tags that are seldom used and interesting that I know. Through the sharing, I hope to inspire you to have new ideas and find some use cases for these tags. This will probably be the last part of the series “HTML’s Fallen Kids”, because where are so many falling children: v Thank you for taking the time to read the article! You can refer to the following documents: