SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26

Hybrid View

  1. #1
    1-800-JMULDER JMulder's Avatar
    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>
    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
    Jeroen Mulder

    w: www.jeroenmulder.com

  2. #2
    SitePoint Guru
    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>
    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:
    Code:
    #something {
        position:absolute;
        left:-10em;
        top:-10em;
        }

  3. #3
    SitePoint Wizard megamanXplosion's Avatar
    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?

  4. #4
    SitePoint Guru
    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.

  5. #5
    SitePoint Zealot
    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.

  6. #6
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,215
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ronaldb66
    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
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  7. #7
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937
    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.

  8. #8
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,215
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by brothercake
    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
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  9. #9
    SitePoint Wizard bronze trophy
    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.


  10. #10
    SitePoint Zealot
    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.

  11. #11
    1-800-JMULDER JMulder's Avatar
    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.

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

    Thanks for the input so far
    Jeroen Mulder

    w: www.jeroenmulder.com

  12. #12
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JMulder
    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

  13. #13
    SitePoint Guru
    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.

  14. #14
    1-800-JMULDER JMulder's Avatar
    Join Date
    May 2001
    Location
    The Netherlands
    Posts
    1,745
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by brothercake
    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?

    Quote Originally Posted by momos
    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.
    Jeroen Mulder

    w: www.jeroenmulder.com

  15. #15
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,215
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by JMulder
    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
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  16. #16
    SitePoint Guru
    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>
    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.

  17. #17
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,215
    Mentioned
    58 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:
    -
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  18. #18
    1-800-JMULDER JMulder's Avatar
    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
    Jeroen Mulder

    w: www.jeroenmulder.com

  19. #19
    SitePoint Guru
    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.

  20. #20
    1-800-JMULDER JMulder's Avatar
    Join Date
    May 2001
    Location
    The Netherlands
    Posts
    1,745
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by brothercake
    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!
    Jeroen Mulder

    w: www.jeroenmulder.com

  21. #21
    Phil fillup07's Avatar
    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.

  22. #22
    1-800-JMULDER JMulder's Avatar
    Join Date
    May 2001
    Location
    The Netherlands
    Posts
    1,745
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fillup07
    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.
    Jeroen Mulder

    w: www.jeroenmulder.com

  23. #23
    SitePoint Wizard bronze trophy
    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.

  24. #24
    1-800-JMULDER JMulder's Avatar
    Join Date
    May 2001
    Location
    The Netherlands
    Posts
    1,745
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by compuwhiz7
    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
    Jeroen Mulder

    w: www.jeroenmulder.com

  25. #25
    SitePoint Wizard bronze trophy
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •