Semantics vs. Looks. How far do you go?

[JMulder]

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:

<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?

PS: Yes, I am a great nitpicker

[brothercake]

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

<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:

#something {
    position:absolute;
    left:-10em;
    top:-10em;
    }

[megamanXplosion]

Brothercake, I don't understand why you'd position it offscreen when you could just "display:none", unless I'm misunderstanding something. Would you care to explain why you chose to use that method?

[brothercake]

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.

[ronaldb66]

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!

[r937]

Torturing HTML elements to achieve a certain visual effect certainly should be regarded
as an indication that somebody is climbing up the wrong tree.

quote of the week

of course, the exact same thing can be said of css hacks

[brothercake]

of course, the exact same thing can be said of css hacks

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.

[r937]

I don't think so actually

then we shall agree to disagree

css hacks are the spawn of the devil

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

but yes, i agree, the css is just decoration

[cfm]

I am torn on the issue.

On one level, I believe that while HTML hacks are absolute no-nos, I think that CSS hacks may be necessary to achieve a consistent, cross-browser design.

On the other level, I am something of a code purist, and don't really want any excrement in there, so hacks seem a little ugly to me.

On my own sites, I try and use as few hacks as is humanly possible; if there's simply no other way, I either consider changing my desired design, or else hack it and risk it.

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

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.

[JMulder]

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.

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.

Thanks for the input so far

[brothercake]

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.

And if Doug Bowman is doing that, well shame on him.

[momos]

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

[JMulder]

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?

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

With CSS3, I was referring to my case, not the topic of CSS Hacks.

[r937]

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.

that's a pretty tough call, and i've done all three -- do what you do,
drop the idea, and take an "elitist" point of view

in that order

there may be a SPAN once in a while in my code, but it pains me
deeply whenever i have to do it

this means i usually drop the idea

elitism it is not

simplicityism? simpleism, simplificationism?

yeah, that's it -- as a simplificationismist i usually drop the idea

[brothercake]

Using a <span> is cool:

<span class="notThere">-</span>

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]

well, i don't want to argue with you, but...

i personally do not understand why you would have
an aural hyphen that couldn't also be a visual hyphen

so here's how i would code it:

-

[JMulder]

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

[brothercake]

That's why I put a classname on the span - so you can identify it directly.

[JMulder]

That's why I put a classname on the span - so you can identify it directly.

Yeah, it would definitely work, though undoing all the rules doesn't make the CSS any prettier I wonder how I missed out on that option though, good thinking Sherlock!

[fillup07]

I'd also agree that SPAN is a good solution to this.

Also, I'd like to see this menu when it's ready.

[JMulder]

Also, I'd like to see this menu when it's ready.

How it looks like is basically the same way as shown at http://www.deviantart.com/view/6952784/ -- you can clearly see the hover status there.

[cfm]

Will you be releasing the source code? I think we'd all be interested in fiddling with it.

[JMulder]

Will you be releasing the source code? I think we'd all be interested in fiddling with it.

Definitely. I'll dedicate a blog entry to it if you like

[cfm]

Yay! I'm always interested in seeing good nav code, as well as good horizontal nav code.

Since you're releasing it, I assume that means that we can derive our own navbars from it?