Semantics vs. Looks. How far do you go?
I've recently started doing work on a personal website and early developed the idea to use a somewhat different menu than usual (CSS-wise).
It works, only to make it work I had to use potentially non-semantically correct HTML. Here's the end (heavily simplified) result of the HTML:
Quick explanation on the HTML. The weblog Id for the span is needed for a design thing, so I can specify fixed widths. I enclose the description in spans so descendant selectors can be used to position the description, without affecting the link.
<a href="/">Weblog<span id="weblog"> <del class="none">-</del> The home of another place full of nothing.</span></a>
I've been having a couple of questions I can't seem to find a definite answer on, so I'd love to hear your opinion on this.
First, why an unordered list? It is a list of items, so an unordered list would be valid. I started to wonder if a definition list wouldn't be more appropriate? Yes and no. Let's go for yes, it is more appropriate. It shows the relation between the description of the link and the link itself a lot better. Though, is the link really a definition? No, I tend to think it isn't. Even if it was, how would I get my idea to work with the HTML of a definition list? Descendant selectors can't be used and my mind can't come up with a 'pretty' solution to get it to work using a definition list on lesser capable browsers.
Second point is the del tag. You might think, why on earth? Let me explain, but you'll probably fall of your chair laughing before I finish ;) In order to make the links still reasonably readable for screenreaders and search engines, I added a simple hyphen to distinguish the link 'header' from its 'description'. All fine and dandy, but I don't want to see it in my page. One needs to assign only a hiding class to it and still need to be somewhat semantically err .. correct (haha), so the del tag was the closest I could think of.
As you can read, I've gone pretty far (in my opinion) to get my idea to work. Perhaps I can work around the raised issues if I approach the problem from a completely different perspective, but I have yet to start looking for that perspective. I don't think the currently used HTML is a disgrace, but some semantics elitists possibly disagree with me on this.
I'd love to hear your opinion on semantics in this case and your overall opinion. How far are you willing to go into favouring looks over semantics?
PS: Yes, I am a great nitpicker ;)
Torturing elements & hacks
To expend the torturing statement: there are cases that added elements which are not necessary for the document structure but are needed as "handles" for implementing a certain CSS effect fall in the gray area between clean structure and code hacks.
As long as they're kept to a minimum, are the only way left to solve a particular problem and don't deteriorate the page structure, these are tolerable.
As for CSS hacks, their use is never desired, but when it comes to compensating for incorrect browser behaviour it's fighting worse with bad.