HTML5 最佳实践；部分/标题/旁边/文章元素[关闭] Posted 2023-02-21
技术标签:
【中文标题】HTML5 最佳实践；部分/标题/旁边/文章元素[关闭] 【英文标题】：HTML5 best practices; section/header/aside/article elements [closed]
【发布时间】：2011-06-14 10:38:21
【问题描述】：
网络上有足够的关于 html
1 <!doctype html>
2 <head>
3 <title>Website</title>
4 </head>
5
6 <body>
7 <section>
8 <header>
9 <div id="logo"></div>
10 <div id="language"></div>
11 </header>
12
13 <nav>
14 <ul>
15 <li>menu 1</li>
16 <li>menu 2</li>
17 <li>menu 3</li>
18 <li>menu 4</li>
19 <li>menu 5</li>
20 </ul>
21 </nav>
22
23 <div id="main">
24 <div id="main-left">
25 <article>
26 <header><h1>This is a title</h1></header>
27
28 <p>Lorem ipsum dolor sit amet, consectetur
29 adipiscing elit. Quisque semper, leo eget</p>
30
31 <p>Lorem ipsum dolor sit amet, consectetur
32 adipiscing elit. Quisque semper, leo eget</p>
33
34 <p>Lorem ipsum dolor sit amet, consectetur
35 adipiscing elit. Quisque semper, leo eget</p>
36
37 <p>Lorem ipsum dolor sit amet, consectetur
38 adipiscing elit. Quisque semper, leo eget</p>
39 </article>
40 </div>
41
42 <div id="main-right">
43 <section id="main-right-hot">
44 <h2>Hot items</h2>
45 <ul>
46 <li>Lorem ipsum</li>
47 <li>dolor sit</li>
48 <li>...</li>
49 </ul>
50 </section>
51
52 <section id="main-right-new">
53 <h2>New items</h2>
54 <ul>
55 <li>Lorem ipsum</li>
56 <li>dolor sit</li>
57 <li>...</li>
58 </ul>
59 </section>
60 </div>
61 </div>
62
63 <div id="news-items">
64 <header><h2>The latest news</h2></header>
65
66 <div id="item_1">
67 <article>
68 <header>
69 <img src="#" title="titel artikel" />
70 <h3>Lorem ipsum .....</h3>
71 </header>
72 <p>Lorem ipsum dolor sit amet,
73 adipiscing elit. Quisque semper, </p>
74 <a href="#">Read more</a>
75 </article>
76 </div>
77
78
79 <div id="item_2">
80 <article>
81 <header>
82 <img src="#" title="titel artikel" />
83 <h3>Lorem ipsum .....</h3>
84 </header>
85 <p>Lorem ipsum dolor sit amet,
86 adipiscing elit. Quisque semper, </p>
87 <a href="#">Read more</a>
88 </article>
89 </div>
90
91
92 <div id="item_3">
93 <article>
94 <header>
95 <img src="#" title="titel artikel" />
96 <h3>Lorem ipsum .....</h3>
97 </header>
98 <p>Lorem ipsum dolor sit amet,
99 adipiscing elit. Quisque semper, </p>
100 <a href="#">Read more</a>
101 </article>
102 </div>
103 </div>
104
105 <footer>
106 <ul>
107 <li>menu 1</li>
108 <li>menu 2</li>
109 <li>menu 3</li>
110 <li>menu 4</li>
111 <li>menu 5</li>
112 </ul>
113 </footer>
114 </section>
115 </body>
116 </html>
第 7 行。section 围绕整个网站？还是只有div？
第 8 行。每个section 都以header 开头？
第 23 行。这是div 对吗？还是必须是section？
第 24 行。用div 拆分左/右列。
第 25 行。article 标记的正确位置？
第 26 行。是否需要将您的 h1-tag 放入 header-tag 中？
第 43 行。内容与主文章无关，所以我决定这是 section 而不是 aside。
第 44 行。没有header 的 H2
第 53 行。section 没有 header
第 63 行。包含所有（非相关）新闻项目的 Div
第 64 行。header 与 h2
第 65 行。嗯，div 或 section？或者删除这个div，只使用article-tag
第 105 行。页脚 :-)
【问题讨论】：
456bereastreet.com/archive/201103/…
你可以practice HTML5 tags
【参考方案1】：
实际上，您在页眉/页脚方面是完全正确的。以下是关于如何/应该使用每个主要 HTML5 标签的一些基本信息（我建议阅读底部链接的完整源代码）：
部分
aside
header
nav
footer
来源 ：https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/
另外，这里有一个关于article的描述，在上面的来源中找不到：
article
【讨论】：
这个答案如何获得如此多的选票对我来说是个谜：它没有谈论 <article> 元素，它没有对比提到的元素，也没有将它们分组。答案没有给出“最佳实践”，也没有回答 OP 的任何明确问题！ 【参考方案2】：
不幸的是，到目前为止给出的答案（包括投票最多的）要么是“公正”的常识 没有 关键关键字1 弹出！
我写了 3 个答案：
这个解释（从这里开始）。
Concrete answers to OP’s questions.
Improved detailed HTML.
要了解这里讨论的 html 元素的作用，您必须知道其中一些元素是文档的一部分。每个 html 文档都可以是 sectioned according to the HTML5 outline algorithm ，以创建大纲（或）目录 (TOC)。大纲通常不可见（现在），但作者应该以这样的方式使用 html，以使生成的大纲反映他们的意图。
您可以使用完全 这些元素创建部分，没有别的 ：
创建（显式）小节
<section>部分
<article> 部分
<nav>部分
<aside> 部分
创建同级节或子节
带有<h*>的未指定类型的部分2 节可以命名：
<h*> 自己创建的部分命名
<section|article|nav|aside> 部分将由第一个 <h*> 命名，如果有的话
这些 <h*> 是唯一不自己创建部分的人
部分还有一件事：以下上下文（即元素）创建“轮廓边界”。他们包含的任何部分都是他们私有的：
文档本身带有<body>
带有<td>的表格单元格
<blockquote>
<details>、<dialog>、<fieldset> 和 <figure>
没有 其他
example HTML<body>
<h3>if you want siblings
at top level...</h3>
<h3>...you have to use untyped
sections with <h*>...</h3>
<article>
<h1>...as any other section
will descent</h1>
</article>
<nav>
<ul>
<li><a href=...>...</a></li>
</ul>
</nav>
</body>
has this outline1. if you want siblings
at top level...
2. ...you have to use untyped
sections with <h*>...
2.1. ...as any other section
will descent
2.2. (unnamed navigation)
这提出了两个问题：
<article>和<section>有什么区别？
两者都可以：
相互嵌套
在不同的上下文或嵌套级别采用不同的概念
<section>s 就像书的章节
他们通常有兄弟姐妹（可能在不同的文档中？）
它们有一些共同点，比如书中的章节
一位作者，一位<article>，至少在最低级别
标准示例：一条博客评论
博客条目本身也是一个很好的例子
博客条目<article> 及其评论<article>s 也可以用<article> 包装
这是一些“完整”的东西，而不是一系列类似的东西中的一部分
<section>s 中的 <article> 就像书中的章节
<section> 中的 <article>s 就像一卷中的诗（在一个系列中）
<header>、<footer> 和 <main> 如何适应？
它们对切片的影响零
<header> 和 <footer>
它们允许您标记每个 部分的区域
即使在一个部分中，您也可以多次使用它们
区别主要部分本节
仅受作者口味限制
<header>
可以标记本节的标题/名称
可能包含此部分的徽标
不必位于该部分的顶部或上部
<footer>
可以标记本节的作者/作者
可以出现在该部分的顶部
甚至可以高于<header>
<main>
只允许一次
标记顶层部分的主要部分（即文档，<body>）
小节本身没有主要部分的标记
<main> 甚至可以“隐藏”在文档的某些小节中，而文档的 <header> 和 <footer> 则不能（该标记将标记该小节的页眉/页脚）
但在<article>部分中是不允许的3
有助于将“真实的东西”与文档的非页眉、非页脚、非主要内容区分开来，如果这对您的情况有意义的话......
1 想到：大纲、算法、隐式切片2 我使用<h*> 作为简写<h1>、<h2>、<h3>、<h4>、<h5> 和 <h6> 3 <main> 也不允许在 @987654379 中使用@ 或 <nav>，但这并不奇怪。 – 实际上：<main> 只能隐藏在（嵌套的）降序<section> 部分或出现在顶层，即<body>
【讨论】：
由于这似乎是我们关于这个问题的权威帖子，我想指出一件尚未解决的重要事情：MDN tells us“没有建议大纲的实现“就语义分割而言，只有我一个人认为这是一个巨大的警告吗？
@Cat 我同意所讨论的元素不应单独用于向除源代码的人类读者之外的任何人传达任何内容。-我想回答这个问题：这些元素打算如何使用? ...在适当的情况下使用这七个元素作为 div 元素的替代品。有时<div class=article> 可以替换，有时<article class=poem> 可以替换。
@RobertSiemer 在您的第二个示例中，如果第一个 h3（“如果您想要顶层的兄弟姐妹...”）是 h1，那么第二个 h3 是否仍会创建一个***部分，还是现在嵌套在 h1 下？ 【参考方案3】：
该文档的标记可能如下所示：
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
您可以在this article on A List Apart 中找到更多信息。
【讨论】：
这个样板结构不值得这个页面上的空间。 1) 没有提到的 HTML 元素与文档中的任何位置相关联。 2) 它错误地暗示 和 是文档级元素。 3) 它错误地暗示 仅用作 -child。 @DanDascalescu 【参考方案4】：
我建议阅读W3 wiki page about structuring HTML5：
<header> 用于包含站点的标题内容。 <footer>
包含网站的页脚内容。 <nav> 包含
导航菜单或页面的其他导航功能。
<article> 包含一个独立的内容，可以制作
感知是否联合为 RSS 项目，例如新闻项目。
<section> 用于将不同的文章分组为不同的
目的或主题，或定义一个单一的不同部分
文章。
<aside> 定义一个与主相关的内容块
它周围的内容，但不是它流动的中心。
它们包括我在这里清理过的an image：
在代码中，如下所示：
<body>
<header></header>
<nav></nav>
<section id="sidebar"></section>
<section id="content"></section>
<aside></aside>
<footer></footer>
</body>
让我们更详细地探索一些 HTML5 元素。
<section>
<section> 元素用于包含不同的区域
功能或主题区域，或分解文章或故事
分成不同的部分。所以在这种情况下：“sidebar1”包含各种
将在网站的每个页面上持续存在的有用链接，例如
“订阅 RSS”和“从商店购买音乐”。 “主要”包含
此页面的主要内容，即博客文章。在其他页面上
网站，这个内容会改变。这是一个相当通用的元素，但是
仍然比普通的 <div> 具有更多的语义含义。
<article>
<article> 与 <section> 相关，但明显不同。
而<section> 用于对不同的内容部分进行分组或
功能，<article> 用于包含相关个人
独立的内容片段，例如个人博客文章、视频、
图片或新闻。这样想——如果你有很多
内容项目，每个项目都适合阅读他们的
拥有，并且在 RSS 中作为单独的项目进行联合是有意义的
饲料，然后<article> 适合标记它们。在我们的
例如，<section id="main"> 包含博客条目。每个博客条目
适合作为 RSS 提要中的项目进行联合，并且
脱离上下文单独阅读时有意义，因此<article>
非常适合他们：
<section id="main">
<article><!-- first blog post --></article>
<article><!-- second blog post --></article>
<article><!-- third blog post --></article>
</section>
简单吧？请注意，您也可以在里面嵌套部分
文章，这样做是有意义的。例如，如果每一个
这些博客文章具有不同部分的一致结构，然后
您也可以在文章中添加部分。它可能看起来
像这样：
<article>
<section id="introduction"></section>
<section id="content"></section>
<section id="summary"></section>
</article>
<header> 和 <footer>
正如我们上面已经提到的，<header> 的目的和
<footer>元素是包装页眉和页脚内容，
分别。在我们的特定示例中，<header> 元素
包含徽标图像，<footer> 元素包含版权
请注意，但如果您愿意，可以添加更详细的内容。还
请注意，每一页上可以有多个页眉和页脚 -
以及我们刚刚讨论的***页眉和页脚，您
也可以有一个 <header> 和 <footer> 嵌套在每个元素中
<article>，在这种情况下，它们只适用于那个特定的
文章。添加到我们上面的例子中：
<article>
<header></header>
<section id="introduction"></section>
<section id="content"></section>
<section id="summary"></section>
<footer></footer>
</article>
<nav>
<nav> 元素用于标记导航链接或其他
将您带到不同页面的结构（例如搜索表单）
当前站点，或当前页面的不同区域。其他链接，
比如赞助商链接，不算。你当然可以包括
<nav> 中的标题和其他结构元素，但它是
不是强制性的。
<aside>
您可能已经注意到我们使用了<aside> 元素来标记
第二个侧边栏：包含最新演出和联系方式的侧边栏。这
非常合适，因为<aside> 用于标记
与主要流程相关但不适合的信息
直接地。而本案的主要内容都是关于乐队的！
<aside> 的其他不错的选择是有关
博客文章、乐队传记或乐队唱片的作者
带有购买专辑的链接。
<div> 会在哪里？
因此，在我们的页面上使用了所有这些很棒的新元素，
不起眼的<div> 肯定有编号吗？不。事实上，<div>
仍然有一个完全有效的用途。你应该在没有的时候使用它
可用于对内容区域进行分组的其他更合适的元素，
这通常是在您纯粹使用元素进行分组时
内容一起用于样式/视觉目的。一个常见的例子是
使用 <div> 包装页面上的所有内容，然后使用
CSS 使浏览器窗口中的所有内容居中，或应用
整个内容的特定背景图像。
【讨论】：
但是对于嵌套部分，使用<section class="summary"> 而不是<section id="summary"> 不是更有意义吗？如果您在一个页面上有多篇文章，那么后一种方法会导致同一页面上出现重复的 ID——HTML 错误。对吗？
是的，我可能会在那个实例中使用类。
不应该把你提到的所有标签都包裹在“main”中，然后再包裹在“body”中吗？
main 标签最好添加。将根据页面上的独特内容来决定将其放置在哪里。在这个例子中，我想我会把它放在中心section 周围。阅读更多：w3.org/TR/2012/WD-html-main-element-20121217“文档的主要内容部分包括该文档独有的内容，不包括在一组文档中重复的内容，例如站点导航链接、版权信息、站点徽标和横幅以及搜索表单。 "它仍然像 MDN 文档一样模棱两可 【参考方案5】：
[explanations in my “main answer”]
第 7 行。section 围绕整个网站？还是只有一个div ？
两者都没有。对于样式：使用<body>，它已经存在了。对于分段/语义：as detailed in my example HTML 其效果与实用性相反。已经包装的内容的额外包装器并没有改善，而是噪音。
第 8 行。每个部分都以标题开头？
不，这是作者选择将通常概括为“标题”的内容放在哪里。如果该标题内容在没有额外标记的情况下可以清楚地识别，那么它可能会在没有<header> 的情况下完全保留。这也是作者的选择。
第 23 行。这是 div 对吗？还是必须是部分 ？
<div> 可能是错误的。这取决于意图：是否仅用于样式设置它可能是正确的。如果是出于语义目的，那就错了：它应该是 <article> 而不是 as shown in my other answer。 <article> 也是正确的，如果它同时用于样式和切片。
<section> 在这里看起来不对，因为在此之前或之后没有类似的部分，就像书中的章节一样。 （这就是<section>的目的）。
第 24 行。用 div 分割左/右列。
没有。为什么？
第 25 行。article 标记的正确位置？
是的，有道理。
第 26 行。是否需要将 h1 -tag 放在 header -tag 中？
没有。一个单独的 <h*> 元素可能永远不需要进入 <header> （但如果你愿意，它可以），因为很明显它是即将到来的标题。 – 例如，如果 <header> 还包含标语（标有 <p>），这将是有意义的。
第 43 行。内容与主要文章无关，所以我决定这是一个 section 而不是 aside 。强>
<aside> 必须与周围的内容“切线相关 ”是一种误解。关键是：如果内容只是“相切 相关”或根本不相关，请使用<aside>！
尽管如此，除了<aside> 是一个不错的选择之外，<article> 可能仍然比<section> 更好，因为“热门项目”和“新项目”不能像一本书中的两个章节那样阅读。您可以完美地选择其中一个，而不是另一个，就像对某物进行替代排序，而不是像整体的两个部分。
第 44 行。H2 没有 标题
很棒。
第 53 行。section 没有 header
好吧，没有<header>，但是<h2>-heading 清楚地表明了本节中的哪个部分是标题。
第 63 行。Div 包含所有（非相关）新闻项目
<article> 或 <aside> 可能会更好。
第 64 行。header 和 h2
已经讨论过了。
第 65 行。嗯，div 还是 section ？或者删除这个 div 并且只使用 article -tag
没错！删除<div>。
第 105 行。页脚 :-)
非常合理。
【讨论】：
将一个答案分成 3 个不完整的答案没有帮助。
@ChristianStrempfer 这实际上很有帮助，因为很多人不是来这里阅读 OP 特定问题的具体答案（这个答案），而是阅读有关手头主题的更多信息（我的主要答案）。 – 我相信，如果有一个巨大的 tldr 答案，我什至不会仅凭我的主要答案获得投票。 – 你有什么建议？
我建议将它们合并为一个答案。收集票不是拆分它们的好理由。尤其是 third answer 不能单独存在，因为您引用的是主要答案。
@ChristianStrempfer 这对我来说太长了。 – 不过，我正在努力改进表格...... 【参考方案6】：
根据the explanation in my “main” answer，有问题的文档应该按照大纲进行标记。
在下面两个表格中我展示了：
原始 HTML 及其大纲
可能的预期大纲和执行此操作的 HTML
原始 html（缩短） <body>
<section>
<header>
<div id=logo></div>
<div id=language></div>
</header>
<nav>
...
</nav>
<div id=main>
<div id=main-left>
<article>
<header>
<h1>The real thing</h1>
</header>
</article>
</div>
<div id=main-right>
<section id=main-right-hot>
<h2>Hot items</h2>
</section>
<section id=main-right-new>
<h2>New items</h2>
</section>
</div>
</div>
<div id=news-items>
<header>
<h2>The latest news</h2>
</header>
<div id=item_1>
<article>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
<div id=item_2>
<article>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
<div id=item_3>
<article>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
</div>
<footer>
<ul><li>...</ul>
</footer>
</section>与大纲相关的原始 html <body>
<section>
// logo and language
<nav>
...
</nav>
<article>
<h1>The real thing</h1>
</article>
<section>
<h2>Hot items</h2>
</section>
<section>
<h2>New items</h2>
</section>
<h2>The latest news</h2>
<article>
<h3>...</h3>
</article>
<article>
<h3>...</h3>
</article>
<article>
<h3>...</h3>
</article>
// footer links
</section>生成的大纲 1. (untitled document)
1.1. (untitled section)
1.1.1. (untitled navigation)
1.1.2. The real thing (h1)
1.1.3. Hot items (h2)
1.1.4. New items (h2)
1.1.5. The latest news (h2)
1.1.6. news item_1 (h3)
1.1.7. news item_2 (h3)
1.1.8. news item_3 (h3)
原稿的轮廓是
绝对不是预期的结果。
下表显示了我对改进版本的建议。我使用以下标记：
<removed><NEW_OR_CHANGED_ELEMENT>
<element MOVED_ATTRIBUTE=1>
可能的预期轮廓 1. (main)
1.1. The real thing
1.2. (hot&new)
1.2.1. Hot items
1.2.2. New items
2. The latest news
2.1. news item_1
2.2. news item_2
2.3. news item_3
> br> >修改后的html <body>
<section>
<header>
<ASIDE>
<div id=logo></div>
<div id=language></div>
</ASIDE>
</header>
<nav>
...
</nav>
<ARTICLE id=main>
<div id=main-left>
<article ID=main-left>
<header>
<h1>The real thing</h1>
</header>
</article>
</div>
<ARTICLE id=main-right>
<ARTICLE id=main-right-hot>
<h2>Hot items</h2>
</ARTICLE>
<ARTICLE id=main-right-new>
<h2>New items</h2>
</ARTICLE>
</ARTICLE>
</ARTICE>
<ARTICLE id=news-items>
<header>
<h2>The latest news</h2>
</header>
<div id=item_1>
<article ID=item_1>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
<div id=item_2>
<article ID=item_2>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
<div id=item_3>
<article ID=item_3>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
</ARTICLE>
<footer>
<NAV>
<ul><li>...</ul>
</NAV>
</footer>
@987654348 @``生成的大纲 1. (untitled document)
1.1. (untitled logo and lang)
1.2. (untitled navigation)
1.3. (untitled main)
1.3.1 The real thing
1.3.2. (untitled hot&new)
1.3.2.1. Hot items
1.3.2.2. New items
1.4. The latest news
1.4.1. news item_1
1.4.2. news item_2
1.4.3. news item_3
1.5. (untitled footer nav)
修改后的 HTML 反映了
比预期的大纲更好
原件。
【讨论】：
感谢您出色的详细回答，非常有启发性。我想更多地了解这个话题，所以我希望你能解释一些对我来说似乎很奇怪的选择。我会将它们作为单独的 cmets 发布。
1. header around side > div[id=logo] 似乎与我无关。从表面上看，它是一个标题，但在语义上不是。语言 div 可能是某种导航，徽标可能是整个网站的标题，但肯定不是页面。
2.
3.
考虑编辑你的建议，你的“理论”答案写得很好，但我认为大多数初学者只会看代码示例，他们可能会感到困惑，因为它不符合理论部分。 【参考方案7】：
主要错误：您在整个文档中都有“divitis”。为什么会这样？
<header>
<div id="logo"></div>
<div id="language"></div>
</header>
代替：
<header role="banner">
<!-- Not the best -->
<h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... -->
<h2 id="language"></h2>
<!-- Better, if the IDs have not semantic sense -->
<h1></h1>
<h2></h2>
</header>
要对该标题进行样式化，请使用 CSS 层次结构：body > section > header > h1, body > section > header > h2
更多，...第 63 行：为什么标题包装 h2？如果您在标题中不再包含任何元素，只需使用单个 h2。请记住，您的结构不是为了样式化文档，而是构建一个自我解释的文档。
将此应用于文档的其余部分；
祝你好运；）
【讨论】：
@superUntitled <hgroup> is not part of HTML5 anymore
应该 role="banner" 在 h1 本身上，而不是整个标题？这样，它指向屏幕阅读器将宣布的单个文本，而不是 HTML 球。
使用 h1 和 h2 作为标志和语言对我来说没有意义。右边的小语言按钮应该是这个页面上第二重要的内容/信息？而且，如果您将徽标放在 h1 中，搜索机器人会发现每个页面的主要内容都是相同的（在我看来很无聊）。另请参阅@MeanEYE 答案以了解 h1 和 h2 的使用。除此之外，如果您需要语义，ID 是非语义的，请使用 RDFa。你的方式让 CSS 选择器变慢了：developers.google.com/speed/docs/best-practices/… 【参考方案8】：
为什么文章标签本身没有 item_1、item_2 等 ID？像这样：
<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...
似乎没有必要添加包装 div。 ID 值在 HTML 中没有语义含义，所以我认为这样做是完全有效的 - 你并不是说第一篇文章是 always item_1，只是当前页面上下文中的 item_1 . ID 不需要具有任何独立于上下文的含义。
另外，关于你在第 26 行的问题，我认为那里不需要 标签，我认为你可以省略它，因为它在“main-left”div 中是独立的。如果它位于文章的主列表中，您可能希望包含
【讨论】：
我只是按照原来的例子来展示如何在没有不必要的包装 div 的情况下完成同样的事情。 ID 存在的原因可能有很多……一方面，可能存在指向它们的锚链接。 【参考方案9】：
Section 只能用于在文档中封装一个部分（如章节和类似内容）
带有标题 标签：否。 Header标签代表页眉的封装，不要与H1、H2等混淆。
哪个分区？ :D
是的
来自 W3C 学校：
标签定义外部内容。
外部内容可以是来自外部提供商的新闻文章、来自网络日志（博客）的文本、来自论坛的文本或来自外部来源的任何其他内容。
不，标题标签有不同的用途。 H1、H2 等表示文档标题 H1 是最重要的
我没有回答其他问题，因为很难猜出您指的是什么。如果还有其他问题，请告诉我。
【讨论】：
感谢您的回答！关于第 3 点；对不起，行号不对。它必须是 line_23 而不是第 3 点；另请参阅我帖子中的行更改。
是的，我在我的网站上做同样的事情。通常 DIV 用于创建站点结构。在 HTML5 中引入页眉、页脚和类似的标签只是为了让事情更容易阅读。它们的行为方式与 DIV 相同。
检查您的来源。 w3c 学校网站未指定article 必须来自外部 源。 w3schools.com/html5/tag_article.asp
嗯，我什至没想到这篇文章是从外部来源使用的。这是一个旧的回复，我几乎不记得它是关于什么的。 :)
我同意#1。我认为这些 SECTION 元素作为 ASIDE 更有意义。 【参考方案10】：
<body itemscope itemtype="http://schema.org/Blog">
<header>
<h1>Wake up sheeple!</h1>
<p><a href="news.html">News</a> -
<a href="blog.html">Blog</a> -
<a href="forums.html">Forums</a></p>
<p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Index of all articles</a></li>
<li><a href="today.html">Things sheeple need to wake up for today</a></li>
<li><a href="successes.html">Sheeple we have managed to wake</a></li>
</ul>
</nav>
</header>
<main>
<article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">My Day at the Beach</h1>
</header>
<div itemprop="articleBody">
<p>Today I went to the beach and had a lot of fun.</p>
...more content...
</div>
<footer>
<p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
</footer>
</article>
...more blog posts...
</main>
<footer>
<p>Copyright ©
<span itemprop="copyrightYear">2010</span>
<span itemprop="copyrightHolder">The Example Company</span>
</p>
<p><a href="about.html">About</a> -
<a href="policy.html">Privacy Policy</a> -
<a href="contact.html">Contact Us</a></p>
</footer>
</body>
https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element
【讨论】：
【参考方案11】：
这是我工作的例子
【讨论】：
【参考方案12】：
我认为您不应该在新闻项目摘要上使用标签（第 67、80、93 行）。
您可以使用部分或只使用封闭的 div。
一篇文章需要能够独立存在并且仍然有意义或完整。由于它不完整或只是一个摘录，它不能是一篇文章，它更多的是一个部分。
当您点击“阅读更多”时，后续页面可以
【讨论】：
【参考方案13】：
编辑：不幸的是我必须纠正自己。
请参阅下面的https://***.com/a/17935666/2488942 以获取 w3 规范的链接，其中包含一个示例（与我之前看到的不同）。
但是后来....
感谢@Fez，Here 是一篇很好的文章。
我原来的回答是：
w3 规范的结构方式：
4.3.4 章节
4.3.4.1 正文元素
4.3.4.2 节元素
4.3.4.3 导航元素
4.3.4.4 文章元素
....
向我建议section 的级别高于article。如this answer section 中所述，对主题相关的内容进行分组。在我看来，一篇文章中的内容无论如何都与主题相关，因此，至少对我而言，这也表明section 与article 相比具有更高的级别。
我认为它应该像这样使用：
section: Chapter 1
nav: Ch. 1.1
Ch. 1.2
article: Ch. 1.1
some insightful text
article: Ch. 1.2
related to 1.1 but different topic
或新闻网站：
section: News
article: This happened today
article: this happened in England
section: Sports
article: England - Ukraine 0:0
article: Italy books tickets to Brazil 2014
【讨论】：
【参考方案14】：
„第 23 行。这个 div 对吗？还是必须是一个部分？”
两者都不 - 有一个 main 标记用于此目的，每个页面只允许使用一次，并且应该用作主要内容的包装器（与侧边栏或站点范围的标题相反）。
<main>
<!-- The main content -->
</main>
http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element
【讨论】：
【参考方案15】：
我想更准确地澄清这个问题，如果我错了，请纠正我
让我们以 Facebook Wall 为例
1.Wall 位于“section”标签下，表示它与页面是分开的。
2.所有帖子都在“文章”标签下。
3.然后我们有一个帖子，它位于“部分”标签下。
3.我们有标题“X用户发布这个”我们可以使用“标题”标签。
4.然后在帖子里面我们有三个部分，一是图片/文字，点赞-分享-评论按钮和评论框。
5.评论框可以使用文章标签。
【讨论】：
【参考方案16】：
根据Nathan's answer，这很有意义（对于红色和橙色部分，也许您可以分别使用div 的和/或 header 和footer）：
【讨论】：
以上是关于HTML5 最佳实践；部分/标题/旁边/文章元素[关闭]的主要内容，如果未能解决你的问题，请参考以下文章
使用 Javascript 将大块 HTML 插入元素的最佳实践？
PostgreSQL - 整数 [] 最佳实践
Yii系列最佳实践之后台业务框架
Yii系列最佳实践之后台业务框架
Canvas 最佳实践（性能篇）
Canvas 最佳实践（性能篇）