SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: HTML structure

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML structure

    Hi

    I`d like to create a news box (div) which should look like this

    How should I create HTML structure for this? How it should be done correctly (i`m not asking about formatting. I don`t care about CSS here)

    Here is some proposals:
    Code HTML4Strict:
    <div id="news">
    <h1>Date</h1>
    <h2>First News title</h2>
    <p>first news text</p>
    <ul>
    <li>Next news title</li>
    <li>Next news title</li>
    <li>Next news title</li>
    <li>Next news title</li>
    </ul>
    </div>

    Code HTML4Strict:
    <div id="news">
    <ul>
    <li id="headtitle">
      <h1>Date</h1>
      <h2>First News title</h2>
      <p>first news text</p>
    </li>
    <li>Next news title</li>
    <li>Next news title</li>
    <li>Next news title</li>
    <li>Next news title</li>
    </ul>
    </div>

    How would you handle this?

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I would consider the title the heading, not the date, so make that the <h1>.

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with Dan. The news title is the heading, not the date.
    Code HTML4Strict:
    <div id="news">
      <div>Date</div>
      <h1>First News title</h1>
      <p>first news text</p>
      <ul>
        <li>Next news title</li>
        <li>Next news title</li>
        <li>Next news title</li>
        <li>Next news title</li>
      </ul>
    </div>

    Alternatively:
    Code HTML4Strict:
    <div id="news">
      <h1><span>Date </span>First News title</h1>
      <p>first news text</p>
      <ul>
        <li>Next news title</li>
        <li>Next news title</li>
        <li>Next news title</li>
        <li>Next news title</li>
      </ul>
    </div>
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, thanks ;-)

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But, don`t you think that in this structure <h1> contains not only <p> but also the rest of news titles? Which is bad and incorrect imho.

    By contains I mean that the title <h1> is both for <p> and <ul>

  6. #6
    Non-Member adstiger's Avatar
    Join Date
    Nov 2008
    Location
    Canada
    Posts
    348
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Xarr View Post
    But, don`t you think that in this structure <h1> contains not only <p> but also the rest of news titles? Which is bad and incorrect imho.

    By contains I mean that the title <h1> is both for <p> and <ul>
    I don't find any problem in <h1> or <p>. The above html seems to be ok to me.

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Xarr View Post
    But, don`t you think that in this structure <h1> contains not only <p> but also the rest of news titles? Which is bad and incorrect imho.
    Yes, you're right. There should be another heading to indicate that the list of other news doesn't belong to the first news article.

    Code HTML4Strict:
    <div id="news">
      <h1>News</h1>
      <h2><span>Date </span>First News title</h2>
      <p>first news text</p>
      <h2>More News Articles</h2>
      <ul>
        <li>Next news title</li>
        <li>Next news title</li>
        <li>Next news title</li>
        <li>Next news title</li>
      </ul>
    </div>
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes... with headings there would be no problem, but what about my situation?
    There is no headings like "news" or "more news".

    In this case, I think
    Code HTML4Strict:
    <div id="news">
    <ul>
    <li id="headtitle">
      <h2><span>Date</span> First News title</h2>
      <p>first news text</p>
    </li>
    <li>Next news title</li>
    <li>Next news title</li>
    <li>Next news title</li>
    <li>Next news title</li>
    </ul>
    </div>

    is the most correct as everything is in a list. However first news has title marked as <h2> and other titles are not which makes them somehow different.

    This:
    Code HTML4Strict:
    <li><h2>next news title</h2></li>
    looks senseless but correctly describes the content.

    What you think?

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Xarr View Post
    There is no headings like "news" or "more news".
    You can add those headings and hide them from graphical user agents, e.g., with position:absolute; left:-999em. They'll then be useful in non-CSS browsers like Lynx and they will be read out by screen readers to explain what's going on. But they won't clutter the visual layout in 'normal' browsers.

    Quote Originally Posted by Xarr View Post
    In this case, I think
    ...
    is the most correct as everything is in a list.
    I would disagree, because I think you have two separate things here: one news article and one list of news headings. Putting all of them in a single list is like mixing apples and oranges in my opinion. But it's just an opinion.
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks AutisticCuckoo for your opinion.
    I like the idea of hidding headings. Although there is no place for them in my layout they might be usefull for users using text browser or maybe screen readers. They also nicely describe content elements.

    Regards,
    Mike
    Last edited by Xarr; Mar 13, 2009 at 03:54.

  11. #11
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I disagree about hiding the content of headings off the page it may backfire at a later date. Its either on the page or its classed as hidden text, which is a no no.

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Flooby: I think some elements are or should be for text-only browsers rather than for modern browsers. The point is how can you make users feel good on both type of browsers.

    i.e. I hate "skip to content" in firefox but I love it in lynx. The same is with headings here. In Firefox you see the difference in lynx you don`t.
    I see nothing wrong with this approach.

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Xarr View Post
    Thanks Although there is no place for them in my layout they might be usefull for users using text browser or maybe readers. They are also nicely describe content elements.
    I agree. And in several usability studies with screen reader users one of the most valued aspects of a site has been a good heading structure. The more experienced users, especially, appreciate it.

    Quote Originally Posted by flooby View Post
    I disagree about hiding the content of headings off the page it may backfire at a later date. Its either on the page or its classed as hidden text, which is a no no.
    If you're talking about search engines, I doubt it's any problem. My blog was a PR7 back when I had time to update it regularly – despite off-screen structural content.

    And if it really is a problem it's something the search engines should fix, because they're the ones jumping to conclusions. We shouldn't have to sacrifice semantics or accessibility just to please the SEs.
    Birnam wood is come to Dunsinane


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
  •