Question

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

包含文章标记中的侧边栏，即使它不是特定于文章
在文章标记之外标题

目前我在文章标签之外有标题，但验证人告诉我，itemprop =“标题”不是任何项目的一部分。

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

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

修改

简化代码

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

Answer 1

无法指定其所属部分的外标题。

因此，如果h1是article内容的标题，那么它必须是article的子项。否则，文档大纲将是不正确的（→article创建一个多余/不必要的条目）：

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

注意：如果子菜单（nav）用于导航article（例如，与维基百科文章的ToC一样），它也应该是{{1 }}

Answer 2

而不是用这个包装你的页面：

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

包裹它：

<body>...</body>

我从未使用过itemprop =“headline”。这是一个新的HTML5属性。许多浏览器都不支持它。见http://en.wikipedia.org/wiki/Microdata_(HTML)#Support

这是一篇关于微数据的文章（这是itemprop的内容）。 http://html5doctor.com/microdata/

此Stackoverflow问题解释了为什么您无法为微数据添加Javascript支持。 Add microdata using javascript

所以你可以使用WAI ARIA。它的工作方式如下：http://mcdlr.com/wai-aria-cheatsheet/

为什么你有一个子菜单？主菜单在哪里？如果标题不占用太多空间，您应该在标题中包含主菜单。

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

2 个答案: