SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 26
-
May 4, 2004, 12:51 #1
- Join Date
- May 2001
- Location
- The Netherlands
- Posts
- 1,745
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
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 finishIn 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
-
May 4, 2004, 17:20 #2
- Join Date
- Mar 2004
- Location
- Earth
- Posts
- 406
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
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 anticipatedIf you want to hide something from graphical browsers without affecting screenreaders and serial devices, you can do so by positioning it off the screen:
Code:#something { position:absolute; left:-10em; top:-10em; }
-
May 4, 2004, 23:13 #3
- Join Date
- Jan 2004
- Location
- Kentucky, USA
- Posts
- 1,099
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
May 5, 2004, 01:41 #4
- Join Date
- Mar 2004
- Location
- Earth
- Posts
- 406
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
May 5, 2004, 02:44 #5
- Join Date
- Jan 2004
- Location
- Holland
- Posts
- 141
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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!Regards,
Ronald.
-
May 5, 2004, 05:18 #6
- Join Date
- Jul 2002
- Location
- Toronto, Canada
- Posts
- 39,347
- Mentioned
- 63 Post(s)
- Tagged
- 3 Thread(s)
Originally Posted by ronaldb66
of course, the exact same thing can be said of css hacks
-
May 5, 2004, 08:45 #7
- Join Date
- Mar 2004
- Location
- Earth
- Posts
- 406
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by r937
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.
-
May 5, 2004, 12:12 #8
- Join Date
- Jul 2002
- Location
- Toronto, Canada
- Posts
- 39,347
- Mentioned
- 63 Post(s)
- Tagged
- 3 Thread(s)
Originally Posted by brothercake
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.
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
-
May 5, 2004, 12:29 #9
- Join Date
- Apr 2003
- Posts
- 4,095
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
May 6, 2004, 04:26 #10
- Join Date
- Jan 2004
- Location
- Holland
- Posts
- 141
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.Regards,
Ronald.
-
May 6, 2004, 06:29 #11
- Join Date
- May 2001
- Location
- The Netherlands
- Posts
- 1,745
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
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
-
May 6, 2004, 21:38 #12
- Join Date
- Mar 2004
- Location
- Earth
- Posts
- 406
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
May 6, 2004, 23:39 #13
Originally Posted by JMulder
-
May 7, 2004, 07:49 #14
- Join Date
- May 2001
- Location
- The Netherlands
- Posts
- 1,745
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by brothercake
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
-
May 7, 2004, 08:45 #15
- Join Date
- Jul 2002
- Location
- Toronto, Canada
- Posts
- 39,347
- Mentioned
- 63 Post(s)
- Tagged
- 3 Thread(s)
Originally Posted by JMulder
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
-
May 7, 2004, 09:19 #16
- Join Date
- Mar 2004
- Location
- Earth
- Posts
- 406
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Using a <span> is cool:
Code:<span class="notThere">-</span>
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.
-
May 7, 2004, 09:52 #17
- Join Date
- Jul 2002
- Location
- Toronto, Canada
- Posts
- 39,347
- Mentioned
- 63 Post(s)
- Tagged
- 3 Thread(s)
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:
Code:-
-
May 7, 2004, 10:17 #18
- Join Date
- May 2001
- Location
- The Netherlands
- Posts
- 1,745
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
May 7, 2004, 13:17 #19
- Join Date
- Mar 2004
- Location
- Earth
- Posts
- 406
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
That's why I put a classname on the span - so you can identify it directly.
-
May 7, 2004, 14:16 #20
- Join Date
- May 2001
- Location
- The Netherlands
- Posts
- 1,745
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by brothercake
I wonder how I missed out on that option though, good thinking Sherlock!
-
May 8, 2004, 21:39 #21
- Join Date
- May 2002
- Location
- Jacksonville, FL
- Posts
- 1,168
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'd also agree that SPAN is a good solution to this.
Also, I'd like to see this menu when it's ready.
-
May 9, 2004, 06:29 #22
- Join Date
- May 2001
- Location
- The Netherlands
- Posts
- 1,745
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by fillup07
-
May 9, 2004, 06:40 #23
- Join Date
- Apr 2003
- Posts
- 4,095
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Will you be releasing the source code? I think we'd all be interested in fiddling with it.
-
May 9, 2004, 08:31 #24
- Join Date
- May 2001
- Location
- The Netherlands
- Posts
- 1,745
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by compuwhiz7
-
May 9, 2004, 08:34 #25
- Join Date
- Apr 2003
- Posts
- 4,095
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
Bookmarks