HTML: The Top 5 Forgotten Elements


So you’re a front-end guru who spends your day churning out complex CSS layouts and dynamic DOM wizardry. You’ve mastered cross-browser layouts, you’re confident with your DOM scripting skills, and you’ve made every effort to make your pages as usable and accessible as possible. Heck, maybe you’ve even added extra semantic meaning to your site using microformats.

But is there more you could be doing? Just how polished are those HTML foundations upon which everything rests?

Before you declare your tasty web standards trifle ready to be served, have a read through the following five elements that may have slipped off your radar. They’re supported by all major browsers, and implementing them is easy to do and takes almost no time at all.

dfn
The dfn element is used to introduce a term to your readers. Here’s an example:

1

An array is a single programming variable with

2multiple "compartments". Each compartment can hold a value.


view plain | print

An array is a single programming variable with multiple "compartments". Each compartment can hold a value.

The browser default is to render dfn elements in italics, but of course through the power of CSS you can make them look any old way you like. For example, if I wanted them to display in bold, instead, I could do this:


1dfn {
2 font-weight: bold;
3 font-style: normal;
4}

view plain | print
dfn {   font-weight: bold;   font-style: normal; }
cite
The cite element is for marking up citations, for example to a magazine, book or web site. Here’s how you use it:

1

The SitePoint book Build Your Own Web Site The Right

2Way, by Ian Lloyd, is a great primer for learning
3HTML and
4CSS.


view plain | print

The SitePoint book Build Your Own Web Site The Right Way, by Ian Lloyd, is a great primer for learning HTML and CSS.

The most common reason the cite element is forgotten is because it feels more natural to link to the document in question — be that a web page, or possibly a sales page for the book you are citing. That’s fine! You can do both, like this:


1

The SitePoint book

2href="http://www.sitepoint.com/books/html1/">Build Your
3Own Web Site The Right Way, by Ian Lloyd, is a great
4primer for learning HTML and
5CSS.


view plain | print

The SitePoint book Build Your Own Web Site The Right Way, by Ian Lloyd, is a great primer for learning HTML and CSS.

var
The var element can be used to mark up a variable, when talking about programming code. By default it renders in a monospace font in most browsers. Here’s an example:

1

For each iteration in the following Ruby code, the

2car variable is set to the current element of
3the array.


view plain | print

For each iteration in the following Ruby code, the car variable is set to the current element of the array.

samp
The samp element is used to mark up sample output, such as the output to your screen when running a script. Here’s how it’s used:

1

When I ran the program from the command line, it just

2printed File Not Found to the screen.


view plain | print

When I ran the program from the command line, it just printed File Not Found to the screen.

kbd
The kbd element should be used to indicate keyboard input required by the user. Pretty straightforward:

1

If you need help at any time, hit F1 to display

2the online help menu.


view plain | print

If you need help at any time, hit F1 to display the online help menu.

And that’s all there is to it. Easy, huh?

While you may be thinking that the rewards for going to this level of detail are not justified by the effort required, remember there are lots of reasons why adding semantic meaning to your page makes lots of sense.

  • Your pages will automatically become (potentially) more accessible, as assistive technologies will have more meta data about your page when interpreting its contents.
  • You may see some improvement in SEO rankings, as search engine bots will be able to make more sense of the content on your page.
  • You will be in a better position than most to take advantage of an appropriate microformat, should it come along (or the Semantic Web, should such a thing ever eventuate).

Including these forgotten elements in your markup is quick and easy to do, and adds an extra dimension of semantic richness to your page.

Stumble
Delicious
Technorati
Twitter
Facebook

0 Comments:

Post a Comment

Related Posts with Thumbnails
 

Wallpapers And News Blog Copyright © 2010 Designed by Imran Yousaf, Sulman Yousaf