This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 24372 - 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 [...]
Summary: Why does the summary element only allow Phrasing content? I ran into a scenar...
Status: RESOLVED FIXED
Alias: None
Product: WHATWG
Classification: Unclassified
Component: HTML (show other bugs)
Version: unspecified
Hardware: Other other
: P3 normal
Target Milestone: Unsorted
Assignee: Ian 'Hixie' Hickson
QA Contact: contributor
URL: http://www.whatwg.org/specs/web-apps/...
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2014-01-23 14:18 UTC by contributor
Modified: 2014-01-27 20:01 UTC (History)
4 users (show)

See Also:

Attachments

Description contributor 2014-01-23 14:18:23 UTC 
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
Comment 1 Simon Pieters 2014-01-24 12:24:27 UTC 
I don't see how JS would help you here.

Can you elaborate on your scenario?
Comment 2 Ian 'Hixie' Hickson 2014-01-24 23:28:13 UTC 
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).
Comment 3 Shannon Moeller 2014-01-25 19:17:52 UTC 
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.
Comment 4 Ian 'Hixie' Hickson 2014-01-27 20:01:51 UTC 
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.)
Comment 5 contributor 2014-01-27 20:01:57 UTC 
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