There's a lot of literature about "semantic HTML" on the web (here's one person who writes about it a lot). The best short advice I know of to get jump-started on this topic is from a page on W3C. I've pasted the content below - enjoy and be enlightened!  :)

Use class with semantics in mind.

Often people use class names like bluetext, or redborder. A much better way to name your classes is with the role a certain HTML element of that class has.

Good names don't change

Think about why you want something to look a certain way, and not really about how it should look. Looks can always change, but the reasons for giving something a look stay the same.

Good names

warning, important, downloadableImage and submenu are all good names. They describe what a certain element represents, and they are not likely to change. A warning will always remain a warning, no matter how much the look of the page changes.

Bad names

border4px, lighttext and prettybackground are examples of bad names. You might fatten that border to a whopping 5 pixels, or the background may look pretty old after a while, and not pretty at all. An advantage of using CSS is that you won't have to change much in order to change the looks of your website. If you have to change all light text into dark text, and thus change all classes lighttext to darktext in all your HTML pages, you're likely to miss a few.