[whatwg] WA1 - The Section Header Problem

[Matthew Raymond]

    I'm not really going to fight you on the whole keeping <h1>-<h6> 
thing, since HTML really only specifies them as being used for header 
information and having different levels of importance.

    I still feel that, structurally speaking, there should be a 
<section> element for every section and subsection, even for sections 
that are both leaves and immediate siblings. Therefore, I'm amending my 
previous position with the following:

1) Nested headers are ignored. Therefore, this markup...

<h1><h2>Header</h2></h1>

...Is the same as...

<h1>Header</h1>

2) <h1>-<h6> have the same semantic value as in HTML 4.01, but are 
additionally defined as not having any semantic meaning related to 
document _structure_.

3) The <h> element is defined as being the same as <h1>-<h6>, except 
that the importance level is obtained by the parent <section>, and <h> 
can only be used within a <section>. Therefore, the following to example...

| <section><h>heading</h><p>Content</p></section>

...is semantically equivalent to...

| <section><h1>heading</h1><p>Content</p></section>

4) The header that is associated with <section> for use in tab names, 
will always be the very first <h[#]> element in the <section>. This 
header will not appear in the body of the tab unless a <tablabel> is 
associated with the <section>.


    So let's look at the example from the HTML 4.01 spec:

| <div class="section" id="forest-elephants" >
|  <h1>Forest elephants</h1>
|  <p>In this section, we discuss the lesser known forest elephants.
|  ...this section continues...</p>
|  <div class="subsection" id="forest-habitat" >
|   <h2>Habitat</h2>
|   <p>Forest elephants do not live in trees but among them.
|   ...this subsection continues...</p>
|  </div>
| </div>

    This would have the exact same meaning as in HTML 4.01, but would be 
additionally specified as not having semantic meaning related to 
document structure. (Although it does have structure from a DOM point of 
view, but this is not the same as _semantic_ structure.) To add semantic 
structure, you would simply change the <div> elements to <sections>:

| <section id="forest-elephants" >
|  <h1>Forest elephants</h1>
|  <p>In this section, we discuss the lesser known forest elephants.
|  ...this section continues...</p>
|  <section id="forest-habitat" >
|   <h2>Habitat</h2>
|   <p>Forest elephants do not live in trees but among them.
|   ...this subsection continues...</p>
|  </section>
| </section>

    If you intend your content only for WA1-compliant browsers, you 
could do this:

| <section id="forest-elephants" >
|  <h>Forest elephants</h>
|  <p>In this section, we discuss the lesser known forest elephants.
|  ...this section continues...</p>
|  <section id="forest-habitat" >
|   <h>Habitat</h>
|   <p>Forest elephants do not live in trees but among them.
|   ...this subsection continues...</p>
|  </section>
| </section>

    People could still do this:

| <section>
|  <h1>Header 1</h1>
|  <p>Content 1</p>
|  <h1>Header 2</h1>
|  <p>Content 2</p>
| </section>

    However, from a semantic structural standpoint, the above is a 
single section that has two headers interleaved with the content, and 
the section in only semantically associated with the first header. User 
agents may choose to break the above structurally for their own 
purposes, but <section> elements have priority over with regard to 
document structure.

    I'd also like to see an optional attribute for <section> called 
|level|, which would indicate the level of importance for all the child 
<h> elements in the <section>. The idea would be that...

| <section level="2"><h>Header</h><p>Content</p></section>

    ...is effectively the same as...

| <section><h2>Header</h2><p>Content</p></section>

    Will that suffice?