[whatwg] Ideas regarding Web Applications 1.0

Thu Oct 14 19:54:00 PDT 2004

    I've been noticing that there hasn't been a lot of activity on the 
mailing list recently. I'm going to use this opportunity to put forth 
some ideas regarding Web Applications 1.0. Many of these ideas are in an 
early and raw form, so feel free to tear them apart. ;)

REDEFINING THE <H> ELEMENT:

    Here's a <tabbox> example[1] from the Web Applications 1.0
specification:

| <tabbox>
|  <section>
|   <h2>About</h2>
|   <p><img src="logo" alt=""></p>
|   <p>The Application.</p>
|   <p>© copyright 2004 by The First Team.</p>
|  </section>
|  <section>
|   <h2>Credits</h2>
|   <ul>
|    <li>Jack O'Neill</li>
|    <li>Samantha Carter</li>
|    <li>Daniel Jackson</li>
|    <li>Teal'c</li>
|    <li>Jonas Quinn</li>
|   </ul>
|  </section>
| </tabbox>

    There are several problems with this example:

1) There's no method of styling tabs and legacy headers separately. The
webmaster is forced to style the tabs and the fallback header in the
exact same way by styling the <h2> element.

2) The content for the tab and the fallback header are not and cannot be
separate.

3) What happens if the webmaster copies legacy markup that contains
<h1>-<h6> elements into the <section> element but forgets to put in a
header for the tab label?

4) Structurally, the use of <h1>-<h6> as a label for a <section> differs
from the use of <fieldset> and <legend>, where you have a single element
  that does not have a different semantic meaning in another context.

    Here's the example modified to address some of these problems:

| <tabbox>
|  <section level="2">
|   <h><h2>About</h2></h>
|   <p><img src="logo.png" alt="Stargate Command"></p>
|   <p>The Application.</p>
|   <p>&copy; copyright 2004 by Sierra Golf One.</p>
|  </section>
|  <section level="2">
|   <h><h2>Credits</h2></h>
|   <ul>
|    <li>Jack O'Neill</li>
|    <li>Samantha Carter</li>
|    <li><ins>Daniel Jackson</ins></li>
|    <li>Teal'c <ins>with hair</ins></li>
|    <li><del>Jonas Quinn</del></li>
|   </ul>
|  </section>
| </tabbox>

    In the above example, tab labels are obtained from the <h> element,
which in this case would be the equivalent of <h2> because the <section>
element's |level| attribute is set to "2". The default for |level| would
be the |level| of the first <section> ancestor plus one. In the above
example, if the |level| was not defined it would default to "1" because
the <section> elements have no <section> ancestors.

    (In theory, one could use <section level="+2"> to indicate that the
level should increment by more than one.)

    My definition of <h> is slightly different from that suggested by
others. In the examples in this email, the <h> element is similar to the
<legend> element: it's an optional element for which there is only one
per <section> element that labels a <section>. Another difference is
that my version of <h> ignores child <h1>-<h6> elements. This allows you
to use <h1>-<h6> for graceful degradation in legacy user agents.

    In my model, <section> levels are always considered as having
structurally priority over <h1>-<h6> elements. Observe the following code:

| <h3>Heading A</h3>
| <section>
|  <h>Heading B</h>
|  <h2>Heading C</h2>
|  <section>
|   <h>Heading D</h>
|   <h1>Heading E</h1>
|   <h1>Heading F</h1>
|  </section>
|  <h>Heading G</h>
|  <h1>Heading H </h1>
| </section>

    The above would yield the following structure (with autonumbering 
for the <section> elements):

+-+-+- Heading A
*------- [1] Heading B
           +-+- Heading C
           *----- [1.1] Heading D
           |       + Heading E
           |       + Heading F
           +- Heading H

THE <TABLABEL> ELEMENT:

    What happens if you want to style the tab directly? My thought
is that the <tabbox> could have implied elements that can be used to
style the actual tabs and their contents (called <tablabel> perhaps). If
you want the legacy section label content to vary from the contents of
the tab, you could then explicitly use a <tablabel> element:

| <tabbox>
|  <tablabel>About
|   <section>
|    <h><h2>About</h2></h>
|    <p><img src="logo.png" alt="Stargate Command"></p>
|    <p>The Application.</p>
|    <p>&copy; copyright 2004 by Sierra Golf One.</p>
|   </section>
|  </tablabel>
|  <tablabel>Credits
|   <section>
|    <h><h2>Credits</h2></h>
|    <ul>
|     <li>Jack O'Neill</li>
|     <li>Samantha Carter</li>
|     <li><ins>Daniel Jackson</ins></li>
|     <li>Teal'c <ins>with hair</ins></li>
|     <li><del>Jonas Quinn</del></li>
|    </ul>
|   </section>
|  </tablabel>
| </tabbox>

    In the above example, <tablabel> works in a similar way to the way I
described <menulabel> in a previous message[2]. As a result, you can use
the |for| attribute to explicitly associate the <tablabel> with the tab
contents:

| <tabbox>
|  <tablabel for="about">About</tablabel>
|  <tablabel for="credits">Credits</tablabel>
|
|  <section id="about" label="about">
|   <p><img src="logo.png" alt="Stargate Command"></p>
|   <p>The Application.</p>
|   <p>&copy; copyright 2004 by Sierra Golf One.</p>
|  </section>
|  </tablabel>
|
|  <section id="credits" label="credits">
|   <ul>
|    <li>Jack O'Neill</li>
|    <li>Samantha Carter</li>
|    <li><ins>Daniel Jackson</ins></li>
|    <li>Teal'c <ins>with hair</ins></li>
|    <li><del>Jonas Quinn</del></li>
|   </ul>
|  </section>
| </tabbox>

    In the above example, you might notice that <section> has a |label|
