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

问题

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 -->

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/21619361/best-html5-structure-for-a-layout-where-the-title-header-is-outside-the-article

标签

html5

wai-aria