10 Underused Html Elements, and how you should be using them!

Friday, 20 August 2010 03:00 PDFPrintE-mail

View Comments
All the hype recently has been about Html5, and the new elements it brings to the table for us to use. However, the way I see it, we currently don’t even utilise all that the current version of html has to offer. There are several really useful elements available to use, that make our code [...]

All the hype recently has been about Html5, and the new elements it brings to the table for us to use. However, the way I see it, we currently don’t even utilise all that the current version of html has to offer. There are several really useful elements available to use, that make our code more semantic, our website more usable, and in general, everything easier for both us, the coder, and the end-user of our site.

1. label

Description

The

Usage

The <label> tag should be placed next to their relevant form controls in your code. The only real requirement of the <label> tag is that it’s “for” attribute should be equal to the id attribute of the form control it is related to. This allows them to be linked together by the browser for the usability enhancements. Here is an example

<label for="name">Your Name</label>
<input type="text" id="name" />

Styling

The label element has become quite popular recently, and while it still isn’t used by everyone, it’s styling, and some creative uses have been conjured up. Check these links out below for further ideas.

2 & 3. fieldset & legend

Description

The <fieldset> tag is used to logically group together elements in a form. Basically, the <fieldset> tag draws a box around the form elements it contains to separate them from other elements or <fieldset>’s in the form. The <legend> tag is then used to define a caption for its specific fieldset.

Usage

The <fieldset> and <legend> tags can, and really should be used in any form. They allow you to describe, and split up forms into relevant sections.

<form>
  <fieldset>
    <legend>Personal Details</legend>
    <label for="firstname">First Name</label>
    <input type="text" id="firstname" />
    <label for="lastname">Last Name</label>
    <input type="text" id="lastname" />
  </fieldset>
</form>

Styling

There are plenty css tutorials out there for styling forms, and the vast majority of them, as they should, make use of the <fieldset> and <label> tags. Check out these links for styling ideas.

4. optgroup

Description

The <optgroup> tag is used to group together related options in a select (dropdown) list. This can often make long lists of options easier for users to navigate, and handle.

Usage

The <optgroup> tag simply wraps the options within it, with the title being added to it via an attribute called “label”. Here is some sample markup for a <select>.

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Styling

As is usual with form element styling in browsers, support is fairly limited, and nowhere near being standard across browsers. The default seems to be bold headers within your dropdown.

5. dl

Description

The <dl> tag defines a definition list. Basically the <dl> tag is uses with <dt> which defines the item in the list, and <dd> which described the current item in the list. This makes it useful for a lot of things, such as dictionary style lists, and other things such as contact details, and so on.

Usage

This example usage I am going to show is an example for how I’d used the definition list on a contact page.

<dl>
  <dt>Email</dt>
  <dd>email@domain.com</dd>
  <dt>Location</dt>
  <dd>Here</dd>
  <dt>Phone</dt>
  <dd>+0123456789</dd>
  <dt>Skype</dt>
  <dd>myname</dd>
</dl>

Styling

Definition lists are quite flexible and can be used for plenty things. This article shows some of these.

6. cite

Description

The <cite> tag contains a citation or a reference to other sources. It is usually used to wrap the name of the source of a quote, or resource.

Usage

The <cite> tage is basically used to provide a reference, usually with a title attribute to provide full source information such as below.

According to <cite title="HTML & XHTML: The Definitive Guide. Published by O'Reilly Media, Inc.; fifth edition (August 1, 2002)">Chuck Musciano and Bill Kennedy</cite>, the HTML cite tag actually exists!

Styling

<cite> tags are generally styled as italics, and most browsers normally do this automatically. The title attribute is shown on hover.

7. blockquote

Description

The <blockquote> tag defines a long quotation. It can be used with the <cite> tag, and is usually used for testimonials, and pull quotes.

Usage

The <blockquote> tag basically wraps the quote, and can be used along with <p>, and <cite> as well as other tags for further styling.

<blockquote>
This is an example of a blockquote which is not inline, and is long!
</blockquote>

Styling

There are two universally accepted styles for blockquotes, but there are plenty other ideas out there as well. Here they are below.

8. code

Description

The <code> tag is used to display computer code text. This is usually displayed in a different font with characters that are all the same size.

Usage

You should pretty much always use your <code> tag wrapped in the <pre> tag. This basically preserves all spacing, and tabbing in your code.

<pre>
  <code>
    .classname {
      /** Code goes here **/
      /** Code goes here **/
      /** Code goes here **/
    }
  </code>
</pre>

Styling

9. colgroup

Description

The <colgroup> tag is used to group columns in a table for easy formatting. Instead of applying styles to each individual column cell, you can simply apply it to the <col> in the <colgroup> and it will be applied to the entire column.

Usage

This below example shows how <colgroup> and <col> should be used in the markup of a table. You can then apply class’s to each <col> rather than every <td> in that column to style that column.

<table>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

10. acronym

Description

The <acronym> tag, funnily enough, defines an acronym. An acronym can be spoken as if it were a word, example NATO, NASA, ASAP, GUI. By marking up acronyms you can give useful information to browsers, spell checkers, screen readers, translation systems and search-engines.

Usage

The acronym tag works in pretty much the same way as the <cite> tag does, in that you simply hover over it to see the full acronym.

Can I get this <acronym title="As soon as possible">ASAP</acronym>?

Read Full Article

Related Articles

Newer news items:
Older news items:
blog comments powered by Disqus