标题/标头位于文章标签之外的布局的最佳 HTML5 结构

我有一个布局，可以让我选择：

1. 将侧边栏包含在文章标签中，即使它不是特定于文章的
2. 标题位于文章标签之外

目前，我的标题位于文章标签之外，但验证器告诉我 itemprop="headline" 不属于任何项目。

构建这个结构的最佳方法是什么？有没有for将标题与文章相关联的属性？

如果您想知道什么类型的布局会迫使我做出这种选择，它是一个全角标题部分，然后是下面的文章和侧边栏。

Edit

简化代码

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

无法指定标题outside它所属的部分。

所以如果h1是内容的标题article，它必须是article。否则，文档大纲将不正确（→ 将会有一个多余/不必要的条目，由article):

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

注意：如果子菜单（nav) 用于导航article（例如，像维基百科文章的目录），它也应该是article.