has_many :thoughts

When we began the switch to rails about 6 months ago, I also started to push a transition to CSS-based designs and away from tables based layouts. I saw great value in using more semantic HTML which wrote cleaner code and also provided a separation between display formatting and actual content.

This transition has opened me up to a bunch of HTML tags that I rarely used before, or even new existed. And so, I present, my favorite HTML tags:

dl dt dd

Definition List, Data, and Term are really handy when you have a list of items you need to describe. The default style on most browsers bolds the Term and indents the Data underneath it Which is okay but can be easily overwritten with CSS.

h1..h6

I remember using these way back in HTML 1.0 but somehow I stopped and ended up with <big><big><big>Headline</big></big></big>. I can’t understate the usefulness of headline tags.

ul and li

The power of Unordered Lists is just incredible when you realize how they can be styled in such diverse ways with CSS. Whenever I find myself with a list items (often links) I use ul.

label

I always used to put a bunch of fields in a form in a big table with two columns. But with label tags, one can simply style the labels to have a fixed width and you get the same effective. A lot less markup.

optgroup

Another one I didn’t even know existed. Admitedly, it’s an HTML 4 tag. But I often have drop down boxes where groupings within them would be nice. And previously, I would have had to use some kind of Javascript or server side validation to forbid slection of those grouping headings. With optgroup, browsers don’t allow you to select the grouping itself.

fieldset

Fieldset is a perfect semantic method of grouping elements within a form together. The default styles in most browsers create a nice little box around your fields with the name of the section (ie: “Billing Address”) at the top.

th

I didn’t even know Table Header tags existed until a few months ago. It makes it much cleaner to style the headings above columns. No more <b> tags in every single field!

And now, let’s please pause for a moment of silence for the <br/> tag (Previously known as <br>.), who recently left this world. I’ve all but stopped using the the Break tag, except when it actually makes sense: intentional line breaks within paragraphs of text. No more <br><br><br><br><br><br> to space something down a page. And never again will I do the old <font size="1"><br></font> to space something down just a tiny bit.