Best HTML5 structure for a layout where the title/header is outside the article tag

Question

I have a layout that gives me the choice of either:

including the sidebar within the article tag, even though it's not specific to the article
having the title outside the article tag

Currently I have the title outside the article tag, but the validator tells me that the itemprop="headline" isn't part of any item.

What would be the best way to structure this? Is there a for attribute for relating a title with an article?

If you're wondering what type of layout would force me to make this choice, it's a full-width heading section, then article and sidebar below.

Edit

Simplified code

<div class="page-wrap">
    <header class="article-header" itemprop="headline">
        <h1>This heading section spans the width of the page</h1>
    </header>
    <div class="content-wrap">
        <nav class="submenu">
            <p>The submenu is here in the markup so that it appears above the content on mobiles, but it gets pulled to the side on wider screens.</p>
        </nav>
        <article class="content">
            <p>Article content...</p>
        </article>
        <aside class="sidebar">
            <p>This sidebar is not related specifically to the article on the page.</p>
        </aside>
    </div><!-- .content-wrap -->
</div><!-- .page-wrap -->

Did you omit the whole Microdata from your example, or are you only using this single `itemprop` attribute? And why are you using the WAI-ARIA tag (there is no WAI-ARIA included in your example nor do you mention it)? — unor, Feb 08 '14 at 02:42

score 0 · Answer 1 · answered Feb 08 '14 at 02:41

There is no way to specify the heading outside of the section it belongs to.

So if the h1 is the heading for the content of the article, it needs to be a child of the article. Otherwise, the document outline would be incorrect (→ there would be a superfluous/needless entry, created by the article):

1. This heading section spans the width of the page
  1.1 (implicit heading from the 'article' element)

Note: If the sub-menu (nav) is for navigating the article (for example, like the ToC of an Wikipedia article), it should also be a child of the article.

score -1 · Answer 2 · edited May 23 '17 at 11:44

Instead of wraping your page in this:

<div class="page-wrap">...</div>

Wrap it in this:

<body>...</body>

I've never used itemprop="headline". It's a new HTML5 attribute. It is not supported in many browsers. See here http://en.wikipedia.org/wiki/Microdata_(HTML)#Support

Here is an article on microdata (which is what itemprop is). http://html5doctor.com/microdata/

This Stackoverflow question explains why you can't add Javascript support for microdata. Add microdata using javascript

So you could just use WAI ARIA. It works like this: http://mcdlr.com/wai-aria-cheatsheet/

Why do you have a sub-menu? Where is the main menu? You should include your main menu in your header if your title doesn't take up too much space.

Best HTML5 structure for a layout where the title/header is outside the article tag

2 Answers2

Linked