标题/标题位于文章标签之外的布局的最佳 HTML5 结构 [英] Best HTML5 structure for a layout where the title/header is outside the article tag

问题描述

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

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

目前我在文章标签之外有标题，但验证器告诉我 itemprop="headline" 不是任何项目的一部分.

构建它的最佳方式是什么?是否有用于将标题与文章相关联的 for 属性?

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

编辑

简化代码

<header class="article-header" itemprop="headline"><h1>这个标题部分跨越页面的宽度</h1></标题><div class="content-wrap"><nav class="子菜单"><p>子菜单位于标记中，因此它显示在移动设备上的内容上方，但在更宽的屏幕上它会被拉到一边.</p></nav><文章类=内容"><p>文章内容...</p></文章><aside class="sidebar"><p>这个侧边栏与页面上的文章没有特别的关系.</p></一边></div><!-- .content-wrap --></div><!-- .page-wrap -->

解决方案

没有办法指定它所属部分的外部标题.

因此，如果h1 是article 内容的标题，则它必须是article 的子项.否则，文档大纲将是不正确的(→ 会有多余/不必要的条目，由 article 创建):

1.此标题部分跨越页面的宽度1.1(来自'article'元素的隐式标题)

注意:如果子菜单(nav)用于导航文章(例如，像维基百科文章的ToC)，它也应该是一个文章的子项.

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

1. including the sidebar within the article tag, even though it's not specific to the article
2. 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 -->

解决方案

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.

这篇关于标题/标题位于文章标签之外的布局的最佳 HTML5 结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！