HTML structure <article> and <section> needs to be redone [was: Issue #1224]

[siusin]

Re-file Issue #1224 from programmer3000.

from programmer3000:

Structure of document HTML 5.2 very strange and implicitly and must be rewrite. It's about elements <article> and <section>. What we have now. - example of structure what html creators think is perfect:
\r\n<article>\r\n\t<header>\r\n\t\t<h2>Apples</h2>\r\n\t\t<p>Tasty, delicious fruit!</p>\r\n\t</header>\r\n\t<p>The apple is the pomaceous fruit of the apple tree.</p>\r\n\t<section aria-label=\"Red apples.\">\r\n\t\t<h3>Red Delicious</h3>\r\n\t\t<p>These bright red apples are the most common found in many\r\n\t\tsupermarkets.</p>\r\n\t</section>\r\n\t<section aria-label=\"Green apples.\">\r\n\t\t<h3>Granny Smith</h3>\r\n\t\t<p>These juicy, green apples make a great filling for\r\n\t\tapple pies.</p>\r\n\t</section>\r\n</article>\r\n\r\n\r\nAnd same example as it should be (content(article) "Apples" inside big category(section) and sub-categories(section) "Red Delicious" and "Granny Smith" inside big category(section)):\r\n\r\n<section>\r\n\t<article>\r\n\t\t<header>\r\n\t\t\t<h2>Apples</h2>\r\n\t\t\t<p>Tasty, delicious fruit!</p>\r\n\t\t</header>\r\n\t\t<p>The apple is the pomaceous fruit of the apple tree.</p>\r\n\t</article>\r\n\t<section aria-label=\"Red apples.\">\r\n\t\t<h3>Red Delicious</h3>\r\n\t\t<p>These bright red apples are the most common found in many\r\n\t\tsupermarkets.</p>\r\n\t</section>\r\n\t<section aria-label=\"Green apples.\">\r\n\t\t<h3>Granny Smith</h3>\r\n\t\t<p>These juicy, green apples make a great filling for\r\n\t\tapple pies.</p>\r\n\t</section>\r\n</section>\r\n\r\n\r\n \r\nor this (big category(section) "Apples" and sub-categories(section) "Red Delicious" and "Granny Smith" inside big category(section)):\r\n\r\n\r\n<section>\r\n\t<header>\r\n\t\t<h2>Apples</h2>\r\n\t\t<p>Tasty, delicious fruit!</p>\r\n\t</header>\r\n\t<p>The apple is the pomaceous fruit of the apple tree.</p>\r\n\t<section aria-label=\"Red apples.\">\r\n\t\t<h3 aria-label=\"Red apples.\">Red Delicious</h3>\r\n\t\t<p>These bright red apples are the most common found in many\r\n\t\tsupermarkets.</p>\r\n\t</section>\r\n\t<section aria-label=\"Green apples.\">\r\n\t\t<h3 aria-label=\"Green apples.\">Granny Smith</h3>\r\n\t\t<p>These juicy, green apples make a great filling for\r\n\t\tapple pies.</p>\r\n\t</section>\r\n</section>\r\n
Main problem that write HTML creators about <article> and <section> does not conform to the logic and common sense. Because always everywhere content placed inside category and not category inside content. I think it must be strongly deprecated placed <section> inside <artice>

from LJWatson:

Why would you want to put a <section> element around an <article> element? The <section> element has no semantic meaning in that context.

from programmer3000:

@LJWatson why not? -because it most classical 100% semantic explicit structure without pervertions:
\r\n-Category\r\n\t-SubCategory1\r\n\t-Subcategory2\r\n\t...\r\n\t-SubcategoryN\r\n\t\t-Element1\r\n\t\t-Element2\r\n\t\t...\r\n\t\t-ElementN\r\n\r\n\r\nor\r\n\r\n\r\n-Category\r\n\t-Element_of_category1 (optionally)\r\n\t-Element2_of_category2 (optionally)\r\n\t...\r\n\t-Element_of_categoryN (optionally)\r\n\t-SubCategory1\r\n\t-Subcategory2\r\n\t...\r\n\t-SubcategoryN\r\n\t\t-Element1\r\n\t\t-Element2\r\n\t\t...\r\n\t\t-ElementN\r\n\r\n\r\n... where Category = <section> and Element = <article>

from edent:

because it most classical 100% semantic explicit structure without pervertions:
Please could you give us some citations where this style is used.

from chaals:

(Giving a thumbs up to your own comment is pretty pointless)
The semantics provided by HTML are not very strong, and usage in reality varies a lot.
There are articles which are far too small to have sections, and articles which most definitely should use them. Even in blogs, but also in more substantial publications. Trying to make this construction invalid doesn't seem to serve any useful purpose.

from LJWatson:

Worth noting that the <section> element only has (accessibility) semantics when it has an accessible name. Otherwise it's the semantic equivalent of a <div> element.
So:
\r\n<section>\r\n<article>...</article>\r\n</section>\r\n\r\n\r\nHas the same semantics as:\r\n\r\n<div>\r\n<article>...</article>\r\n</div>\r\n
Even if this was not the case, a <section> represents content that has a common theme. An <article> represents content that has the common theme of being article content. So wrapping an <article> inside a <section> makes no semantic sense in that regard either.
Suggest we close this.

from programmer3000:

@LJWatson @edent No no no. you everybody wrong about structure.
Yes, that example is bad, same bad as example6 to link https://www.w3.org/TR/html/sections.html#the-section-element ( example must be redone too because it have not semantical structure) .
<section> not same as <div> because specification said: "The authors strongly recommend that the element div be considered as an element of last resort." - that mean <div> can be use if other tags non-conforming, for example for styling or for non-important information without any structure.
But if you add <h1> - it will have semantic.
\r\n<section>\r\n\t<h1>Section name</h1>\r\n\t<article>...</article>\r\n</section>\r\n\r\n
And where you can find real useful section with such description "represents content that has a common theme"? What does it mean in practice? And why so strange with anti-logic semantic structure examples for <section> and <article> in HTML 5.2 specification? Mabye because peoples not fully understand how to apply it in practice.
"An <article> represents content that has the common theme of being article content." - where are you reading this? And what does that mean? How peoples can interpretate this and put into practice?
No, specification tell about <article> this:
"article element represents a complete, or self-contained, composition in a document, page, application, or site. This could be a magazine, newspaper, technical or scholarly article... " - and that description is really good. But description about <section> in HTML 5.2 specification looks like mean "hashtags" in vkontake or instagram. But it's not. It's nonsense, how can be practical to use with this description. Because absense normal alternate developers still use <div>, because <section> instead of category mean non-userfriendly something mystery "generic section of a document".
Situations where this style is used:\r\nExample24 (<li> always inside <ul> - element inside container but not container inside element, same for <table> --> <tr> --> <td>). If you open any news site - there is Header --> Subheader --> Article and hashtags (or tags(link to category)), but most often still uses <div>, mabye because peoples not understand how right to use <section>, because specification have not normal explain where it could be used in practicie with normal examples with semantic structure.
Example where style can be use:\r\npage with catalog of news (highly understanding and explicit structure)
\r\n<section>\r\n\t<h1>News></h1>\r\n\t<section>\r\n\t\t<h2>About Moscow</h2>\r\n\t</section>\r\n\t<section>\r\n\t\t<h2>About New York</h2>\r\n\t</section>\r\n\t<section>\r\n\t\t<h2>About stars</h2>\r\n\t</section>\r\n</section>\r\n\r\n\r\nsame if author want put ahead news as most interesting (about Britney Spears )\r\n\r\n\r\n\r\n<section>\r\n\t<h1>News></h1>\r\n\t<section>\r\n\t\t<h2>About Moscow</h2>\r\n\t</section>\r\n\t<section>\r\n\t\t<h2>About New York</h2>\r\n\t</section>\r\n\t<section>\r\n\t\t<h2>About stars</h2>\r\n\t\t<article>\r\n\t\t\t<h2>Britney Spears didn't watch Winter Olympics men’s downhill super-gigant downhill because it was postponed due to high winds </h2>\r\n\t\t\t<p>\r\n\t\t\tBritney Spears come to Pyeongchang watch for skiing but strongly wind no further her plans to be realized.\r\n\t\t\tThe men’s downhill, the blue riband event of the Winter Olympics, has been cancelled after 50mph gusts made it impossible for the gondolas taking the skiers up the mountain to be safely operated.\r\n\t\t\tWith weather at the Jeongseon Alpine Center expected to worsen over the coming hours, the organisers said they had no choice but to move the event, which was due to take place on Sunday lunchtime, to 11am on Thursday.\r\n\t\t\tThat will have the knock-on effect of pushing the men’s super-G to Friday, February 16.\r\n\t\t\tKorea’s united Olympic squad: symbol of hope or mere political stunt?\r\n\t\t\tRead more\r\n\t\t\tWhen there were fears earlier in the week that the race may have to be postponed, the 2014 Olympic Super G champion Kjetil Jansrud insisted that maintaining the integrity of the competition was paramount. “The message we got is that they want to do the downhill from the top in fair conditions,” he said. “I‘m thankful to hear that because that’s the way it should be in the Olympics. We do have reserve days and if the gondola’s not going to run we have a major problem.”\r\n\t\t\tInternational Ski Federation (FIS) chief race director Markus Waldner said at Friday’s team captains’ meeting that organisers were prepared for a lot more disruption over the next four days and were planning accordingly.\r\n\t\t\tWaldner said organisers would proceed with planning to race on Sunday with the first alternative being to move it to Monday at noon local time, between the two runs of the women’s giant slalom at the Yongpyong Alpine Centre.\r\n\t\t\tIf they were unable to run the downhill before Thursday, then it would replace the Super G in the schedule with the other speed race shifting to Friday, currently a rest day.\r\n\t\t\t“We have some challenging days ahead,” admitted Waldner.\r\n\t\t\tWeather disruptions are commonplace in Alpine skiing both on the World Cup circuit and at the Olympics, and organisers always give themselves plenty of room for adjustments.\r\n\t\t\tCanada’s Manuel Osborne-Paradis said dealing with the weather went part and parcel with competing in an outdoor sport. ‚“The weather happens - in and out of clouds, the wind, snow picks up, whatever,” he said. “You push out of the gate, you do your best for two minutes and all the stars have to align anyway. The only factor you’re in charge of is how you ski.”\r\n\t\t\tWorld champion Beat Feuz of Switzerland and past Olympic downhill medalists Aksel Lund Svindal and Kjetil Jansrud - both from Norway – are the favourites for the competition.\r\n\t\t\t</p>\r\n\t\t</article>\r\n\t</section>\r\n</section>\r\n\r\n\r\nand if page alone author cold use just <article> inside <body>\r\n\r\n\r\n<body>\r\n\t<article>\r\n\t\t<h2>Britney Spears didn't watch Winter Olympics men’s downhill super-gigant downhill because it was postponed due to high winds </h2>\r\n\t\t<p>\r\n\t\tBritney Spears come to Pyeongchang watch for skiing but strongly wind no further her plans to be realized.\r\n\t\tThe men’s downhill, the blue riband event of the Winter Olympics, has been cancelled after 50mph gusts made it impossible for the gondolas taking the skiers up the mountain to be safely operated.\r\n\t\tWith weather at the Jeongseon Alpine Center expected to worsen over the coming hours, the organisers said they had no choice but to move the event, which was due to take place on Sunday lunchtime, to 11am on Thursday.\r\n\t\tThat will have the knock-on effect of pushing the men’s super-G to Friday, February 16.\r\n\t\tKorea’s united Olympic squad: symbol of hope or mere political stunt?\r\n\t\tRead more\r\n\t\tWhen there were fears earlier in the week that the race may have to be postponed, the 2014 Olympic Super G champion Kjetil Jansrud insisted that maintaining the integrity of the competition was paramount. “The message we got is that they want to do the downhill from the top in fair conditions,” he said. “I‘m thankful to hear that because that’s the way it should be in the Olympics. We do have reserve days and if the gondola’s not going to run we have a major problem.”\r\n\t\tInternational Ski Federation (FIS) chief race director Markus Waldner said at Friday’s team captains’ meeting that organisers were prepared for a lot more disruption over the next four days and were planning accordingly.\r\n\t\tWaldner said organisers would proceed with planning to race on Sunday with the first alternative being to move it to Monday at noon local time, between the two runs of the women’s giant slalom at the Yongpyong Alpine Centre.\r\n\t\tIf they were unable to run the downhill before Thursday, then it would replace the Super G in the schedule with the other speed race shifting to Friday, currently a rest day.\r\n\t\t“We have some challenging days ahead,” admitted Waldner.\r\n\t\tWeather disruptions are commonplace in Alpine skiing both on the World Cup circuit and at the Olympics, and organisers always give themselves plenty of room for adjustments.\r\n\t\tCanada’s Manuel Osborne-Paradis said dealing with the weather went part and parcel with competing in an outdoor sport. ‚“The weather happens - in and out of clouds, the wind, snow picks up, whatever,” he said. “You push out of the gate, you do your best for two minutes and all the stars have to align anyway. The only factor you’re in charge of is how you ski.”\r\n\t\tWorld champion Beat Feuz of Switzerland and past Olympic downhill medalists Aksel Lund Svindal and Kjetil Jansrud - both from Norway – are the favourites for the competition.\r\n\t\t</p>\r\n\t</article>\r\n</body>\r\n\r\n

@chaals about thumb up - it's a joke, though mabye I think my comment too helpful))
"semantics provided by HTML are not very strong, and usage in reality varies a lot" - that is right. But strong and explicit are different meaning.
Current definition <section>:\r\n"The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content." - though not so bad, just for my examples.
I watch example 4 https://www.w3.org/TR/html/sections.html#the-article-element really no bad. Agreed, sometimes <section> inside <article> could have no bad semantic structure.
But example6 https://www.w3.org/TR/html/sections.html#the-section-element much pointless and must be redone.
I think specification must have example, where <article> inside <section> as most semantic explicit structure... for peoples to see different cases and mabye see something new for their projects.
I think example 7 https://www.w3.org/TR/html/sections.html#the-section-element must be remove as too weak and poor as semantic structure. Possible add my example instead it.
I think example 8 https://www.w3.org/TR/html/sections.html#the-section-element must be redone. Because there is no real article, just little introductory content.
I remade example8 for most right structure (I think it must be in specification):
\r\n<style>\r\n\tsection { border: double medium; margin: 2em; }\r\n\tsection.chapter h3 { font: 2em Roboto, Helvetica Neue, sans-serif; }\r\n\tsection.appendix h3 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }\r\n</style>\r\n...\r\n<section class=\"book\">\r\n\t<header>\r\n\t\t<h2>My Book</h2>\r\n\t\t<p>A sample with not much content</p>\r\n\t\t<p><small>Published by Dummy Publicorp Ltd.</small></p>\r\n\t</header>\r\n\t<section class=\"chapter\">\r\n\t\t<h3>My First Chapter</h3>\r\n\t\t<p>This is the first of my chapters. It doesn’t say much.</p>\r\n\t\t<p>But it has two paragraphs!</p>\r\n\t</section>\r\n\t<section class=\"chapter\">\r\n\t<h3>It Continues: The Second Chapter</h3>\r\n\t<p>Bla dee bla, dee bla dee bla. Boom.</p>\r\n\t</section>\r\n\t<section class=\"chapter\">\r\n\t<h3>Chapter Three: A Further Example</h3>\r\n\t<p>It’s not like a battle between brightness and earthtones would go\r\n\tunnoticed.</p>\r\n\t<p>But it might ruin my story.</p>\r\n\t</section>\r\n\t<section class=\"appendix\">\r\n\t<h3>Appendix A: Overview of Examples</h3>\r\n\t<p>These are demonstrations.</p>\r\n\t</section>\r\n\t<section class=\"appendix\">\r\n\t<h3>Appendix B: Some Closing Remarks</h3>\r\n\t<p>Hopefully this long example shows that you <em>can</em> style\r\n\tsections, so long as they are used to indicate actual sections.</p>\r\n\t</section>\r\n</section>\r\n

