Many people who otherwise use tableless layouts still use tables for marking up forms. Yes, it makes getting things to line up correctly easy most of the time, but it's hardly semantically correct. You see, a table should have at least 2 rows and 2 columns of data. And they usually have a column of headers for the rows and a row of headers for the columns. Now, if you think about it, the labels for form controls make up a column of headers for the rows; that leaves you with one column of data which hardly could be called tabular data.

Now please don't just write me off as a "table basher" or something similar. I'm talking about using semantic markup as best you can. I accept that many people will have a period of transition as they move away from using tables for layout. My point is that many people seem to have stopped their transition prematurely. This would be a good time to mention CSS Tables, since IE8 will support them. Therefore, we can start using them and just use an alternate layout technique for IE6 and 7.

Some people are in the habit of using paragraph elements (<p>) for grouping each label with its form control. How does a label and its form control constitute a paragraph? Sometimes you may want to have a paragraph of text explaining part of the form though.

After having discussed how tables are inappropriate for marking up form controls, how should it be done? Other people like using definition lists (<dl>). This is where we've reached the gray area. I don't like using <dl>s for this myself, but I can see how other people would. For one thing, I prefer having an element to contain each label and form control pair.

Some people use ordered or unordered lists (<ol>s and <ul>s, respectively). I like using them for radio button and checkbox groups sometimes, but prefer just using <div>s for much of marking up forms.

Now I should point out that each form control should have its own <label> element and that it's good to group related groups of form controls with <fieldset> elements. Some people go wrong by using a <label> for the question that is answered by clicking on one of the radio buttons in a group of them. That's what a fieldset's legend element is good for. Styling those can be tricky, but that's a topic for another post.

So to summarize. Don't misuse <table>s or <p>s, always use <label>s, and use <fieldset>s where appropriate.

So while considering what to cover first, I read what other people have been writing about recently. One of the things that caught my attention was the old argument about how you should use <h1> elements.

What are <h1>s for? They are level one headers. So what is the most important idea in each document? Is it the Site Title? No, it's often not, but that's what many people seem to think. I've come to believe that <h1>, <h2>, etc. should be used to mark up the document structure of the page, not the site. Why else would there be several tools around that pull the contents of the header elements to make an outline of the page?

Some people also are ok with using multiple <h1>s on a page. To me, if you've got two equally important ideas on a page, it seems that you should split the page in two making one page for each idea.

Now for title elements, some people just put the site title in them. Now how is that useful for when people bookmark the page or find it via a search engine? How about switching between windows or tabs when you have multiple pages from such a site open? Other people even seem to use them for a little keyword stuffing. To me the title should at least start with the contents of the H1 on the page (assuming the H1 was used as I just suggested it should be used). I then like to use some kind of separator and then put the site title. Putting the site title before the page title makes less sense, because it ends up with the same problems of only putting the site title in the title element.

I thought the best way to start out was with some kind of introduction. (Besides it allows me a short delay in deciding which issue I want to write about first. )

Many of you know me as Kravvitz, while others know me as Kravimir. I originally picked the name "Kravitz" because I heard it on the classic TV show "Bewitched". Unfortunately it was already taken as an AOL screenname, so I added the second "v". So many years later I've gotten tired of people not spelling it the way I do. Hence the name "Kravimir". Unfortunately, changing one's screenname on dozens of sites is not an easy task. Therefore, I haven't changed it on sites I'm already a member of yet, but am using Kravimir when I join new ones.

This is not a site about graphical web design as some people seem to think. Here I endeavor to instruct people in how to use good techniques to turn designs into actual web pages. That's not how I would normally describe it, but I think it is an accurate description. This site's graphical design is simple. Why? Because I did it myself and I'm a web programmer, not a graphical web desginer. If you would like to create a new design for me based on the current one, I would love to take a look at it.

So I'd like to thank the guys who helped me work out many kinks from this blog system. Thanks for your help and I hope you'll stick around and read some of my entries as I post 'em.