Here are 10 underutilized or misunderstood HTML tags. Maybe they are not very well known, but they are very useful in certain situations.
Web developers often want to understand and master multiple languages, and as a result, learning everything in a language is tricky, but it is easy to find that you are not fully leveraging the more special but useful tags.
Translated from: TutsPlus
Unfortunately we haven't yet gotten into all the potential of those lesser-known HTML tags. But it will never re-enter the realm too late and start writing code to uncover the energy of these unexplored tags.
Here are 10 underutilized or misunderstood HTML tags. Maybe they are not very well known, but they are very useful in certain situations.
1. <cite>
It seems that everyone is familiar with the <blockquote> tag, but do you know the <blockquote>'s little brother <cite>? <cite> allows you to define the text inside an element as a reference. Generally, the browser will use italics to display the text in the <cite> tag, but this can be changed with a little CSS.
The <cite> tag is useful for references to directories or other websites. Here is an example of using the cite tag in the paragraph:
David Allen's breakthrough organizational book accomplishing your work has brought a storm to forget. 2. <optgroup>
The <optgroup> tag is a great way to define grouping options in the select tag. For example, if you need to group movie lists by time, then you can do this:
12
<label for=showtimes>Release time</label><select id=showtimes name=showtimes> <optgroup label=1:00 pm></optgroup> <option value=titanic>Titanic</option> <option value=nd>Slumdog Millionaire</option> <option value=wab>Monster Shrek</option> <optgroup label=2:00 pm></optgroup> <option value=bkrw>The Lion King</option> <option value=stf>Superman</option> </select>
Demo:
It can visually distinguish movie lists. 3. <acronym>
<acronym> is a way to define or interpret a set of texts. When you put the text using the <acronym> tag with your mouse, a box showing the content of the title tag will appear below. for example:
1
Weibo website <acronym title=Founded in 2006> Twitter</acronym> has been frequently downtime recently.
Example:Weibo website Twitter has been downtime recently. 4. <address>
The <address> tag is a very inconspicuous little tag, but that doesn't mean it's useless. As the name suggests, <address> allows you to semanticize tags in HTML. This small label will display the contents in the label in the default italics. Of course, using styles can easily change the default style.
1234
<address>Glen Stansberry1234 Web Dev LaneAnywhere, USA</address> 5. <ins> and <del>
If you want to use tags to display edited versions, <ins> and <del> are just right. As the name suggests, <ins> highlights added content with an underscore, while <del> uses a strikethrough to display removed information.
1
John <del>likes</del> <ins>LOVES</ins> his new iPod.
Example: Everyone like Abandoned Zblog. 6. <label>
It seems that form elements are most likely to forget when to mark text. For form elements, the most common thing I forget is the <label> tag. Not just a convenient way to tag text, the <label> tag can also pass a for attribute to specify which element will be associated. <label> is not only easy to control with styles, but also allows you to make the title clickable.
12
<label for=username>Username</label><input id=username type=text /> 7. <fieldset>
Fieldset is a small tag that you can use to add logical groupings to your form elements. The <fieldset> tag will draw a box around the elements inside it. Another point is that you can add a <label> tag to the fieldset to define the title of the group.
1234567
<form><fieldset><legend>Are you smarter than a 5-year-old student? </legend>Of course<input name=yes type=radio value=yes />I don't know<input name=no type=radio value=no /></fieldset></form>
Example: 8. <abbr>The <abbr> tag is quite similar to the <acronym> tag, the difference is that the <abbr> tag is only used to define abbreviations. Just like <acronym>, you can define a title property for this tag. When the user places the mouse over the abbreviation text, the entire content will be displayed below. <abbr> Tags are rarely used, but are very useful for screen readers, spell checkers, and search engines.
1
<abbr title=Brainless>NC</abbr> is an uncivilized term.
Example:It is a not very civilized term. It is a not very civilized term. 9. rel
Rel can be an extremely useful property, and any HTML element can apply a rel property. It helps pass additional parameters without additional specified. This is very useful when using JavaScript in HTML. If you have a link you want to edit within the line, you can add:
1
<a rel=clickable href=page.html> This link is editable. </a>
Javascript will look for a link with a rel attribute clickable and apply some Ajax and allow it to be edited within the line. This is just one usage of many techniques you can use the rel attribute because its potential is endless. Interested friends can study W3C's introduction to Rel in depth. 10. <wbr>
<wbr>The tag is an unbelievable and unfamous tag. Frankly speaking, I also doubt you will be exposed to this tag because it is almost never used. (Indeed, I hardly saw this tag before I wrote this post). In fact, this tag is a soft line break, allowing you to specify a line break point in a certain line, indicating that line breaks can be broken at that point, but it does not necessarily break it, but only breaks when it is necessary. If you want to avoid horizontal scroll bars, then using this tag is great.
Example:Below is a 200 pixel wide box with no overflow defined. NoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbr
HavaWbr HavaWbr HavaWbrHavaWbrHavaWbrHavaWbrHavaWbrHavaWbrHavaWbr HavaWbr
If you want to achieve the same effect without using the <wbr> tag, you can try it or ­. It is said that none of these three tags are fully supported by all browsers. You can use this article to view the support of each browser for three tags.
PS: After translating this article with difficulty, Shenfei deeply felt the charm of semantics and the power of HTML tags. I believe we have not realized many tags. As a result, everyone is familiar with common tags, and everyone can't use uncommon tags. As I explained in an article before, a large part of semantics is to use the right labels in the right places, rather than just div them. If we can learn more HTML tags, we can write more semantic HTML code, which can greatly reduce the difficulty and workload of writing CSS, and make our page structure more reasonable.