Re: [whatwg] Some discrepencies and example remarks
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 lia href=example1.jpgimg src=example1_thmb.jpg //a/li lia href=example2.jpgimg src=example2_thmb.jpg //a/li lia href=example3.jpgimg src=example3_thmb.jpg //a/li lia href=example4.jpgimg 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
Re: [whatwg] Some discrepencies and example remarks
On Fri, 9 Oct 2009, Yuvalik Webdesign wrote: A) In the NAV element it says: In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links. But then in the example of the ASIDE we find: footer nav a href=/archivesArchives/a — a href=/aboutAbout me/a — a href=/copyrightCopyright/a /nav /footer The nav isn't necessary, but it is allowed. I've tried to clarify the text you quote above. B) It also says for ASIDE that: The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars... Isn't a pull-quote to be placed in a blockquote? (which is a sectioning root if I am not mistaken?) Sure, you can put the text in a blockquote or q in the aside. One of the examples does this, in fact (search for People ask me what I do). Also, a side-bar, what is that, since side-bars are usually separately layed-out and not always directly around the content. Not sure what you are asking here. Also, it says at the SECTION element: When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. Does this only apply to SECTION, or also to ASIDE? It applies to everything, actually, but it's listed explicitly in the section section because that has been the element we have seen most often abused for generic purposes. (Some people seem to just use section like they used div.) C) When talking about outline (in the context of sectioning) I gather we are NOT talking about the DOM-tree, but about (a Table Of) Contents kind of outline. Right. Does a generic page-header and footer (containing a site-wide logo, style and navigation) belong in such an outline? If not, does this mean it has to be enclosed in a separate SECTION element? Nothing about this is made clear either in wording or examples. I don't understand why this is a question. Why would it not belong in the outline? 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. D) I also find a lot of Notes that are phrased in such a way that they keep the interpretation open for discussion. Things like when it would make sense or other content that is considered separate from the main content or content that is tangentially related etc. etc. In the real world these kinds of guidelines are open for discussion on a per-situation basis. And may lead to mis-use of the elements. If you have any specific cases you think should be tightened up, please feel free to bring them up. It's hard to know exactly which ones you think are too vague. E) The TIME element, I know, I know. I followed that discussion and a lot has been said about it. My main concern now is that the spec is still not clear on how and where it can be used correctly. For example, marking up times and dates for historical documents... in the discussion on this list it has been explicitly implied that this element is NOT to be used for that, but in the spec I can still interpret the wording to mean that I may. It's fine to use it for historic documents for recent history. The spec mentions that using it for times before Gregorian dates is tricky. It's impossible to give dates before about 1AD Julian (before exactly 1AD Gregorian). I don't really know what else we could say. D) All in all I would like to recommend, and I hope you will seriously consider, rewriting all the examples. Currently the examples are not representative of real-world cases. I suggest you find a collection of existing websites of all types (blog, webshop, social-site, educational, company-profile, application etc. etc.) and base your examples on that. Trying to show good and clear use cases and differences. 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. On Sat, 10 Oct 2009, Yuvalik Webdesign wrote: So you are saying that aside can be generally used as the smaller columns on pages regardless of their contents, as long as it is somehow related to the page (which obviously it is always)? More or less. I think you misunderstand my
Re: [whatwg] Some discrepencies and example remarks
From: Ian Hickson C) When talking about outline (in the context of sectioning) I gather we are NOT talking about the DOM-tree, but about (a Table Of) Contents kind of outline. Right. Does a generic page-header and footer (containing a site-wide logo, style and navigation) belong in such an outline? If not, does this mean it has to be enclosed in a separate SECTION element? Nothing about this is made clear either in wording or examples. I don't understand why this is a question. Why would it not belong in the outline? Because of the fact the outline is a sort of TOC, and sometimes stuff that goes in a header doesn't belong in a TOC (since it is not content in the strictest sense of the word). But I think Tab Atkins answered this by giving me the advice not to over-think this too much. And he is probably right. 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. Again, maybe I am trying too much here, but let me explain: 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. 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? Perhaps a small example, currently I am working on a site where content which is generally regarded as a header, is placed as a sidebar on the lower right of the page. It only contains a logo and a slideshow. Is this a header or is this a div? Can you provide the URI? I would be happy to take a look, and maybe base an example in the spec on this. As I am still working in the site it is local, so no URI. Also I am somewhat uncomfortable with sending you the source-code as it is rather messy right now (I had to rework the site as the client had some new ideas he wanted to try out). I will try to include this code in the examples I will send. Thanks for your answers, Evert
Re: [whatwg] Some discrepencies and example remarks
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 lia href=example1.jpgimg src=example1_thmb.jpg //a/li lia href=example2.jpgimg src=example2_thmb.jpg //a/li lia href=example3.jpgimg src=example3_thmb.jpg //a/li lia href=example4.jpgimg 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
Re: [whatwg] Some discrepencies and example remarks
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 lia href=example1.jpgimg src=example1_thmb.jpg //a/li lia href=example2.jpgimg src=example2_thmb.jpg //a/li lia href=example3.jpgimg src=example3_thmb.jpg //a/li lia href=example4.jpgimg 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
Re: [whatwg] Some discrepencies and example remarks
From: Tab Atkins Jr. 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. 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. The line between designer and developer is not clearly marked, there is consensus on both side of the spectrum at the end, but the more you get towards the middle, the less clear it becomes. Suppose the example I gave looks like this: iframe src=example1_jpg.html name=detail p A long story regarding the companies' origins and goals... /p div id=advert.../div ul lia target=detail href=example1_jpg.htmlimg src=example1_thmb.jpg //a/li lia target=detail href=example2_jpg.htmlimg src=example2_thmb.jpg //a/li lia target=detail href=example3_jpg.htmlimg src=example3_thmb.jpg //a/li lia target=detail href=example4_jpg.htmlimg 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? Secondly, it divides the detail-picture from the thumbnails with oodles of non related content. Now, if this means the mark-up in this example should be different from the previous example, this means the mark-up is therefore not JUST semantic-related, and that would defy the main intent of HTML5 if I am not mistaken? I hope I am making my point clear? Evert
Re: [whatwg] Some discrepencies and example remarks
On Mon, Oct 12, 2009 at 1:56 PM, Yuvalik Webdesign postmas...@yuvalik.org wrote: From: Tab Atkins Jr. iframe src=example1_jpg.html name=detail p A long story regarding the companies' origins and goals... /p div id=advert.../div ul lia target=detail href=example1_jpg.htmlimg src=example1_thmb.jpg //a/li lia target=detail href=example2_jpg.htmlimg src=example2_thmb.jpg //a/li lia target=detail href=example3_jpg.htmlimg src=example3_thmb.jpg //a/li lia target=detail href=example4_jpg.htmlimg src=example4_thmb.jpg //a/li /ul I don't think the markup should be any different. The thumbnails still appear to be part of the content. The advert in the middle should probably be an aside, though. ^_^ Ok, thanks. But shouldn't the iframe and the p be in separate sections? (seeing as they are not related to each other). 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. ~TJ
Re: [whatwg] Some discrepencies and example remarks
Evert wrote: I am still having problems accepting the differences between section and article though. I understand when to use one over the other, but what was the background for choosing two elements instead of one? What is the drawback of defining just one in the spec (either section or article) and giving that one all the use cases and abilities of the two? I don't see how that would affect anything (not even AT). An excellent question. And I think it's very telling that this overlap is confusing for a working web developer looking at the spec with a fresh perspective. section and article used to be somewhat different. article used to take optional @cite and @pubdate attributes. Now section and article are pretty much identical (the only content model difference being that article may contain a time element with an optional @pubdate attribute). The only semantic difference between the two elements is an adjective: standalone (or independent), which applies to article but not to section ...even though section, by definition, is a collection of related content. The only justification I've heard for the continued existence of two new elements when just one will do, is that it will help authors of blogs from adding class=post to their entries. That is an extremely flimsy justification, one that could be used to justify adding hundreds of new elements to HTML5 (e.g. recipe, comment, story, widget). I'm most puzzled by the cognitive dissonance between the refusal to drop a redundant new element like article, and the refusal at all costs to add new elements where they would be genuinely useful (such as a labelling element for figure and details). -- Jeremy Keith a d a c t i o http://adactio.com/
Re: [whatwg] Some discrepencies and example remarks
From: Tab Atkins Jr. I meant it when I said you were overthinking things. ^_^ Don't try too hard; the categories are general and pretty simple. Very well, perhaps I am overcomplicating things a bit. I'll try to be a bit less stringent in my mark-up (I guess I am trying to be too much of a perfectionist sometimes) As well, it's not really expected that most authors will read the spec, but rather that they'll read tutorials and examples on the web, which can go more in depth about particular types of layouts. Call me silly, but I like to get my information from the source. I always have a copy of the HTML4 and CSS2 specs next to my keyboard in case I need it. Only if those specs are unclear to me do I start looking elsewhere. (even though I have been making websites for more than 10 years no, I still make mistakes and can't be expected to remember everything) I am still having problems accepting the differences between section and article though. I understand when to use one over the other, but what was the background for choosing two elements instead of one? What is the drawback of defining just one in the spec (either section or article) and giving that one all the use cases and abilities of the two? I don't see how that would affect anything (not even AT). Evert
[whatwg] Some discrepencies and example remarks
First off, I apologise if this message appears twice in the list. After registration, something went wrong on my end and it seems my message was not picked up by the list. If it does appear twice, again my apologies. Disregard the other one. In regard to my remarks, I would also like to point out that I am looking at the spec from a web designers point of view (not a developer or a programmer) I followed the progress of the spec and the discussions on this list for some time now, and I feel it is time for me to vent some of my findings and ideas. I will limit myself to section 4 (The elements of HTML) http://dev.w3.org/html5/spec/Overview.html#semantics. I Find a lot of the descriptive texts, notes and examples to be either incomplete, confusing, ambiguous and sometimes even contradictory (again, from a designers point of view). Esp. In regard to the Sectioning Elements. Some examples of this are: A) In the NAV element it says: In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links. But then in the example of the ASIDE we find: footer nav a href=/archivesArchives/a — a href=/aboutAbout me/a — a href=/copyrightCopyright/a /nav /footer B) It also says for ASIDE that: The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars... Isn't a pull-quote to be placed in a blockquote? (which is a sectioning root if I am not mistaken?) Also, a side-bar, what is that, since side-bars are usually separately layed-out and not always directly around the content. Also, it says at the SECTION element: When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. Does this only apply to SECTION, or also to ASIDE? C) When talking about outline (in the context of sectioning) I gather we are NOT talking about the DOM-tree, but about (a Table Of) Contents kind of outline. Does a generic page-header and footer (containing a site-wide logo, style and navigation) belong in such an outline? If not, does this mean it has to be enclosed in a separate SECTION element? Nothing about this is made clear either in wording or examples. 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). D) I also find a lot of Notes that are phrased in such a way that they keep the interpretation open for discussion. Things like when it would make sense or other content that is considered separate from the main content or content that is tangentially related etc. etc. In the real world these kinds of guidelines are open for discussion on a per-situation basis. And may lead to mis-use of the elements. E) The TIME element, I know, I know. I followed that discussion and a lot has been said about it. My main concern now is that the spec is still not clear on how and where it can be used correctly. For example, marking up times and dates for historical documents... in the discussion on this list it has been explicitly implied that this element is NOT to be used for that, but in the spec I can still interpret the wording to mean that I may. D) All in all I would like to recommend, and I hope you will seriously consider, rewriting all the examples. Currently the examples are not representative of real-world cases. I suggest you find a collection of existing websites of all types (blog, webshop, social-site, educational, company-profile, application etc. etc.) and base your examples on that. Trying to show good and clear use cases and differences. Evert
Re: [whatwg] Some discrepencies and example remarks
On Fri, Oct 9, 2009 at 12:12 PM, Yuvalik Webdesign postmas...@yuvalik.org wrote: B) It also says for ASIDE that: The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars... Isn't a pull-quote to be placed in a blockquote? (which is a sectioning root if I am not mistaken?) No, actual quotes as part of the content go in blockquote. Pull-quotes are those things you see sometimes in magazine articles where a particular quote that's already in the article is duplicated and specially laid out for effect. Also, a side-bar, what is that, since side-bars are usually separately layed-out and not always directly around the content. You're interpreting around too strictly here. It means just nearby here. It means exactly what it says - aside can be used for marking up the sort of thing that you typically see in a sidebar in magazines. It is also useful for marking up the traditional sidebar content of webpages, where there's a fairly narrow column to the left or right of the main content containing tangential information like blogrolls. Also, it says at the SECTION element: When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. Does this only apply to SECTION, or also to ASIDE? In general, if something exists for the sole purpose of scripting or styling convenience, it should be div or span. The reason only section mentions this specifically is because it has the thinnest semantics - it just represents a segment of content, but indicates that this segment is significant in the page outline. The other elements like aside have sufficiently specific semantics that it's less of a concern that they'll be misused for general styling/scripting hooks. C) When talking about outline (in the context of sectioning) I gather we are NOT talking about the DOM-tree, but about (a Table Of) Contents kind of outline. Does a generic page-header and footer (containing a site-wide logo, style and navigation) belong in such an outline? If not, does this mean it has to be enclosed in a separate SECTION element? Nothing about this is made clear either in wording or examples. The headings that may be contained in header belong in the outline, and those are indicated simply by marking them up with h1, h2, etc. Don't overthink it. ^_^ 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). What do you mean here? The Rendering section describes a default stylesheet that is recommended for normal visual UAs to employ. D) I also find a lot of Notes that are phrased in such a way that they keep the interpretation open for discussion. Things like when it would make sense or other content that is considered separate from the main content or content that is tangentially related etc. etc. In the real world these kinds of guidelines are open for discussion on a per-situation basis. And may lead to mis-use of the elements. That's really about as specific as you can get, though, or else you risk lots of real-world stuff not fitting *any* definition. The misuse due to misinterpretation of these elements should hopefully be minimal - if you have specific concerns/confusions about how particular content should be marked up using the new elements, please share! E) The TIME element, I know, I know. I followed that discussion and a lot has been said about it. My main concern now is that the spec is still not clear on how and where it can be used correctly. For example, marking up times and dates for historical documents... in the discussion on this list it has been explicitly implied that this element is NOT to be used for that, but in the spec I can still interpret the wording to mean that I may. If you can mark them up under the limitations on the content of @datetime, more power to you. The point of that section is to make clear that marking up historical dates was *not* the primary use-case, or even an auxiliary use-case, so you shouldn't be surprised if it doesn't work out well (like if you end up with a date before 1AD that can't be marked up with time, while all your other dates are fine). D) All in all I would like to recommend, and I hope you will seriously consider, rewriting all the examples. Currently the examples are not representative of real-world cases. I suggest you find a collection of existing websites of all types (blog, webshop, social-site, educational, company-profile, application etc. etc.) and base your examples on that. Trying to show good and clear use cases and differences.
Re: [whatwg] Some discrepencies and example remarks
From: Tab Atkins Jr. Also, a side-bar, what is that, since side-bars are usually separately layed-out and not always directly around the content. You're interpreting around too strictly here. It means just nearby here. It means exactly what it says - aside can be used for marking up the sort of thing that you typically see in a sidebar in magazines. It is also useful for marking up the traditional sidebar content of webpages, where there's a fairly narrow column to the left or right of the main content containing tangential information like blogrolls. So you are saying that aside can be generally used as the smaller columns on pages regardless of their contents, as long as it is somehow related to the page (which obviously it is always)? C) When talking about outline (in the context of sectioning) I gather we are NOT talking about the DOM-tree, but about (a Table Of) Contents kind of outline. Does a generic page-header and footer (containing a site-wide logo, style and navigation) belong in such an outline? If not, does this mean it has to be enclosed in a separate SECTION element? Nothing about this is made clear either in wording or examples. The headings that may be contained in header belong in the outline, and those are indicated simply by marking them up with h1, h2, etc. Don't overthink it. ^_^ I think you misunderstand my point/question. A page-header (or page-footer) can consist of more than just semantic content and navigation. It can consist of a logo, styling, non-related information (sometimes above this header we have search boxes and login panels, etc. etc). Do these become part of the header or is the header to become part of a div in such cases? Also, if below a header with content we have a styled image (purely for visual means) does this become part of the header or not? Where is the line drawn? See also below. 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). What do you mean here? The Rendering section describes a default stylesheet that is recommended for normal visual UAs to employ. D) All in all I would like to recommend, and I hope you will seriously consider, rewriting all the examples. Currently the examples are not representative of real-world cases. I suggest you find a collection of existing websites of all types (blog, webshop, social-site, educational, company-profile, application etc. etc.) and base your examples on that. Trying to show good and clear use cases and differences. Can you give any examples? I've been able to use the elements pretty usefully on my own pages based on spec text, especially since the last round of changes/clarifications. What I mean is that I can understand and read the spec when seen from a pure content point of view. A lot of information regarding the outline and how content is to be marked up. But very little in regard to the actual marking up of lay-out (which has less to do with content, but can still act as containers for content). Perhaps a small example, currently I am working on a site where content which is generally regarded as a header, is placed as a sidebar on the lower right of the page. It only contains a logo and a slideshow. Is this a header or is this a div? I can give you several dozens of those questions. What I mean is, the spec doesn't give us examples other than those which are obvious, it doesn't give us insight in more complex lay-outs. And once the spec is ready and becomes used by others like me (which maybe less insightfull than you are in the spec since we weren't so closely involved in it) then those designers will be faced with questions the spec has no answers for. Again, this is no critique on the spec itself, just on the lack of more real and complex lay-out examples related to content mark-up. Evert
Re: [whatwg] Some discrepencies and example remarks
On Fri, Oct 9, 2009 at 5:33 PM, Yuvalik Webdesign postmas...@yuvalik.org wrote: From: Tab Atkins Jr. Also, a side-bar, what is that, since side-bars are usually separately layed-out and not always directly around the content. You're interpreting around too strictly here. It means just nearby here. It means exactly what it says - aside can be used for marking up the sort of thing that you typically see in a sidebar in magazines. It is also useful for marking up the traditional sidebar content of webpages, where there's a fairly narrow column to the left or right of the main content containing tangential information like blogrolls. So you are saying that aside can be generally used as the smaller columns on pages regardless of their contents, as long as it is somehow related to the page (which obviously it is always)? Yes. If it's tangentially related (that is, it can be removed from the document without affecting the meaning of the document), use aside (unless nav, header, or footer is more appropriate). C) When talking about outline (in the context of sectioning) I gather we are NOT talking about the DOM-tree, but about (a Table Of) Contents kind of outline. Does a generic page-header and footer (containing a site-wide logo, style and navigation) belong in such an outline? If not, does this mean it has to be enclosed in a separate SECTION element? Nothing about this is made clear either in wording or examples. The headings that may be contained in header belong in the outline, and those are indicated simply by marking them up with h1, h2, etc. Don't overthink it. ^_^ I think you misunderstand my point/question. A page-header (or page-footer) can consist of more than just semantic content and navigation. It can consist of a logo, styling, non-related information (sometimes above this header we have search boxes and login panels, etc. etc). Do these become part of the header or is the header to become part of a div in such cases? Also, if below a header with content we have a styled image (purely for visual means) does this become part of the header or not? Where is the line drawn? See also below. The non-related stuff should be wrapped in asides, and then can go inside or outside the header - it shouldn't really matter. Frex, in the header on http://www.igofigure.com (a site I control, but that is currently HTML4), the two tag lines would be h1 and h2 in an hgroup, the nav bar just below would be a nav, and everything else would be asides. Just for styling convenience, I'd put them all in the header. Perhaps a small example, currently I am working on a site where content which is generally regarded as a header, is placed as a sidebar on the lower right of the page. It only contains a logo and a slideshow. Is this a header or is this a div? I can give you several dozens of those questions. If it's acting like the site header, then yeah, it should be header. The slideshow is probably tangential, and would be in an aside. What I mean is, the spec doesn't give us examples other than those which are obvious, it doesn't give us insight in more complex lay-outs. And once the spec is ready and becomes used by others like me (which maybe less insightfull than you are in the spec since we weren't so closely involved in it) then those designers will be faced with questions the spec has no answers for. I meant it when I said you were overthinking things. ^_^ Don't try too hard; the categories are general and pretty simple. As well, it's not really expected that most authors will read the spec, but rather that they'll read tutorials and examples on the web, which can go more in depth about particular types of layouts. ~TJ
