10 Underutilized or Misunderstood HTML Tags_HTML/Xhtml_Web Design

Here are 10 underutilized or misunderstood HTML tags. They may not be widely known, but they can be very useful in certain situations.
Web developers often want to know and master multiple languages. As a result, learning all the ins and outs of a language can be tricky, but it is easy to find that you are not taking full advantage of the special but useful tags.
Translated from: TutsPlus
Unfortunately we have not yet tapped into the full potential of those more obscure HTML tags. But it's never too late to re-enter the field and start writing code to tap into the power of these untapped labels.
Here are 10 underutilized or misunderstood HTML tags. They may not be widely known, but they can be very useful in certain situations.
1.
It seems that everyone is familiar with the

tag, but do you know

’s little brother ? allows you to define text within the element as a reference. Normally, browsers will italicize the text within the tag, but this can be changed with a little CSS. The
tag is useful for citing references in directories or other websites. Here is an example of using the cite tag in a paragraph:
David Allen’s groundbreaking organizational book Get Your Work Done takes forgetting by storm. 2. The
tag is a great way to define grouping of options within a select tag. For example, if you need to group a list of movies by time, you can do this:
1 2
label for="showtimes">Showtimes/ label> select id="showtimes" name= "showtimes"> optgroup label="One PM">/ optgroup> option value="titanic">Titanic/option> option value= "nd">Slumdog Millionaire/option> option value="wab">Shrek/option> optgroup label="Two o'clock in the afternoon">/optgroup> option value="bkrw">The Lion King/option> option value="stf" >Superman for All/option> /select>
Demo:
Release time Titanic Slumdog Millionaire Shrek The Lion King Superman for All

It can visually differentiate the movie list. 3.
is a way of defining or explaining more about a set of words. When you mouse over text using the tag, a box showing the content of the title tag will appear below. for example:
1
Micro blog websiteacronym title="Founded in 2006"> Twitter/acronym> has been down a lot lately.
Example:
Micro-blogging website Twitter has been frequently down recently. 4.

The

tag is a very inconspicuous little tag, but that doesn’t mean it’s useless. As the name suggests

allows you to semanticize tags in HTML. This compact tag will display the content within the tag in italics by default. Of course, the default style can be easily changed using styles.
1 2 3 4
address>Glen Stansberry 1234 Web Dev Lane Anywhere, USA /address> 5. and
If you want to use tags to display edited versions, and are perfect for that. As the name suggests, highlights added content with underlines, while displays removed information with strikethroughs.
1
John del>likes/del> ins >LOVES/ins> his new iPod.
Example:
Everyone likes abandoned Zblog. 6.
It seems that form elements are the easiest to forget when to mark text. For form elements, the most commonly forgotten one is the tag. Not only is it a convenient way to mark up text, the tag can also be passed a "for" attribute to specify which element will be associated. Not only is it easy to control with styles, it also allows you to make the title clickable.
1 2
label for="username">username/label> input id="username" type= "text" /> 7.

Fieldset is a small tag that you can use to add logical groupings to your form elements. The

tag will draw a box around the element inside it. Another point is that you can add the tag in the fieldset to define the title of the group.
1 2 3 4 5 6 7
form>fieldset> legend>Are you smarter than a 5th grade student? /legend> Of courseinput name="yes" type="radio" value="yes" /> Don't knowinput name="no" type="radio" value="no" /> /fieldset> /form>
Example: 8. The
tag is quite similar to the tag, except that the tag is only used to define abbreviated words. Just like , you can define a title attribute for this tag. When the user places the mouse over the abbreviation text, the entire content will be displayed below. The tag is rarely used, but is very useful for screen readers, spell checkers, and search engines.
1
abbr title="Brainless">NC/abbr> is an uncivilized term.
Example:
is an uncivilized term. is an uncivilized term. 9. rel
Rel can be an extremely useful attribute, any HTML element can have a rel attribute applied to it. It helps to pass extra parameters that are not otherwise specified. This is very useful when using JavaScript in HTML. If you have a link that you want to edit inline, you can add:
1
a rel="clickable" href= "page.html">This link is editable. /a>
Javascript will look for a link with the rel attribute "clickable", apply some Ajax and allow it to be edited inline. This is just one of the many techniques you can use the rel attribute, as its potential is endless. Interested friends can study in depth W3C's introduction to Rel. 10. The
tag is an unbelievably unknown tag. Frankly, I doubt you'll ever come across this label, because it's almost never used. (Indeed, I had barely seen this label before writing this article). In fact, this label is a soft line break, which allows you to specify a line break point within a certain line, indicating that the line can be broken at this point, but the line break will not necessarily occur, and the line will only be broken when there is a need to break the line. Using this tag is great if you want to avoid horizontal scrollbars.
Example:
Below is a 200 pixel wide box with no overflow defined. NoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbr
HavaWbrHavaWbrHavaWbrHavaWbrHavaWbrHavaWbrHavaWbrHavaWbr
If you want to achieve the same effect without using the tag, you can try this or . It is said that none of these three tags are fully supported by all browsers. You can use this article to check the support of each browser for the three tags.
PS: It was quite difficult to translate this article. Shenfei deeply felt the charm of semantics and the power of HTML tags. I believe there are many tags that we did not realize. As a result, everyone knows the common tags. Familiar and uncommon tags that everyone doesn’t use. As I explained in an article before, a big part of "semantic" is to use the right tags in the right places instead of just using divs. If we can understand more HTML tags, we can write more semantic HTML code, which can also greatly reduce the difficulty and workload of writing CSS, and make our page structure more reasonable.