[whatwg] Some discrepencies and example remarks

Mon Oct 12 09:31:52 PDT 2009

On Mon, Oct 12, 2009 at 11:18 AM, Yuvalik Webdesign
<postmaster at yuvalik.org> wrote:
>> 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.

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