24372 2014-01-23 14:18:23 +0000 Why does the summary element only allow Phrasing content? I ran into a scenario where I needed Heading content in the summary to maintain a proper document outline. Without this, I was left to choose [...] 2014-01-27 20:01:57 +0000 1 1 1 Unclassified WHATWG HTML unspecified Other other RESOLVED FIXED http://www.whatwg.org/specs/web-apps/current-work/#the-summary-element P3 normal Unsorted 1 contributor ian ian me mike zcorpan contributor oldest_to_newest 98942 0 contributor 2014-01-23 14:18:23 +0000 Specification: http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html Multipage: http://www.whatwg.org/C#the-summary-element Complete: http://www.whatwg.org/c#the-summary-element Referrer: http://www.whatwg.org/specs/web-apps/current-work/multipage/ Comment: Why does the summary element only allow Phrasing content? I ran into a scenario where I needed Heading content in the summary to maintain a proper document outline. Without this, I was left to choose between invalid markup, an invalid document outline, or a JS solution. Posted from: 108.17.8.225 User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.77 Safari/537.36 99002 1 zcorpan 2014-01-24 12:24:27 +0000 I don't see how JS would help you here. Can you elaborate on your scenario? 99042 2 ian 2014-01-24 23:28:13 +0000 A concrete example to look at here would be very helpful. I'm not sure I understand how a heading would work in a <details> element (even in the contents, really, unless you have sectioning content in there). 99084 3 me 2014-01-25 19:17:52 +0000 Here is a simple example of the issue. <section> <h1>Setion 1</h1> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> </section> <section> <h1>Section 2</h1> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> </section> <details> <summary> <h1>Section 3</h1> </summary> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> </details> Because details is a sectioning root, I would expect to be able to define a heading as the expand/collapse target. I would also expect the document outline for this content to be: - Section 1 - Section 2 - Section 3 Each workaround I've been able to come up with requires what I consider to be unacceptable compromises. 1) Duplicate content <details> <summary>Section 3</summary> <h1>Section 3</h1> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> </details> This is valid markup and produces the expected outline. But, it is potentially confusing for screen readers and would require some heavy-handed CSS to make it look as though there was not duplicate content. 2) Invalid document outline <details> <summary>Section 3</summary> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> </details> Easier to make "look" right, but doesn't produce a proper outline. 3) Invalid markup The original example. 4) JavaScript <section class="details"> <h1 class="summary">Section 2</h1> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> </section> This ignores that details and summary are even a thing. Valid markup, valid outline, JS dependent expand/collapse functionality. This gets even more complex when trying to have a collapsable fieldset in a form. 99185 4 ian 2014-01-27 20:01:51 +0000 Oh, right, I forgot that <details> was a sectioning root. Yeah, those examples make a lot of sense. I've updated the spec to allow this. Note that the outline still won't be quite what you expect, because the <details> element's contents aren't considered part of the document's outline, in the same way that (say) a heading in a table or block quote doesn't actually get listed in the document outline. It's like a subdocument. (It is, after all, basically a form control, not a part of a document.) 99186 5 contributor 2014-01-27 20:01:57 +0000 Checked in as WHATWG revision r8423. Check-in comment: Allow <h1> (and company) inside <summary>, so that you can give a <details> element a heading. http://html5.org/tools/web-apps-tracker?from=8422&to=8423