10 HTML Tags that are Overlooked but Should be Used.
With the popularity of CSS, the Div tag has been painfully overused. Here is a list of HTML tags that will help you use HTML the way it was intended.
<abbr>
This HTML tag defines an abbreviated phrase.
1 |
<acronym>
This HTML tag defines an acronym. The difference between an acronym and an abbreviation is that it can be spoken as if it was a word.
<address>
This HTML tag defines user contact information
1 2 3 4 5 |
<base>
This HTML tag specifies the default target for links or default address.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <head> <!-- default address for images --> <base href="http://www.example.com/images/" /> <!-- default target for links --> <base target="_blank" /> </head> <body> <!--Actual address is http://www.example.com/images/logo.gif --> <img src="logo.gif" /> <!-- Target for link will be _blank --> <a href="http://www.example.com">Link</a> </body> |
<blockquote>
This HTML tag defines a long quotation.
1 2 3 4 5 6 | <blockquote> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pellentesque vehicula porttitor. Nam turpis ante, volutpat id blandit eget. </blockquote> |
<cite>
This HTML tag defines a citation.
<del>
This HTML tag defines deleted text, default style is a strike through.
<fieldset>
This HTML tag defines a border around elements in a form.
1 2 3 4 5 6 |
<ins>
This HTML tag defines newly added content.The default style is an underline.
<legend>
This HTML tag defines a caption for a form’s fieldset.
1 2 3 4 5 6 7 |
Hopefully these will help. Using the proper tags for the proper content makes sense of your content, and you can style them just as well as a Div. Start using these and make the web a more beautiful place for developers.
For a full list of HTML elements visit w3School’s list of HTML tags.
Very intersting – thanks
Nice! RT in my Twitter! My english is a little poor!:)
some tags from list are used in MVC T4 templates
The label tag is dreadfully overlooked.
Good Call. The Label tag is definitely overlooked, and very important.
A list is fine, but how’s the support on these? I know many version of IE don’t support abbr at all; what’s the adoption on the rest of these?
The abbr tag is supported by all major browsers except IE 6 and lower. The only other one that isn’t supported is acronym tag which isn’t supported by IE 5.5 and lower. I would still use them even though IE 6 doesn’t support them. Granted you won’t get the functionality that the newer browsers give you, but at least the tag is in place when IE 6 is obsolete, which should be pretty soon. The rest of the tags are supported by all major browsers. You can go to the list at w3schools and click on each tag and it will tell you how it is supported.
In your example for ‘base’ up above, shouldn’t that first one be instead of href? Since an img has no href.
In your example above for base, shouldn’t ‘href’ be ’src’? As img has no href.
Good eye. That’s what I initially thought as well when I first started using it. It would be more intuitive if it was src and not href. It is suppose to be an href though. You can check out the html reference here.
From the content point of view, these tags are really useful. But why and how these things were deprecated unofficially?
That’s a good question. Personally I think it was supply and demand. Internet Explorer didn’t support them for the longest time because people weren’t using them. All of the structure elements were pushed forward because there was no CSS to layout your website, and the other tags were left behind. That’s just my opinion though.
I think you ought to have included the trio of tags in this list. Very handy for styling related “blocks” of content, yet often overlooked, because people seem to think it’s only good for glossaries and such.
@Lee Dumond
Whoops, the tags didn’t render in my previous comment. Was referring to <dl>, <dt>, <dd> trio there.
Thanks for the <de>, it’s always good to stay up to date on css solutions.