Question

最近我去了w3schools New HTML5 Elements并发现了“section”和“article”标签。我的问题是你什么时候应该使用section，article或div标签，为什么当我使用section和article标签时文本会变小？像这样：

<section><h1>H1 tag in a section tag</h1></section>
<article><h1>H1 tag in an article tag</h1></article>
<h1>H1 tag in nothing</h1>

复制并粘贴到here。（只是为了方便而把它放在那里）

Answer 1

When to use `section`:

section元素表示通用文档或应用程序 section ... section元素不是通用容器元素。什么时候为了造型目的或为了方便起见，需要一个元素脚本编写时，鼓励作者使用div元素。

<强> Helpful rules of thumb from Html5doctor:

不要将它用作造型或脚本的钩子;这是一个div
如果article，aside或nav更合适，请勿使用
除非在本节开头有自然的标题，否则不要使用它
使用article代替联合内容

When to use `article`:

article元素表示由页面组成的组件文档，页面，应用程序或站点中的自包含组合这是为了可以独立分发或重复使用，例如在联合。这可能是一个论坛帖子，杂志或报纸文章，博客文章，用户提交的评论，以及交互式小部件或小工具，或任何其他独立的内容项

当没有其他元素可以在语义上更好地描述它时使用div，或者你需要一个语义无意义的钩子来进行样式化。

h1看起来不同的原因是因为各个浏览器以不同的方式呈现它们。您可以跨浏览器规范化事物，并使用css reset处理默认浏览器样式表。

Answer 2

这是在浏览器中预定义的。当我检查Chrome中的一个小h1标签时，我得到以下硬编码到浏览器中的样式表（“用户代理样式表”）：

:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}

h1的正常预定义样式表如下所示：

h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}

这意味着浏览器在h1，h之一内有article元素（以及可能还有其他aside元素）的预设等等。

您可以通过为这些案例定义自己的尺寸来防止这种情况发生。

Answer 3

关于你的上一个问题（为什么当我使用section和article标签时文本会变小？），我认为这个事件有合理的理由。诸如section，Article，aside，nav之类的元素被视为Sectioning Elements。这些元素的主要特征之一是，在文档的大纲中，当浏览器面对它们时会出现新的缩进（以找出more）。所以根据你的示例代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <section><h1>H1 tag in a section tag</h1></section>
        <article><h1>H1 tag in an article tag</h1></article>
        <h1>H1 tag in nothing</h1>
    </body>
</html>

它的大纲是（你可以使用这个online tools）：

H1标签没有任何内容
1. 节标记中的H1标记
2. 文章标签中的H1标签

部分，文章或Div？和部分和文章标签中的较小文本？

3 个答案:

When to use `section`:

When to use `article`:

部分，文章或Div？和部分和文章标签中的较小文本？

3 个答案:

When to use section:

When to use article:

When to use `section`:

When to use `article`: