HTML structure

[Xarr]

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:

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

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

[Dan Grossman]

I would consider the title the heading, not the date, so make that the <h1>.

[AutisticCuckoo]

I agree with Dan. The news title is the heading, not the date.

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

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

[Xarr]

Ok, thanks ;-)

[Xarr]

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>

[adstiger]

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.

[AutisticCuckoo]

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.

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

[Xarr]

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

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

<li><h2>next news title</h2></li>

looks senseless but correctly describes the content.

What you think?

[AutisticCuckoo]

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.

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.

[Xarr]

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

[flooby]

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.

[Xarr]

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.

[AutisticCuckoo]

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.

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.