HTML has only a few dozen elements, but we busy developers often forget to use the right tag for the job in hand. It’s all too easy to add a <div> or a <span> when there are more suitable alternatives.
Here are five tags that may be missing from your HTML arsenal…
1. <label>
Every visible field in your <form> should have a <label>, e.g.
<label for="email" title="enter your email">email:</label>
<input type="text" id="email" name="email" />The <label> is associated with the field’s ID using the for attribute. An optional title attribute can be used to provide further information if necessary.
Labels are useful for accessibility and clicking them sets focus to the field. In the case of checkboxes and radio buttons, the clicking the label will change the field’s state, e.g.
<p>Choose your preferred newsletter format:</p>
<input type="radio" id="format_1" name="format" value="html" checked="checked" />
<label for="format_1">HTML format</label>
<input type="radio" id="format_2" name="format" value="plain" />
<label for="format_2">plain text format</label>Any number of labels can be associated with a single field. This could be useful when displaying validation error messages.
2. <fieldset> and <legend>
Forms fields can be grouped into one or more logical sections using <fieldset>. It is important to note that fields such as <input>, <select> and <textarea> should be wrapped in a block-level element such as a <fieldset> rather than the <form> element itself.
The <legend> element adds a caption title to a <fieldset>. Example:
<form action="formhandler.php" method="post">
<fieldset>
<legend>Personal Details</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="age">Age:</label>
<input type="text" id="age" name="age" />
</fieldset>
<fieldset>
<legend>Career</legend>
<label for="job">Job title:</label>
<input type="text" id="job" name="job" />
<label for="company">Company:</label>
<input type="text" id="company" name="company" />
</fieldset>
</form>
3. <optgroup>
<select> box <option> elements can be grouped into one or more logical sections using the <optgroup> tag. The label attribute assigns a heading to the optgroup.
<label for="skillset">Your primary skillset:</label>
<select id="skillset" name="skillset">
<optgroup label="web design">
<option value="ps">PhotoShop</option>
<option value="il">Illustrator</option>
<option value="il">Fireworks</option>
</optgroup>
<optgroup label="web development">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="net">ASP.NET</option>
<option value="php">PHP</option>
</optgroup>
</select>
4. <dl>, <dt>, and <dd>
Definition lists, such as dictionaries or contact details, can be created using <dl>. Each list should contain at least one definition term, <dt>, and definition description, <dd>, e.g.
<dl>
<dt>HTML</dt>
<dd>Your content is defined in Hyper-Text Mark-up Language</dd>
<dt>CSS</dt>
<dd>Your layout is defined using Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>Client-side functionality is implemented using JavaScript</dd>
</dl>
5. <q> and <cite>
<q> is similar to <blockquote> but it is used for a short quotation. <cite> contains a citation or a reference to another source, e.g.
<p><cite>Bill Gates</cite> said <q>640K ought to be enough for anybody</q>.</p>See also: HTML: The Top 5 Forgotten Elements.
Have I missed your favourite under-used tag?
Related posts:
- Practical Accessibility Tips with WCAG 2.0 Techniques for Web Content Accessibility Guidelines 2.0 is a very...
- HTML 4 Considered Harmful In this post, a frustrated James once again rallies to...
- Progressive Enhancement Techniques 1: the HTML In the first of a 3-part series, Craig explains how...
- How to Stop Spam Harvesting With Email Obfuscation Publishing your email address in a "mailto:" link is an...
- Introducing CodeBurner: the SitePoint HTML & CSS Reference Tool for Firebug CodeBurner is a new Firefox addon from SitePoint that integrates...
I used all these most of the time. TABLE is the one I find less use aside from the backend.
February 24th, 2009 at 2:18 am
The address tag is woefully underused I’ve always thought.
February 24th, 2009 at 2:19 am
http://www.w3schools.com/TAGS/tag_abbr.asp ?
February 24th, 2009 at 2:27 am
Really? You think that <label> and <dl> etc are underused? In my experience, anyone who uses html on a day to day basis, certainly anyone who has even a remote understanding of semantic html, uses <label> all the time within forms (also fieldsets… although not as much, and legend could do with being used more, i’ll admit), and I personally have worked with developers who seem to duffer from “definition list-itis”, using them waaaay too often, and for things that you really shouldnt.
I think the important thing at the end of the day, is not to point out underused tags, but to drive home the importance of using whatever ta is semantically appropriate for the information it holds.
February 24th, 2009 at 2:33 am
How about
<!DOCTYPE>. Still surprised how often this is missing.February 24th, 2009 at 2:42 am
Sorry; the 5 most under-used according to who, exactly?
February 24th, 2009 at 3:07 am
I use those tags all the time. Address for addresses, labels with the proper “for” matching the input’s ID, etc. etc.
Most underused? I would say the ones that are remotely connected to styling.
February 24th, 2009 at 3:37 am
I’m surprised how many forms don’t use tags but I have to say, I didn’t even know about the tag! I’ll be using that from now on.
February 24th, 2009 at 3:39 am
Sorry for the double-post; I didn’t read the instructions.
I’m surprised how many forms don’t use
<label> tags but I have to say, I didn’t even know about the
<optgroup> tag! I’ll be using that from now on.
February 24th, 2009 at 3:41 am
This is definitely a worthwhile read for hobbyist web designers. I’ve used HTML and CSS years, conforming to the standard, but I’ve only rarely come across some of these. The author is right though, when you’re trying to drag something together quickly, it’s easier to cobble it together with some spans and divs and still have it standards compliant, well when you haven’t heard of these tags.
I know they’re not tags, but I’ve always felt that things like specifying access keys are rarely done. Accessibility is very poor on a lot of websites.
I think the blink tag is under used ;) *hides*
February 24th, 2009 at 4:58 am
Be careful with the address tag, it should not be used for physical locations. If you need to markup a street address then you should consider using microformats.
Personally, thead and tbody have come to my rescue on my latest project, if only for styling.
February 24th, 2009 at 5:10 am
David Eglin
Excellent statement and exactly why W3C documentation exists. The trouble is the human factor involving interest and proper reasoning skills in order to use each tag where it belongs so that the overall structure is semantic. I’m astounded by how many developers apparently don’t understand the meaning of “semantic”. I love it when I come across a site properly using <abbr> or <acronym> tags properly or even at all.
February 24th, 2009 at 5:10 am
Nice work, cite and q are new to me. I’ve got plenty of places to start using those.
Too bad you had to perpetuate that false Bill Gates quote.
February 24th, 2009 at 5:22 am
I’m surprised is left out.
February 24th, 2009 at 6:30 am
I’m surprised is left out
February 24th, 2009 at 6:30 am
Bloody html stripper
February 24th, 2009 at 6:30 am
Address should only be used for the document author’s address, not just for any address that needs to be displayed on a site. I don’t often use <address> anymore as I tend to mark addresses up as Microformats vcards instead (although I s’pose the containing block could still be an <address>).
Out of the ones you’ve listed I hardly ever use optgroups, but that’s because I never have select lists that get that complicated.
The instructions about how to post code are directly under the box in which you type your reply. ;)
February 24th, 2009 at 7:30 am
Yes, I use it the same way. Although I haven’t gotten round to utilizing Microformats yet.
February 24th, 2009 at 9:23 am
<q> and <cite> are so underused, I wonder if they really serve much practical function anymore.
February 24th, 2009 at 9:31 am
jameslindeman: doctype isn’t an underused HTML tag because it’s not an HTML tag. :)
February 24th, 2009 at 10:32 am
<ins> and <del> are pretty interesting elements. In HTML they are the only elements that are allowed anywhere in a document body, regardless of which element they are inside. In XHTML 1.0, they represent the only valid way that a block level element can be included inside an inline element. Due to limitations of the DTD language, the following is valid. Call it a ‘loophole’ in DTD, the language used to validate web pages.
Of course I would strongly advise against doing so unless you really want to convey the true meaning of the <ins> or <del> elements – ie, contents that have been inserted or deleted.
February 24th, 2009 at 11:01 am
Indeed.
Also, has this post been submitted to a peer reviewed journal? Can you please provide all of the references that you used to write this post, as well as your data samples for these findings? Also, a reference from a public servant and a photocopy of your birth certificate would be highly appreciated.
</sarcasm>
February 24th, 2009 at 11:39 am
I really like <q> but I think it’s suffered from it’s spotty browser implementation. From memory good browsers add the quote marks automatically, but IE doesn’t, so you either get too many quotes or not enough.
February 24th, 2009 at 2:41 pm
The easiest way to handle the problem in CSS is to remove the quotes from all browsers, e.g.
q:before, q:after { content: ""; }If you then need quotes, you can then add them back in using a background image or another appropriate technique.
February 24th, 2009 at 6:06 pm
Repeating the question: On what data is this article based on?
February 24th, 2009 at 6:24 pm
Who still uses HTML anyway?? Design your sites/forms in a program like Dreamweaver, and it will write the code for you. And you will end up with a much nicer looking site at the end of it all.
February 24th, 2009 at 6:53 pm
Various sources, but especially research gathered by resources such as Opera’s MAMA project.
Missing form <label>’s are everywhere, though!
February 24th, 2009 at 7:55 pm
Great article. Some more tags are discussed here
5 obscure HTML tags that you should know and even use
February 25th, 2009 at 1:36 am
I don’t even use Dreamweaver anymore. I built a robot to do that for me, while I sit back with a cool margarita. The robot designs my site in Dreamweaver for me, which in turn writes my code, and I end up with a much nicer looking site at the end of it all.
February 25th, 2009 at 2:17 am
My solution to the Q tag not being fully supported in IE is to use a small .htc file that I created. Much easier than deleting, then adding back quotes, especially if you use “curly” quotes and have nested quotes.
Of course, this does not work for visitors that have IE’s security settings set to “high” – so I add coloring and/or italics to quoted text for this eventuality.
February 26th, 2009 at 4:07 am
According to Opera, only 15% of the forms contains a label element. And from my experience, I was almost surprised that so many used it…
<label> is probably the most underused semantical tag in forms. I see many have “seen the light” and uses CSS to layout a form, but still uses div/span to format a label.
February 26th, 2009 at 7:19 am
@Rich,
I used to use the address element alot, but now I use hCard microformat instead. http://microformats.org/wiki/hcard
March 2nd, 2009 at 9:36 pm
Good work. I found it a fascinating visit, and just the right size for a post like this. Nice job.
March 3rd, 2009 at 6:47 am
Are these original tags? Or Tags that have been implemented in later HTML standards?
March 8th, 2009 at 10:46 am
ALL of them are very usefull when i build my website~~
March 11th, 2009 at 12:16 pm
Most were introduced in HTML 4.0, so they’ve been around over 10 years!
March 12th, 2009 at 3:03 am
Great article. If you’re wanting to just see what every current HTML tag looks like on one page, check out Show Me HTML. Hope you find it useful (I do).
March 13th, 2009 at 1:28 am
Great article! I believe it would have a bigger effect in another forum than sitepoint, though; people here tend to write semantic markup.
April 15th, 2009 at 10:38 pm
To those recommending the microformat for addresses: do you do this under the auspice that people can actually use that data in other programs or just that it’s a handy feature to have on top your code? I’m not too hip on having a div or span for every single element. However, I’m also conflicted by having to use br tags after every piece of information. All in all, I just feel like it’s hopeless no matter which way I go.
April 17th, 2009 at 3:01 pm