In HTML4 / XHTML I have not worried about this so much but in HTML5 DOM structure is much more important.

Why does this need some thought? Primarily because we have these hidden elements in the page - such as h2 headings for Main Menu, Secondary menu, Breadcrumbs etc which become children of the main page title (h1).

I am wondering if there is a case here for more than one h1 on the page, to create two separate top level trees in the DOM. One for page and another sub tree (starting with h1) for articles?

Let me give you an example - if we are looking at a node we could well have this DOM structure:

->Node title
--> Main menu
--> Breadcrumb
--> Field label (labels have context aware headings in AT)
--> block heading

What I am thinking is to split this:

-> Site name
--> Main menu
--> Breadcrumb
--> Block heading
-> Node title
--> Field label

Thoughts?

Comments

Jeff Burnz’s picture

Jeff Burnz commented

I think this is the way to go, we can get rid of some of the conditional logic (it moves to the page title instead of the site title), and jam the main page title inside the node when we're looking at the node. This creates a far more accurate outline and highlights one the weaknesses of the traditional structure of Drupal templates. With the new sectioning elements in HTML5 this is totally legit and very powerful for creating page structure.

This also has the rather nice spin off effect of getting the local tasks above the node title, where they should be.

So.... for a visual example of what the proposed structure is going to be like...

<header>
  <hgroup>  
    <h1>site title</h1>
    <h2>site slogan</h2>
  </hgroup>
</header>

<article>
  <header>
    <h1>node title</h1>
  </header>
  <footer>
    <h3>node meta</h3>
  </footer>
  <section>
    <h2>field label</h2>
    <div>field content</div>
  </section>
</article>

<section>
  <h2>block title</h2>
  <div>block content</div>
</section>

<footer>
  <p>some footer info</p>
</footer>
Jeff Burnz’s picture

Jeff Burnz commented
Status: Active » Fixed

In the end I have gone for more conditional logic and keeping the main page title in the normal position for Drupal theme. The outline the lastest DEV version generates is very, very good and will hold true for the vast majority of pages (you have to be doing something pretty radical for it not to generate a perfect outline), even if you toggle the site-name off (will just be hidden to preserve the hgroup and h1 for the root section heading).

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.