from Comandeer:

I'd like to put my 2 cents in.
<section> not same as <div> because specification said: "The authors strongly recommend that the element div be considered as an element of last resort." - that mean <div> can be use if other tags non-conforming, for example for styling or for non-important information without any structure.
In terms of specification – yes. But in reality section without a heading is just a div. It's even written in specification:
Each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
and:
A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
Therefore section without a heading is de facto non-conforming. In fact that's how it's been understood for years (this chart is from 2011).
And where you can find real useful section with such description "represents content that has a common theme"?
Actually every content that is delimited by a heading could be considered having a common theme, e.g. chapters in book or parts of webpage's article. IMO section is redundant to headings, yet it strengthen their semantics (now chapters are not implicitly delimited by headings, but explicitly by sections).
And why so strange with anti-logic semantic structure examples for

and in HTML 5.2 specification?
I don't see them as anti-logic. In fact they follow "headings-first principle" (HFP): content is already parted by headings and then we just add appropriate semantic element to make this parting explicit. Let's look at examples that you think should be redone/removed.
Example 6 is the direct implementation of HFP. The whole thing is an article (as it's self-contained, independent content; rule of thumb: could be put into RSS, it's probably an article) and every thematic section is marked up as section with appropriate heading. Therefore every content with a common theme is explicitly delimited.
Example 7 – the same, direct implementation of HFP. Every part of content describes different aspect of ceremony , so they should be delimited somehow. We can't use article here as these parts of content don't make sense on their own (without the whole concept of ceremony, user would lack necessary context to fully understand meaning of the content). Therefore we're left with section – a part of content that has a common theme.
Example 8 – the use of article seems to be appropriate as every single book could be a separate entry in RSS/Atom feed. To understand meaning of the specific book, we don't need any additional context (especially about other books), so such part of content is self-contained and independent – in terms of HTML 5.3 it's an article.

