The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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).

Simple idea. Horizontal navigation with links. Hovering over the links would reveal a description of the link below the navigation -- something like websites used to have with 400 lines of Javascript code

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:

Code:

<ul>
<li>
<a href="/">Weblog<span id="weblog"> <del class="none">-</del> The home of another place full of nothing.</span></a>
</li>
</ul>

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.

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?

If all the links are like that - in name/description pairs - I think <dl> would be the best choice.

Code:

<dl>
<dt><a>Weblog</a></dt>
<dd>The home of another place full of nothing.</dd>
</dl>

You can still make it look like "link text - description" with some clever positioning and generated content.

As to the general question, I'd have to answer "not at all" - in my view it is never acceptible consciously to undermine or abuse the semantics of an element, or to use markup for formatting effects, or just because it's easier to make like that.

Oh, and yeah - your justification for using <del> is as laughable as you anticipated If you want to hide something from graphical browsers without affecting screenreaders and serial devices, you can do so by positioning it off the screen:

Because most browser-based screenreaders (like JAWS and HPR) cannot see anything which is hidden with display, visibility, overflow or clip. If it's hidden to visual browsers then it's hidden to screenreaders as well, unless you use the off-positioning technique.

Semantics and looks

I think the basic premise of semantics being apposed to looks is flawed; I see no reason why a well-structured, semantically meaningful page would exclude the possibility to make it look good.
Torturing HTML elements to achieve a certain visual effect certainly should be regarded as an indication that somebody is climbing up the wrong tree.

P.S. Brothercake, I like the dl idea as a structure for a drop-down menu!

I don't think so actually - CSS hacks are an occupational necessity, just like HTML hacks used to be. HTML hacks are not necessary anymore, and that's how I feel able to take a purist standpoint on them. But there may be no alternative to CSS hacks if you want a particular design to look the same in a wide range of desktop browsers - which is, of course, only a part of the total access, but it is the part that clients notice.

As long as the core HTML is valid and semantically rich, and functional as is, then I think most CSS and DOM hackery for the sake of better looks and GUI usability is fine. Because after all, these things are not the content - they're the decoration. Content is sacrosanct, but design is not.

But there may be no alternative to CSS hacks if you want
a particular design to look the same in a wide range of desktop browsers -
which is, of course, only a part of the total access, but it is the part that clients notice.

ahem, yes, blame the client for your misdeeds!! great idea!! LOL

there is indeed an alternative

educate the client on the dangers of css hackery, and convince the client
that the layout does not have to look identical in every version of
every browser on every platform on every day in all months with
an R in the month name

just as long as it looks similar, preserves the branding, has a minimal footprint,
and will not break in future browsers

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.

brothercake - Thank you for your suggestions, but if you would have read my original topic better, you would have seen that your suggestions won't work in this particular case.

The DEL explanation is indeed laughable, but necessary if I wish to serve content that is valid for non-screen media and keep my original design intact for screen media. I just noticed I could remove the class addittion for the DEL tag, but that doesn't make it a whole lot better.

Originally Posted by ronaldb66

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.

That's exactly what my current problem is about.

I didn't intend to make you pick either semantics or looks. I was wondering how you guys deal with those rare cases where you simply need to use less semantically correct markup in order to get your design to work (on as much browsers as possible). I thought I explained that well enough, I suppose I didn't

I noticed that Douglas Bowman at StopDesign uses the DEL tag in his headers. They are there to remove the spaces between the words, but still keep it functional for search engines, screenreaders etc. I suppose I am in a similar boat with my DEL tag case ..?

On that topic of CSS hacks, most CSS hacks come from browser-specific bugs. Adding HTML or using less semantically correct markup is, in my case, aimed at using lower level CSS in order to support as many browsers as possible. Sure, CSS3 is all fine and dandy, but rather pointless at this very moment if you intend to design a website for the mainstream internet users.

You've lost me now - are you saying that you're using <del> because you want the seperator "-" to be for serial browsers etc, but not for graphical browsers?

If so, that is an abuse of semantics - that isn't what <del> means - <del> is for content which is no longer applicable or out of date - hence, deleted. Deleted content should be visible to make that point.

On that topic of CSS hacks, most CSS hacks come from browser-specific bugs. Adding HTML or using less semantically correct markup is, in my case, aimed at using lower level CSS in order to support as many browsers as possible. Sure, CSS3 is all fine and dandy, but rather pointless at this very moment if you intend to design a website for the mainstream internet users.

CSS3 is not a standard yet, most CSS-hacks are to be compliant with CSS2

If so, that is an abuse of semantics - that isn't what <del> means - <del> is for content which is no longer applicable or out of date - hence, deleted. Deleted content should be visible to make that point.

That's exactly what I wanted to discuss. There's no semantics in it at all, but a HTML tag needs to be added for some things to work the way I want to.

Again, how far do you go with things like this? Drop the idea? Or do what I do? I'd love to take an 'elitist' point of view as well, but sometimes it's just not possible.

Shame on Douglas perhaps, but again, he has no choice if he wishes to keep the original design intact and serve reasonable unstyled content.

Is needing to make such a decision like this so rare that nobody has ever thought about it from both sides of the story?

Originally Posted by momos

CSS3 is not a standard yet, most CSS-hacks are to be compliant with CSS2

And then use the off-positioning technique to take it away for graphical browsers. There's no semantic abuse there because <span> has no semantics.

Essentially - my summary view is that pretty much any CSS and DOM hacking is okay, as long as it doesn't impact negatively on a different subgroup of users. It's only XHTML hacking I can't tolerate - misuse of elements, abuse of semantics, misappropriation of attributes - anything like that I think is wrong, because it reduces accessibility.

r937 - Haha, yes, only if I want to have the hyphen displayed. It's just an example and I am well aware I've gone pretty far. In my case, I use a background image to spice things up a bit, instead of using an ugly hyphen.

I am not one to drop ideas easily, because I hate giving up. Instead, I am trying to search for a solution if the evaluation of the situation deemed this necessary

I wouldn't call it keeping it simple, but I won't argue with that either

brothercake - Using a SPAN is out of the question, because of the SPAN enclosing the link's description. Using descendant selectors to position the description would also affect the SPAN enclosing the hyphen, which would produce odd results.

EDIT: Of course, I could probably undo all of the rules applied to the span, but I hate that process. It's a good alternative, I suppose. I'll look into it