When to use and when not to

When to use
and when not to

A common question in #web on Freenode IRC, goes something like this:

“Should I use

‘s or tables for my layout?”

The answer is, neither.

What most people call “using

‘s” is actually, CSS-P – CSS Positioning. This is the correct way to markup a page for styling using CSS, rather than putting all the display information into the page using tables. You should always use CSS-P for styling your website, this does not mean that you should never use tables, but that you should only use tables for tabular data.

You should also never use a

when another tag will do. Think about the following examples:

Using the following CSS, the following two HTML examples display the same:

#header {
color: red;
background-color: grey;
font-size: 32px;
}

<div id=“header“>
Welcome to my site!
div>

<h1 id=“header“>
Welcome to my site!
h1>

So why – you ask – does it matter which I use? Well, just looking at the two examples, the second one obviously denotes the text a 1st level header. The top one doesn’t give any information about the text contained in it.

This doesn’t mean you should never use a

, there are situations where you are styling something where you have no content (say, a drop-shadow on a paragraph which itself is marked up using

and has a different style).

I know I haven’t gone into much depth here, but thats the long and short of it as I see it. I hope that helps someone.

- Davey

Comments are closed.

Twitter

Unhappy with my @EyeFiCard performance this weekend; no geo-tagging, wouldn't connect to my ad-hoc wifi, or upload to flickr. Complete #fail
@dshafik [3 hours ago]

Just had a wonderful massage to top off this most excellent 3 day weekend. Drinking water and relaxing while Fran has her turn.
@dshafik [8 hours ago]

@meaganfisher Also, this one: http://www.flickr.com/photos/dshafik/4964202688/
@dshafik [14 hours ago]

@fraserspeirs Would love to see tagging with the camera/body as well as lens, and allow multiple upload sessions in Aperture Flickr Export
@dshafik [14 hours ago]