> From: Ian Hickson [mailto:[email protected]]
>
> 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
