媒体容器和内部或外部主要答案

【问题标题】：media container and aside inside or outside main媒体容器和内部或外部主要
【发布时间】：2015-02-14 22:57:37
【问题描述】：

我想知道如何在以下场景中使用 main、aside 和 media 容器。我有一个在所有页面上都显示相同的标题容器和一个存在于所有页面中但容器内容不同的媒体容器。例如，在主页中，媒体容器有一个轮播；在新闻页面中，它具有主页的图像。我应该将媒体容器放在main 元素之外，还是应该放在里面？如果我把它放在里面，aside 标签也需要在所有页面中，因为从样式的角度来看，如果我将 aside 放在主页面之外，侧边栏将需要扩展到轮播的一侧元素。我目前的结构如下（主页）：

<header></header>
<main role="main">
    <div class="media-container">

    </div>

    <div class="topbar">
        <!-- Widgets here-->
    </div>

    <div class="main-area">
        <!-- Main Area Widgets -->
    </div>

    <aside role="complementary">
        <!-- Sidebar Widgets -->
    </aside>
</main>

但我正在考虑类似以下内容：

<header></header>
<div class="media-container">

</div>

<div class="topbar">
    <!-- Widgets here-->
</div>

<main role="main">
    <!-- Main Area Widgets -->
</main>

<aside role="complementary">
    <!-- Sidebar Widgets -->
</aside>

在第一个中，我觉得我正在使用main 元素作为所有内容的包装器。第二个在语义上更有意义，但顶部栏让我感到困惑 - 它只会存在于主页中。哪个版本在语义上更有意义？

【问题讨论】：

标签： html css

【解决方案1】：

The MDN's take on <main>

HTML <main> 元素表示文档或应用程序的主要内容。 ...这个内容应该是文档唯一的，不包括任何内容在一组文档（例如侧边栏）中重复，导航链接、版权信息、网站徽标和搜索表单（当然，除非文档的主要功能是作为搜索表单）。

所以按照这个标准，你的第二个 sn-p 是更好的。

还可以考虑将<header> 用作您的topbar。

【讨论】：