html - 媒体容器和旁边主要内部或外部

Question

我想知道如何在以下场景中使用 main、aside 和 media 容器。我有一个在所有页面上都显示相同的标题容器和一个存在于所有页面中但容器内容不同的媒体容器。例如，在主页中，媒体容器有轮播；在新闻页面中，它有主页的图像。我应该将媒体容器放在 main 元素之外，还是应该放在里面？如果我把它放在里面，aside 标签也需要放在所有页面的里面，因为从样式的 Angular 来看，如果我把 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 元素作为所有内容的包装器。第二个在语义上更有意义，但顶部栏让我感到困惑 - 它只会存在于主页中。哪个版本在语义上更有意义？

Answer 1

The MDN's take on <main>

The HTML <main> element represents the main content of the of a document or application. ... This content should be unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless, of course, the document's main function is as a search form).

因此按照这个标准，您的第二个代码段更好。

也可以考虑使用 <header> 为你的topbar .