from programmer3000:

@Comandeer \r\n\r\n> But in reality section without a heading is just a div. It's even written in specification:\r\n> Each section should be identified, TYPICALLY by including a heading (h1-h6 element) as a child of the section element.\r\n\r\nYou incorrectly interpretate HTML 5.2 specification. TYPICALLY not equivalent MUST. Each section also coud be identified by descendant element (because TYPICALLY not MUST), for example inheriting what inside <header>. For example, if <p> inside <header> and author full sure what just full paragraph could right identifited <section> - why not?! :\r\n\r\n<section>\r\n\t<header>\r\n\t\t<p>Some text some text some text some text some text. \r\n\t\tSome text some text some text some text some text. \r\n\t\tSome text some text some text some text some text. Some \r\n\t\ttext some text some text some text some text. \r\n\t\tSome text some text some text some text some text.</p>\r\n\t</header>\r\n</section>\r\n\r\n\r\n\r\n> Therefore section without a heading is de facto non-conforming\r\n\r\nIf you watch example28 for outline https://www.w3.org/TR/html/sections.html#outline you can see about outline "User agents should provide default headings for sections that do not have explicit section headings."\r\n\r\n> Actually every content that is delimited by a heading could be considered having a common theme, e.g. chapters in book or parts of webpage's article. \r\n\r\n"every content that is delimited by a heading could be considered having a common theme" - there is nothing like this in the specification HTML 5.2. \r\nSpecification HTML 5.2 tell about section: <section> represents common theme of content.\r\n\r\n> I don't see them as anti-logic. In fact they follow "headings-first principle" (HFP): content is already parted by headings and then we just add appropriate semantic element to make this parting explicit. \r\n\r\nheading first or heading not-first or without heading - it doesn't matter, author can do how it sees it right.\r\n\r\n> Example 6 is the direct implementation of HFP. The whole thing is an article (as it's self-contained, independent content; rule of thumb: could be put into RSS, it's probably an article) and every thematic section is marked up as section with appropriate heading. Therefore every content with a common theme is explicitly delimited.\r\n\r\nWhat rss does it matter? Specification HTML 5.2 tell about article: "The article represents a complete or self-contained, composition in a document. This could be a magazine, newspaper, technical or scholarly article, an essay or report, a blog or other social media post.". It's mean <article> like news article. Article (example 6) if it is real article must have more massive content and not so small. Sometimes in theory if author so want it could be too small, but it is not typical case. This specification is global and main specification of global web as main language of internet. But it is strange when main specification have strange and poor examples (Example 6) instead have rich most useful most explicit examples.\r\n\r\nIt would be more typical case if example6 was like this (more massive <p> (content) inside <article>):\r\n\r\n<article>\r\n <header>\r\n <h2>Apples</h2>\r\n <p>An apple is a sweet, edible fruit produced by an apple \r\n\ttree (Malus pumila). Apple trees are cultivated worldwide \r\n\tas a fruit tree, and is the most widely grown species in the\r\n\tgenus Malus. The tree originated in Central Asia, where \r\n\tits wild ancestor, Malus sieversii, is still found today. \r\n\tApples have been grown for thousands of years in Asia and \r\n\turope, and were brought to North America by European \r\n\tcolonists. Apples have religious and mythological significance\r\n\tin many cultures, including Norse, Greek and European Christian \r\n\ttraditions.</p>\r\n </header>\r\n <p>The apple is the pomaceous fruit of the apple tree.</p>\r\n <section aria-label=\"Red apples.\">\r\n <h3>Red Delicious</h3>\r\n <p>These bright red apples are the most common found in many\r\n supermarkets.</p>\r\n </section>\r\n <section aria-label=\"Green apples.\">\r\n <h3>Granny Smith</h3>\r\n <p>These juicy, green apples make a great filling for\r\n apple pies.</p>\r\n </section>\r\n</article>\r\n\r\n\r\n> Example 7 – the same, direct implementation of HFP. Every part of content describes different aspect of ceremony , so they should be delimited somehow. \r\n\r\nThough agreed, example 7 has possible structure.\r\n\r\n> Example 8 – the use of article seems to be appropriate as every single book could be a separate entry in RSS/Atom feed. \r\n\r\nWhy about rss, it is topic not about rss. \r\n\r\nIt would be most right structure for example8 it it will be like this (more massive <p> (content) section which inside <article>):\r\n\r\n\r\n<style>\r\n section { border: double medium; margin: 2em; }\r\n section.chapter h3 { font: 2em Roboto, Helvetica Neue, sans-serif; }\r\n section.appendix h3 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }\r\n</style>\r\n...\r\n<article class=\"book\">\r\n <header>\r\n <h2>My Book</h2>\r\n <p>A sample with not much content. More text. More text.\r\n\t More text. More text. More text. More text. More text.\r\n\t More text. More text. More text. More text. More text.\r\n\t More text. More text. More text. More text.\r\n\t More text. More text. More text. More text. More text.\r\n\tMore text. More text.</p>\r\n <p><small>Published by Dummy Publicorp Ltd.</small></p>\r\n </header>\r\n <section class=\"chapter\">\r\n <h3>My First Chapter</h3>\r\n <p>This is the first of my chapters. It doesn’t say much.</p>\r\n <p>But it has two paragraphs! More text. More text. More text.\r\n\t More text. More text. More text. More text. More text.\r\n\t More text. More text. More text. More text. More text.</p>\r\n </section>\r\n <section class=\"chapter\">\r\n <h3>It Continues: The Second Chapter</h3>\r\n <p>Bla dee bla, dee bla dee bla. Boom. More text. More text.\r\n\t More text. More text. More text. More text. More text.\r\n\t More text. More text. More text. More text. More text.\r\n\t More text. More text. More text. More text. More text.\r\n\t More text. More text. More text. More text. More text.</p>\r\n </section>\r\n <section class=\"chapter\">\r\n <h3>Chapter Three: A Further Example</h3>\r\n <p>It’s not like a battle between brightness and earthtones would go\r\n unnoticed. More text. More text. More text. More text. More text.\r\n\t More text. More text. More text. More text. More text. More text.\r\n\t More text. More text. More text. More text. More text. More text.\r\n\t More text. More text. More text. More text. More text. More text.</p>\r\n <p>But it might ruin my story.</p>\r\n </section>\r\n <section class=\"appendix\">\r\n <h3>Appendix A: Overview of Examples</h3>\r\n <p>These are demonstrations. More text. More text. More text.\r\n\t More text. More text. More text. More text. More text.\r\n\t More text. More text. More text. More text.</p>\r\n </section>\r\n <section class=\"appendix\">\r\n <h3>Appendix B: Some Closing Remarks</h3>\r\n <p>Hopefully this long example shows that you <em>can</em> style\r\n sections, so long as they are used to indicate actual sections. \r\n\t More text. More text. More text. More text. More text.\r\n\t More text. More text. More text. More text. More text.\r\n\t More text. More text. More text. More text. More text.\r\n\t More text. More text. More text. More text. More text.</p>\r\n </section>\r\n</article>\r\n\r\n\r\n\r\nor like this, where <header> represents <article> as content and below <section> like categories (massive <p> just inside <header> )\r\n\r\n<style>\r\n section { border: double medium; margin: 2em; }\r\n section.chapter h3 { font: 2em Roboto, Helvetica Neue, sans-serif; }\r\n section.appendix h3 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }\r\n</style>\r\n...\r\n<article class=\"book\">\r\n <header>\r\n <h2>My Book</h2>\r\n <p>A sample with not much content. More text. More text.\r\n\t More text. More text. More text. More text. More text.\r\n\t More text. More text. More text. More text. More text.\r\n\t More text. More text. More text. More text.\r\n\t More text. More text. More text. More text. More text.\r\n\tMore text. More text.</p>\r\n <p><small>Published by Dummy Publicorp Ltd.</small></p>\r\n </header>\r\n <section class=\"chapter\">\r\n <h3>My First Chapter</h3>\r\n <p>This is the first of my chapters. It doesn’t say much.</p>\r\n <p>But it has two paragraphs!</p>\r\n </section>\r\n <section class=\"chapter\">\r\n <h3>It Continues: The Second Chapter</h3>\r\n <p>Bla dee bla, dee bla dee bla. Boom.</p>\r\n </section>\r\n <section class=\"chapter\">\r\n <h3>Chapter Three: A Further Example</h3>\r\n <p>It’s not like a battle between brightness and earthtones would go\r\n unnoticed.</p>\r\n <p>But it might ruin my story.</p>\r\n </section>\r\n <section class=\"appendix\">\r\n <h3>Appendix A: Overview of Examples</h3>\r\n <p>These are demonstrations.</p>\r\n </section>\r\n <section class=\"appendix\">\r\n <h3>Appendix B: Some Closing Remarks</h3>\r\n <p>Hopefully this long example shows that you <em>can</em> style\r\n sections, so long as they are used to indicate actual sections.</p>\r\n </section>\r\n</article>\r\n\r\nor example which above (sub-categories inside big category):\r\n\r\n<style>\r\n section { border: double medium; margin: 2em; }\r\n section.chapter h3 { font: 2em Roboto, Helvetica Neue, sans-serif; }\r\n section.appendix h3 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }\r\n</style>\r\n...\r\n<section class=\"book\">\r\n <header>\r\n <h2>My Book</h2>\r\n <p>A sample with not much content</p>\r\n <p><small>Published by Dummy Publicorp Ltd.</small></p>\r\n </header>\r\n <section class=\"chapter\">\r\n <h3>My First Chapter</h3>\r\n <p>This is the first of my chapters. It doesn’t say much.</p>\r\n <p>But it has two paragraphs!</p>\r\n </section>\r\n <section class=\"chapter\">\r\n <h3>It Continues: The Second Chapter</h3>\r\n <p>Bla dee bla, dee bla dee bla. Boom.</p>\r\n </section>\r\n <section class=\"chapter\">\r\n <h3>Chapter Three: A Further Example</h3>\r\n <p>It’s not like a battle between brightness and earthtones would go\r\n unnoticed.</p>\r\n <p>But it might ruin my story.</p>\r\n </section>\r\n <section class=\"appendix\">\r\n <h3>Appendix A: Overview of Examples</h3>\r\n <p>These are demonstrations.</p>\r\n </section>\r\n <section class=\"appendix\">\r\n <h3>Appendix B: Some Closing Remarks</h3>\r\n <p>Hopefully this long example shows that you <em>can</em> style\r\n sections, so long as they are used to indicate actual sections.</p>\r\n </section>\r\n</section>\r\n\r\n\r\nSo specification HTML 5.2 must have explicit note about "<article> could placed inside <section> and <section> could placed inside <article>" and must have example where <article> inside <section>. Because no examples where <article> inside <section> structure... like this deprecated but it is not and most cleary structure.\r\n\r\nExample where <article> inside <section> like this (Sub-categories inside big category "News" and author explicit showed article content about Britney Spears):\r\n\r\n<section>\r\n\t<h1>News></h1>\r\n\t<section>\r\n\t\t<h2>About Moscow</h2>\r\n\t</section>\r\n\t<section>\r\n\t\t<h2>About New York</h2>\r\n\t</section>\r\n\t<section>\r\n\t\t<h2>About stars</h2>\r\n\t\t<article>\r\n\t\t\t<h2>Britney Spears didn't watch Winter Olympics men’s downhill \r\n\t\t\tsuper-gigant downhill because it was postponed due to high \r\n\t\t\twinds </h2>\r\n\t\t\t<p>\r\n\t\t\tBritney Spears come to Pyeongchang watch for skiing but strongly \r\n\t\t\twind no further her plans to be realized.\r\n\t\t\tThe men’s downhill, the blue riband event of the Winter \r\n\t\t\tOlympics, has been cancelled after 50mph gusts made it \r\n\t\t\timpossible for the gondolas taking the skiers up the mountain \r\n\t\t\tto be safely operated.\r\n\t\t\tWith weather at the Jeongseon Alpine Center expected to worsen \r\n\t\t\tover the coming hours, the organisers said they had no choice \r\n\t\t\tbut to move the event, which was due to take place on Sunday \r\n\t\t\tlunchtime, to 11am on Thursday.</p>\r\n\t\t\t<p>That will have the knock-on effect of pushing the men’s \r\n\t\t\tsuper-G to Friday, February 16.\r\n\t\t\tKorea’s united Olympic squad: symbol of hope or mere \r\n\t\t\tpolitical stunt?\r\n\t\t\tRead more</p>\r\n\t\t\t<p>When there were fears earlier in the week that \r\n\t\t\tthe race may have to be postponed, the 2014 Olympic \r\n\t\t\tSuper G champion Kjetil Jansrud insisted that \r\n\t\t\tmaintaining the integrity of the competition was \r\n\t\t\tparamount. “The message we got is that they want to \r\n\t\t\tdo the downhill from the top in fair conditions,” \r\n\t\t\the said. “I‘m thankful to hear that because \r\n\t\t\tthat’s the way it should be in the Olympics. \r\n\t\t\tWe do have reserve days and if the gondola’s not \r\n\t\t\tgoing to run we have a major problem.”\r\n\t\t\t</p>\r\n\t\t</article>\r\n\t</section>\r\n</section>\r\n

from scottaohara:

Just wanted to jump in here and mention that I'll be giving these elements a review.
It seems to me that there might be some areas where we can be a bit more explicit about usage, to help clear up some of how these elements should be interpreted by developers.

from js-choi:

See also recent activity at whatwg/html#83, starting from whatwg/html#83 (comment).

from programmer3000:

You still don't add in HTML 5.3 case where <article> placed inside <section> ?

Closed by pull #1324