SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: HTML structure

Hybrid View

  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 Enthusiast
    Join Date
    Nov 2005
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, thanks ;-)

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

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

  6. #6
    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

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

  8. #8
    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

  9. #9
    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.

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

  11. #11
    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
  •