On Mon, Oct 12, 2009 at 11:18 AM, Yuvalik Webdesign <postmas...@yuvalik.org> wrote: >> From: Ian Hickson [mailto:i...@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.
No need if, as you say, this is the only content on the page (+ header and footer). <body> is an implicit sectioning root. > 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. Without any further context, I'm going to assume that the <div> is indeed purely a styling/scripting hook. In that case, it should remain a <div>. > 3) Should the <ul> be wrapped in an <aside>? Since it is definitely related > to the detail-picture. But see also 5) Definitely not; it's part of the application. From your snippet, the page seems to be built as a picture-app, which means both the image and the thumbnails work together; neither is tangential to the purpose of the page like a sidebar would be. > 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. No, it probably shouldn't be a <nav>. It's possible to argue for it, but this probably isn't a "primary navigation" for the page. It's just part of the application. > 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. Nah, both pieces work together to create the application. Arguing that is really esoteric semantic-hacking, and isn't necessary. ~TJ