这就是<article>、<section>、<nav> 和<aside> 标签的全部意义（在spec 方面的“分段内容”）：它们定义了较大文档的子部分。
您说“主要内容现在是标题的一部分”，但这不是大纲显示的内容 - 它表明 <section> 是主文档 (<body>) 的一个子部分，标题为 <h1>Header</h1>。
在你的第一个例子中：
<body>
<header><h1>Header</h1></header>
<main><h1>This is the main content</h1></main>
<footer><h1>Footer</h1></footer>
</body>
..<header>、<main> 和 <footer> 元素不会影响轮廓。 （甚至还有 a note to that effect in the spec - 寻找“标题元素没有对内容进行分段；它没有引入新的部分。”），因此对于大纲算法而言，它相当于：
<body>
<h1>Header</h1>
<h1>This is the main content</h1>
<h1>Footer</h1>
</body>
在你的第二个例子中，
<body>
<header><h1>Header</h1></header>
<main>
<section>
<h1>This is the main content</h1>
</section>
</main>
<footer><h1>Footer</h1></footer>
</body>
..<section> 元素引入了<body> 元素第一部分的一个子部分，所以它相当于：
<body>
<div>
<h1>Header</h1>
<section>
<h2>This is main content</h2>
</section>
</div>
<div>
<h1>Footer</h1>
</div>
</body>
（我添加了<div>s 来标记大纲算法隐含的文档的逻辑部分。）
所以这个大纲是：
1. Header
1.1. This is the main content
2. Footer
通过规范中的示例，这可能更有意义：
<!DOCTYPE HTML>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<section>
<h1>Earning money</h1>
...
</section>
<section>
<h1>Spending money</h1>
...
产生以下大纲：
1. The Tax Book
1.1 Earning money
1.2 Spending money
请注意，“税簿”是文档的标题，“收入”和“支出”是子标题。
另请参阅the article on HTML5 outlines on MDN，它提供了该功能的一些背景知识，希望这将使这一切更加清晰。