Question

我这样组织我的代码：

<body>
  <section> section1 </section>
  <aside> aside (no relation with section 1 or 2)</aside>
  <section> section 2 </section>
</body>

但是我的老师说，如果我不把这部分放在一边，我应该把div放在一边。

有人可以向我解释原因吗？

谢谢。

Answer 1

欢迎社区。

是的，可以。让我们开始从有关 semantic HTML tag 的文档中找出您指出<section>和<aside>及其正式定义的原因。

Section

section元素代表文档或应用程序的通用部分。在这种情况下，一节是内容的主题分组，通常带有标题。

部分的示例为章节，选项卡式对话框中的各个选项卡式页面或论文的编号部分。网站的主页可以分为几个部分，以进行介绍，新闻和联系信息。

Aside

aside元素表示页面的一部分，该部分由与aside元素周围的内容切向相关的内容组成，可以认为与该内容是分开的。这些部分通常在印刷版式中表示为侧边栏。

该元素可用于印刷效果，例如引号或侧边栏，广告，导航元素组以及其他与页面主要内容分开的内容。

如果我们检查谁是section和aside的允许父母，我们会发现任何接受flow content的元素都是允许的。

属于流内容类别的元素通常包含文本或嵌入的内容。

很少有以下示例：<a>，<div>，<p>，<h1>，<h2>，<h3>，而且{{1 }}和<section>。

这意味着<aside>和<section>都接受作为父元素。

<aside>

<!-- valid html -->
<body>
 <div>
  <section>
    <h1>Aside element with section parent</h1>
    <aside>
      <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
    </aside>
  </section>
 </div>
</body>

但是，所有这些大多数还意味着它们可以具有不同的父元素。

在这里，我们已经证明了最初的说法。

以下是一些示例：

<!-- valid html -->
<body>
  <div>
    <aside>
      <section>
        <h1>Section element with aside parent</h1>
        <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
      </section>
    </aside>
  </div>
</body>

<!-- valid HTML -->

<body>
  <div>
    <a href="#">
      This is anchor
      <aside>This is aside inside anchor</aside>
    </a>
  </div>
</body>

<!-- valid HTML -->

<body>
  <div>
    <blockquote>
      This is a paragraph
      <aside>This is aside inside blockquote</aside>
      <section>This is a section inside blockquote</section>
    </blockquote>
  </div>
</body>

aside {
  width: 40%;
  padding-left: .5rem;
  margin-left: .5rem;
  float: right;
  box-shadow: inset 5px 0 5px -5px #29627e;
  font-style: italic;
  color: #29627e;
}

aside>p {
  margin: .5rem;
}

我可以在部分标签之外放置标签吗？

1 个答案:

Section

Aside

但是，所有这些大多数还意味着它们可以具有不同的父元素。

在这里，我们已经证明了最初的说法。