正确使用HTML5元素＆amp;结构体

Question

我需要将PSD转换为HTML5 / CSS。我在找到使用哪些元素的确定答案时遇到了问题。我的布局包括标题，内容/侧边栏和页脚。模板结构如下。

我知道你可以在HTML5中使用多个页眉/页脚元素，我有主页眉/页脚标签。我遇到的主要问题是内容的结构。

我有一个主要内容区域，然后是侧边栏，侧边栏内容与内容无关。在侧边栏中，我需要有多个内容框。

内容区域有各个部分，主要是带有文字的特色图片，其余部分只是页面文字。

据我所知，使用<section>标签定义内容/侧边栏不是语义，因为它不是内容相关的，它是页面结构/布局。我的下面的标记对于我想要实现的结构是否正确？

    <header>

    </header>

    <div class="wrapper">
        <div class="main">
            <section id="featured-content">
                <img />
                <p>Featured text</p>
            </section>

            <section id="main">
                <header><h2>Title</h2></header>
                <p>The rest of content goes here</p>
            </section>
        </div>

        <aside class="sidebar">
            <section class="content-box">
                <header>Box title</header>
                <p>Box content</p>
            </section>

            <section class="content-box">
                <header>Box title</header>
                <p>Box content</p>
            </section>
        </aside>
    </div>

    <footer>

    </footer>`

Answer 1

一般情况下：如果header只包含标题，则可以省略它。

如果页面的主要内容可以独立存在（例如博客文章或类似内容），那么您可以使用article代替section。

由于#featured-content是主要内容的某种摘要/摘要，因此它应该是article的一部分。将它包含在header：

中是有意义的

<article>

  <header>
    <h2>(article title)</h2>

    <img src="" alt="(article teaser image)">
    <p>(article teaser text)</p>
  </header>

  <p>(article content)</p>

</article>

（只有当预告片真的很复杂时（例如包含标题本身），它才能获得自己的section。）

使用aside作为侧边栏是正确的，因为它的内容与整个页面（！）“切向相关”，而不仅仅是主要内容（在这种情况下，它应该包含在{{ 1}}，也是）。

如果article中的所有内容块都有些相关，那么对每个块使用aside内的section是正确的（但是，根据实际内容，{{1}也可能是合适的。但是，如果aside内的块没有关系（简单测试：您是否找到了整个article的标题？），您可以考虑为每个块使用单独的aside它：

aside

所以结构看起来像：

aside