How semantic is your XHTML/CSS markup?

Question

I think I'm pretty good at using semantic markup on my pages but I still have a handful of classes like this:

/**** Aligns ****/
.right_align  { text-align: right; }
.left_align   { text-align: left; }
.center_align { text-align: center; }

Which, technically, is a no-no. But when you just want to position some text in a table, how crazy am I supposed to get with the semantic markup?

Answer 1

Semantic markup is an admirable goal, but in the real world, you sometimes have to make compromises. In some cases, the only sensible way to do something is to break semantics and just throw in a right_align.

Edit: People seem to be misunderstanding my point in this. You should use semantic markup where possible. However, there are cases where it really is just a stylistic choice and there is nothing inherent to the data that you can use to describe or classify it. This is most typically true with large sections of tabular data, especially if it is dynamically generated.

I've had cases where clients want to be able to dynamically control what columns appear in data grid. There's no way to know ahead of time what type of data they're going to choose to show. If they want a way to center or right align a dynamically generated column, it's better to have center and right align classes available for them to use than to have them sticking style attributes everywhere.

Answer 2

Why do you want to align the text?

The answer to the question is the name of the id or class you need to have for your selector. Do you want to align it right because it's a price?

table .price {
  text-align: right
}

Just ask yourself why do you want to apply a particular style, and all will become clear.

I probably overdid it, but my last work project was pretty close 100% semantic- anything I needed which was not semantic (say, a filler div which I could not do without for a layout requirement), I added dynamically using jQuery.

Answer 3

If you want tight coupling between the table cells and the alignment, you could just assign the attribute style="text-align:right" directly on the tag. There is no reason to go the extra level of indirection through a class if you dont use it for a level of abstraction anyway.

Answer 4

100% semantic markup is a silly goal. Your graphic designer will say, "Let's right align this", and the reason will be "because it looks good that way". What are you supposed to do, add a class of "looksgoodthatway" to the div? Just right align it and get on with your life! :)

Answer 5

I try to consider why I want a column right aligned in a table. For example, if the column contains currency amounts then I would use a style named currency instead of right_align.