最近我去了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。 （只是为了方便把它放在那里）
【问题讨论】：
section:section元素代表一个通用文档或应用程序 section...section元素不是通用的容器元素。什么时候 需要一个元素来进行样式设置或为了方便 在编写脚本时，鼓励作者使用 div 元素。
Helpful rules of thumb from Html5doctor:
div
article、aside或nav更合适，不要使用它article 代替联合内容article:article 元素代表页面的一个组件，该组件由 文档、页面、应用程序或站点中的独立组合 并且旨在独立分发或可重复使用， 例如在辛迪加。这可以是论坛帖子、杂志或 报纸文章、博客条目、用户提交的评论、 交互式小部件或小工具，或任何其他独立的内容项
当没有其他元素可以在语义上更好地描述它时，使用div，或者您需要一个语义上无意义的样式挂钩。
h1s 看起来不同的原因是各个浏览器呈现它们的方式不同。您可以跨浏览器规范化事物，并使用css reset 处理默认浏览器样式表。
【讨论】：
这是在浏览器中预定义的。当我检查 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 等之一中的外观有自己的预设。
您可以通过为这些情况定义自己的尺寸来防止这种情况发生。
【讨论】：
关于您的最后一个问题（为什么当我使用 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标签
【讨论】：