attribute. This attribute allows you to define a heading for <section>
without producing legacy content.

THE TABLINK ELEMENT:

I suggest a new element called <tablink> for establishing a semantic
context for hyperlinks. Here's an example of how this might work.

| <tabbox>
|  <tablabel for="main">Main</tablabel>
|  <tablabel for="about">About</tablabel>
|  <tablabel for="credits">Credits</tablabel>
|
|  <section id="main" label="Main"> ...Content... </section>
|
|  <tablink id="about">
|   <a href="about.html">About</a>
|  </tablink>
|
|  <tablink id="credits">
|   <a href="credits.html">Credits</a>
|  </tablink>
|
|  <p>
|   This page would look much better in a browser that supports
|   <a href="http://www.whatwg.org/specs/web-apps/current-work/">
|    Web Applications 1.0
|   </a>.
|  </p>
|
| </tabbox>

    As you can see, <tablabel> allows you to use hyperlinks as legacy
content without that content being interpreted as a tab in the <tabbox>.
A compressed version of the tag could be used when you don't want
fallback content to appear for a specific tab at all:

  In the above example, the <tablink> element, in combination with other
elements, can also be used to present a set of tabs in a WA1 enabled
browser while displaying nothing or only limited content for legacy
browsers.

    The <tablink> element can also be used to make markup smaller and
simpler:

| <tabbox>
|  <tablabel>About <tablink href="about.html"/></tablabel>
|  <tablabel>Credits <tablink href="credits.html"/></tablabel>
| </tabbox>

THE <DIVFRAME> ELEMENT:

    I would also like to propose a more flexible version version of the
<iframe> element that I'd like to call <divframe>. The <divframe>
element would act much like an <iframe> element, but it would be
resizable and much more CSS-friendly. It could effectively be used to
replace server-side includes, while at the same time having all the
benefits of a frame as well.

USING <DIVFRAME> AND <TABBOX> TOGETHER:

    One of my main concerns about the examples I've seen using <a>
for tabs is the fact that the examples show no content inside the actual
tab box. There are tabs, but the content is assumed to be rendered
outside the tab box itself. Clearly, if you want the tabbed interface to
visually encapsulate your content, and you want to take advantage of
frames, something like <divframe> would be useful. Therefore, I suggest
that the <tabbox> all a <divframe> to be displayed when no other
sections are available (such as when you have only <tablink> elements).
It would look something like this:

    Clicking on a tab would cause a link to load into the specified
target, the <divframe>. Since it would be the only section available to
display, since the rest of the children are either <tablabel> or
<tablink> elements, the tabs act as a selector for which HTML document
is displayed in the <divframe>.

A PATTERN IS EMERGING:

    Notice that I'm setting up a pattern here:

| <tabbox>
|  <tablink><a href="about.html">About</a></tablink>
|  <tablink><a href="credits.html">Credits</a></tablink>
| </tabbox>

| <tabbox>
|  <fieldset><legend>About</legend> ...Content... </fieldset>
|  <fieldset><legend>Credits</legend> ...Content... </fieldset>
| </tabbox>

| <tabbox>
|  <section><h>About</h> ...Content... </section>
|  <section><h>Credits</h> ...Content... </section>
| </tabbox>

    Each tab's contents is established by a primary element (<tablink>,
<fieldset>, <section>), which in turn has a labeling child element
(<a>, <legend>, <field>). In each case, the use of <tablabel> overrides
the labeling child element:

| <tabbox>
|  <tablabel for="about">About</tablabel>
|  <tablabel for="credits">Credits</tablabel>
|
|  <tablink id="about"><a href="about.html">About</a></tablink>
|  <tablink id="credits"><a href="credits.html">Credits</a></tablink>
| </tabbox>

| <tabbox>
|  <tablabel for="about">About</tablabel>
|  <tablabel for="credits">Credits</tablabel>
|
|  <fieldset id="about"><legend>About</legend> ...Content... </fieldset>
|  <fieldset id="credits">
|   <legend>Credits</legend> ...Content...
|  </fieldset>
| </tabbox>

| <tabbox>
|  <tablabel for="about">About</tablabel>
|  <tablabel for="credits">Credits</tablabel>
|
|  <section id="about"><h>About</h> ...Content... </section>
|  <section id="credits"><h>Credits</h> ...Content... </section>
| </tabbox>

    Furthermore, the legacy tab labeling need not even be used if the
webmaster so desires:

| <tabbox>
|  <tablabel>About <tablink href="about.html"/></tablabel>
|  <tablabel>Credits <tablink href="credits.html"/></tablabel>
| </tabbox>

| <tabbox>
|  <tablabel for="about">About</tablabel>
|  <tablabel for="credits">Credits</tablabel>
|
|  <fieldset id="about"> ...Content... </fieldset>
|  <fieldset id="credits"> ...Content... </fieldset>
| </tabbox>

| <tabbox>
|  <tablabel for="about">About</tablabel>
|  <tablabel for="credits">Credits</tablabel>
|
|  <section id="about"> ...Content... </section>
|  <section id="credits"> ...Content... </section>
| </tabbox>

[1]<http://www.whatwg.org/specs/web-apps/current-work/#section3>