[whatwg] WA1 - The Section Header Problem

[Matthew Raymond]

THOUGHTS ON HEADERS AND THE SECTION ELEMENT:

    The following steps COMBINED should solve all problems related to 
section headers:

1) The <h#> elements should be depreciated.

2) The <h#> elements will have no SEMANTIC meaning when inside a 
<section> header. Their presentation, however, will remain the same.

3) Within an <h> element, <h#> elements (but not their contents) will be 
ignored entirely.

4) The <h> element will be the only way to create a semantically valid 
header for a section.

5) There should only be one <h> element for each section. Any <h> 
element after the first <h> element will have no semantic meaning, but 
can still have the same presentation as the first <h> element.

6) The only way to create semantically valid subsections within a 
<section> element is to create child <section> elements within the 
<section> element.


    So, let's say you have the following HTML 4.01 markup:

| <h1>Header 1</h1>
| <p>...Content 1...</p>
| <h2>Header 1.1</h2>
| <p>...Content 1.1...</p>
| <h2>Header 1.2</h2>
| <p>...Content 1.2...</p>
| <h3>Header 1.2.1</h3>
| <p>...Content 1.2.1...</p>
| <h3>Header 1.2.2</h3>
| <p>...Content 1.2.2...</p>


    This would still be valid in "HTML5" because it's not in a 
<section>. If you wanted to put all of this in a <section>, and you 
didn't care about subsections, you'd use this markup:

| <section>
|  <h><h1>Header 1</h1></h>
|  <p>...Content 1...</p>
|  <h2>Header 1.1</h2>
|  <p>...Content 1.1...</p>
|  <h2>Header 1.2</h2>
|  <p>...Content 1.2...</p>
|  <h3>Header 1.2.1</h3>
|  <p>...Content 1.2.1...</p>
|  <h3>Header 1.2.2</h3>
|  <p>...Content 1.2.2...</p>
| </section>

    However, to duplicate the semantic value of this markup, you'd have 
to do something more extensive:

| <section>
|  <h><h1>Header 1</h1></h>
|  <p>...Content 1...</p>
|  <section>
|   <h><h2>Header 1.1</h2></h>
|   <p>...Content 1.1...</p>
|  </section>
|  <section>
|   <h><h2>Header 1.2</h2></h>
|   <p>...Content 1.2...</p>
|   <section>
|    <h><h3>Header 1.2.1</h3></h>
|    <p>...Content 1.2.1...</p>
|   </section>
|   <section>
|    <h><h3>Header 1.2.2</h3></h>
|    <p>...Content 1.2.2...</p>
|   </section>
|  </section>
| </section>

    Here's what it would look like without legacy markup and with 
autonumbering already set up in CSS:

| <section>
|  <h>Header</h>
|  <p>...Content 1...</p>
|  <section>
|   <h>Header</h>
|   <p>...Content 1.1...</p>
|  </section>
|  <section>
|   <h>Header</h>
|   <p>...Content 1.2...</p>
|   <section>
|    <h>Header</h>
|    <p>...Content 1.2.1...</p>
|   </section>
|   <section>
|    <h>Header</h>
|    <p>...Content 1.2.2...</p>
|   </section>
|  </section>
| </section>


COUNTERARGUMENTS:

    Some may have problems with the six rules above that go something 
like this:

1) The <h1>-<h6> elements should not be depreciated. We should allow 
both methods for greater flexibility.

    Using two different section systems will only result in confusion 
and bloated user agents. The simple fact of the matter is that the <h#> 
elements are inferior or otherwise we wouldn't be creating new markup, 
and therefore we should move to discontinue them with "all due speed".


2) Why should <h#> elements have no semantic value when inside 
<section>? The webmasters should be allowed to mix markup for the sake 
of legacy support.

    The <section> element is new markup. Therefore, if a page uses it, 
then the contents are not legacy markup. If a webmaster wants to use 
sections, I see no reason for allowing them to mix section-related 
markup when the newer markup is obviously superior. The specification 
should not encourage poor markup, nor allow markup combinations that may 
confuse those reading the markup.

3) The presentation of <h1>-<h6> should be retained inside <h> to avoid 
removing the presentation that the webmaster wants to use.

    If the webmaster doesn't like the styling of <h> for a specific 
level, he/she should style the appropriate <h> elements. The use of <h#> 
elements in <h> is intended solely for legacy user agents, so we 
shouldn't encourage webmasters to use if or styling in WA1 clients.

4) Why not use the <h1> through <h6> tags for headers instead of <h>?

    Because it only goes to six levels, and it makes it encourages mixed 
section markup.

5-6) We could use repeated <h> elements to save markup instead of having 
a <section> for every subsection on the same level.

    By enforcing the single header rule, we create a situation where the 
webmaster must create the document structure in markup rather than 
relying on implied meanings. Why is this important? Well, for example, 
let's say you have this markup:

| <section>
|  <h>Header 1</h>
|  <p>...Content 1...</p>
|  <h>Header 2</h>
|  <p>...Content 2...</p>
|  <h>Header 3</h>
|  <p>...Content 3...</p>
| </section>

    Now suppose you want to put the individual sections in tabs? You 
have to break up the one big section into three separate sections:

| <tabbox>
|  <section>
|   <h>Header 1</h>
|   <p>...Content 1...</p>
|  </section>
|  <section>
|   <h>Header 2</h>
|   <p>...Content 2...</p>
|  </section>
|  <section>
|   <h>Header 3</h>
|   <p>...Content 3...</p>
|  </section>
| </tabbox>

    And what if the user has a special default CSS file to override 
yours? They could be using CSS to put borders around each section, but 
here that doesn't work.

    Well, those are my thoughts. Line starts here for beating the crap 
out of them.