[whatwg] Some discrepencies and example remarks

[Ian Hickson]

On Mon, 12 Oct 2009, Yuvalik Webdesign wrote:
> > > 
> > > The spec is not very clear anywhere about styling practices (I know 
> > > this is CSS' job, but within HTML the mark-up should at least be 
> > > mentioned).
> > 
> > Could you elaborate on what you had in mind? Note that default styles 
> > are listed in detail in their own section.
> 
> I know, but that was not what I had in mind. I wish there were some 
> examples that showed the difference in mark-ups between using <section>, 
> <article> etc. and <div>.

There are at least four examples in the spec that show <div> and <article> 
or <section> used together.

I'm happy to add more, if you have any specific requests.


> When starting a job you get content from the client (well, hopefully ;-) 
> You start out by categorizing and sorting this content; this process can 
> be an actual job you do, or something you do "subconsciously" while 
> working at the site. In an ideal situation, it is easy to sort the 
> content in two categories: content that belongs in the outline and pure 
> lay-out. But sometimes this choice is not so black and white. In those 
> cases, one designer may use a <div> while another may use a <section> or 
> an <aside>. Now I am not saying the spec should educate on this (as it 
> has been mentioned, this is a job for tutorial sites etc.), but what I 
> am saying is that it may be prudent to use more complex examples in the 
> spec that address the difference in when to use <section> etc. and when 
> to use <div> to make the line less gray.

If you have any concrete examples I could include, I'd be happy to do so. 
I'm probably not the best person to be writing such examples, though.


> > 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.
> 
> I'd be perfectly happy to provide you with some examples, but I hope you 
> will give me some helpfull feedback if I make a mistake in them. I will 
> rework the examples for sectioning elements. Is a time-frame of two 
> weeks ok with you?

Rather than reworking examples, let's just add more. :-)

Any time frame is fine; I'll add them whenever they are available.


On Mon, 12 Oct 2009, Yuvalik Webdesign wrote:
> 
> 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?

The code above seems fine, though I probably wouldn't bother with the 
<div> (either using a <p> or nothing at all, depending on what else is 
there). You could also use an <iframe> instead of the <img> in the 
"detail" div, so that you don't need JS. And of course there's a bunch of 
missing alt="" attributes that are required in HTML5 (and 4).


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

It maybe could have a section, but I'd have to see the rest of the page to 
say for sure. Doesn't seem necessary though.


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

I would probably remove the <div> altogether.


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

Unless it could be removed without significantly changing the meaning of 
the page (which seems unlikely here), I would say no.


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

It doesn't seem like a navigation menu to me.


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

Neither makes sense without the other, so I'd be skeptical of that line of 
reasoning.


On Mon, 12 Oct 2009, Yuvalik Webdesign wrote:
> 
> I think this is the core of the "problem". There is a large grey area 
> where design and development overlap. Most designers would most 
> definitely *not* call this an app, but I guess most developers would. 

Document, app, it doesn't matter. There's a spectrum, and few things these 
days are at either end of the line. Is the HTML5 spec itself a document or 
an app? (It has plenty of scripting.) It doesn't matter.


> <iframe src="example1_jpg.html" name="detail">
>         
> <p>
> A long story regarding the companies' origins and goals...
> </p>
> 
> <div id="advert">...</div>
> 
> <ul>
>        <li><a target="detail" href="example1_jpg.html"><img src="example1_thmb.jpg /></a></li>
>        <li><a target="detail" href="example2_jpg.html"><img src="example2_thmb.jpg /></a></li>
>        <li><a target="detail" href="example3_jpg.html"><img src="example3_thmb.jpg /></a></li>
>        <li><a target="detail" href="example4_jpg.html"><img src="example4_thmb.jpg /></a></li> </ul>
> 
> First of all, this example works more or less the same as the other one, 
> except this time there is no scripting, so could it technically still be 
> called an application?

Sure, it's basically the same thing. In fact I suggested above that this 
might be the way to do it. :-)


> Secondly, it divides the detail-picture from the thumbnails with oodles 
> of non related content.

I'd say that is poor UI, but apart from that it's neither here not there.


> Now, if this means the mark-up in this example should be different from 
> the previous example --

It doesn't.


On Mon, 12 Oct 2009, Yuvalik Webdesign wrote:
> 
> Ok, thanks. But shouldn't the <iframe> and the <p> be in separate 
> <section>s? (seeing as they are not related to each other).

If you printed the page, would you say they were in different sections?


On Mon, 12 Oct 2009, Tab Atkins Jr. wrote:
> 
> Depends.  Would you put heading on each of those?  If so, then sure. 
> That's the most basic determining criteria for if a <section> should be 
> used.
> 
> If you wouldn't, then no.  Sometimes things just mash together like 
> that.

Indeed.

The header guideline is a reasonable one, though it should be noted that 
just because you _could_ put a header at the top of each section doesn't 
mean you necessarily _should_ or that you would want to.

HTH,
-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'