Question

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

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">  </div> <main role="main">  </main> <aside role="complementary">  </aside>元素作为一切的包装。第二个在语义上更有意义，但topbar让我感到困惑 - 它只会存在于主页中。哪个版本在语义上更有意义？

Answer 1

The MDN's take on <main>

HTML <main>元素表示文档或应用程序的主要内容。 ...此内容对于文档应该是唯一的，不包括任何内容在侧边栏等一系列文件中重复出现导航链接，版权信息，网站徽标和搜索表单（当然，除非文档的主要功能是搜索表单）。

所以按照这个标准，你的第二个片段是更好的。

另请考虑将<header>用于topbar。

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

1 个答案: