[whatwg] Some discrepencies and example remarks

[Yuvalik Webdesign]

> From: Ian Hickson [mailto:ian at hixie.ch]
> 
> Please file specific bugs or send specific e-mails for each example you
> think should be reworked; there are over 300 examples in the spec and
> without knowing what is wrong with each one, if I just go through them
> all
> and change them, they're just going to go from one kind of bad example
> to
> another kind of bad example.
> 


So I decided to start already with an example. I went through some old code to find a suitable use-case and I found one that I think might be beneficial since it is used quite often on all sorts of sites in one shape or another. But right from the start I get stuck.
The existing (HTML4) code is as follows:

The page has a header and a footer which we will disregard for the sake of this example. Between this header and footer we have:

<div id="detail">
	<img src="example1.jpg" />
</div>

<ul>
	<li><a href="example1.jpg"><img src="example1_thmb.jpg /></a></li>
	<li><a href="example2.jpg"><img src="example2_thmb.jpg /></a></li>
	<li><a href="example3.jpg"><img src="example3_thmb.jpg /></a></li>
	<li><a href="example4.jpg"><img src="example4_thmb.jpg /></a></li>
</ul>

So in essence, we are talking about a portfolio (with some AJAX in the background which we will ignore). Clicking on a thumbnail in the <ul> will show the detailed picture inside the <div>. I left out arguments which have no bearing on the discussion.
Depending on your point of view one will or will not call this an application, so in itself it is a good example of ambiguous content.

How should this be redone in HTML5? I come across the following questions:

1) Should this entire code be wrapped in a <section>? The argument for it being that this entire portfolio should show up in the outline as a whole. The argument against it being that since it is the only content on the page no <section> is needed and that it is conceivable that in the future extra content could be added in between the <div> and the <ul> which is not related to either.

2) Should the <div> be replaced by <section>? The argument being that this detail-picture is actually the main content of the page and could also include extra information (like a textual description) in the future. The argument against is simply that the <img> is adequately semantic and the <div> is there only for lay-out/scripting.

3) Should the <ul> be wrapped in an <aside>? Since it is definitely related to the detail-picture. But see also 5)

4) Should the <ul> be replaced by a <nav>? Argument for it is that clicking on a thumbnail changes (part of) the page and is therefore not a "true" list of items but a form of navigation. The argument against is that it is highly debatable if this constitutes a real form of navigation.

5) Now stretching a bit, it is conceivable that someone may argue that the thumbnails are actually the main-content and that the detail-picture is nothing more than a detail of part of that content.


Evert