<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Your menu</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
</section>
<aside>
<h2>About section</h2>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</aside>
<footer>
<p>Copyright 2009 Your name</p>
</footer>
</body>
</html>
字符集在哪里？
它在那里，但作为元标记……简化了。
这是 section 标签的错误用法。
section 标签有什么问题？
section 属性不应包含文章，反之亦然。请参阅此示例
https://mdn.org.cn/en-US/docs/Web/HTML/Element/article
好吧，在 section 内使用
<article>是正确的用法……即使在 Dave 提供的链接中，示例也以这种方式显示……然后，什么是应该的，什么不是……如果您愿意，您可以使用包含其自身子
<section>的<section>和<article>，网站仍将正常工作……只是意味着您以不同的方式构建代码……section 标签有些问题。
补充 ulli 的评论：包含文章的内容“部分”，以及文章内包含文章主体或附加到其上的任何其他内容的内容“部分”。在 Mozilla 示例中，文章中的部分包含对文章的评论，或对相关主题的评论。
您的答案中存在问题：以 Mozilla 作为信息来源。通常，此条目中发布的 section 元素是可以接受的。
@CHarlie：Mozilla 作为信息来源有什么问题？
只是关于 and 内部的双标签以及 在哪里 的一个疑问。
感谢您非常清晰且有用的网站，我向我的网页设计学生介绍了您的视频，他们也发现它非常有用。
嗯，看起来我编写的代码没有出现在文本中，所以我再试一次，希望它能正确渲染。
我想知道 <article> 内部的双 <p> <p> 吗？
… 以及 <h1> 在哪里？
谢谢
我们如何为 Android 创建 HTML 5 页面？是否有任何特定的标签。
有些页面看起来不像小女孩的博客。它们有一篇文章，但有几个导航和侧边栏。继续使用 xhtml-strict 并使用角色和标题！
HTML5 规范中是否对 charset 元标记有新的定义？例如
*刚刚搜索了一下，找到了一个 答案。（是的，简短的回答）。
我只是在考虑 nav 标签，它真的有必要吗？我从未使用过 div#nav>ul 结构，而是使用 ul#nav。
对于字符集，规范实际上提供了 3 种方法..
1. 传输级内容类型标头。
2. 新的 charset 元标记
3. Unicode 字节顺序标记
没有样式它会看起来像普通文本还是…？
对于文档来说，这是一个不错的语法。对于网页，您应该将导航放在内容之后以实现可访问性。
考虑以下替代方案
<header>
...
</header>
<section>
...
</section>
<nav>
...
</nav>
<footer>
...
</footer>
您仍然可以使用 CSS 使导航出现在页面标题（或您想要的任何其他位置），但当盲人用户使用屏幕阅读器阅读页面时，他们不会在阅读完页面内容之前遇到冗长的链接列表。
此外，当使用下拉菜单时，它们将出现在嵌入式内容之上（而不是隐藏在下方），因为它们在 DOM 中的位置较低。
感谢您的解释；我从未想过这一点。非常有帮助。
不完全是！您可以将其放在页面的顶部。查看 MDN 规范。
感谢您的帖子，您做得很好：D
我想问的是，是否有可能让 Internet Explorer（6、7 和其他
版本）理解 HTML 5，例如使用 js 技巧。
我为一家网络公司工作，我们创建的网站也应该在 IE 中很好地显示和访问。
如果有人有任何建议，请告诉我您的想法。
我的总经理：[email protected]
只需访问此网址：https://github.com/aFarkas/html5shiv#html5shivjs
下载 html5shiv.js 并将下面提到的代码包含到 head 标签中。
它会在 DOM 中动态渲染 HTML5 元素，并避免 IE6-8 中的跨浏览器兼容性问题。
将 html5shiv.js 下载到 HTML 内部的本地 js 文件夹后，请在 head 标签中使用它；
感谢您的帖子，您做得很好：D
谢谢！
我想有一天尝试一下 HTML5。
这绝对是一个好的起点！
真的是
………..
或者
…….
因为我见过使用 article 而不是 section 的网站。
嗨，
我一直在将这篇文章用作许多 HTML5 项目的参考，它很棒。
但前几天我观看了一个视频，其中播音员说标签用于 *在* 标签 *内部* 分隔文章中的不同部分，这让我思考哪一个是正确的。有什么想法吗？
感谢分享代码。:D
将 section 放入 article 中是否有意义。阅读杂志文章时，文章中有很多部分，而不是一个部分中有很多文章？
section 标签中的 Header？
是的
您可以使用它来定义文章的标题内容，例如标题、描述等！
例如
IE8 在使用此标记时无法识别这些样式。
例如
样式表中的标签
header {width:940px; margin:auto; padding:0;}
文档
Hello World
当您在 IE8 中渲染页面时，内容不会居中。如果在 FF 或 Safari 中渲染，则一切正常。
C~
嗯……，……不太清楚，是吗？考虑一下：http://www.turtleblog.co.uk/2011/04/whats-new-to-html5/
你的结构错了！部分应该位于文章内部 > 文章本身有意义，而部分则依赖于其他部分才能有意义。http://html5doctor.com 有几篇关于此的好文章
Warren：文章应该位于部分内部，而不是反过来
错误的教程！！！！
访问
http://dev.w3.org/html5/spec/Overview.html#the-section-element
Clint，您可以使用 Norminizer 或 eric meyers CSS Reset。所有这些都是很棒的工具。我预见到 HTML 5 由于语义而成为 SEO/SEM 背后的主导力量……很棒的文章。
我最近一直在尝试将我的网站升级到 html5，让我告诉您，这很痛苦，因为大多数选择器都不会按照我想要的方式定位，任何
关于教程的建议
所有主要部分都包装在语义标签中，其他部分则保留为 div 或您使用的任何内容。对于屏幕阅读器，您可以在标签内使用 alt 来描述该 div！
我刚刚完成了主题的重新设计。非常感谢你的这篇有益的文章。HTML5 真棒：p
每个人都只给出 html5 标签，但没有人给出如何为每个标签编写 css，例如页脚、旁白、导航、部分、文章等。
我想知道如何为 html5 正确编写 css
你能否发送一个带有示例的布局
或一个参考网站
mohinder 你可以在你的 header footer 或 aside 标签内创建一个类或一个 id ……然后简单地将 css 添加到该类或 id 中..
例如……
section class=”left_top_section”>
header class=”left_top_header”> h1>……..header goes here ……./h1>/header>
/section>
最后，您可以将您的 css 规则应用于这些类……:)
Mohinder CSS 与您之前对 div 使用的 CSS 没有什么不同。
难道你们中的一些人说上面写的结构是错误的，而 HTML5 正是为了这个原因而创建的吗？如果 HTML5 有一个正确的地方，那就是：任何东西都可以！
非常清晰的信息，感谢此信息，但我有一个困惑，我们可以在文章标签下使用部分吗？
是的，但文章位于部分之下有利于识别哪个部分包含哪些文章，并且这也是网站中使用的标准做法。
是的，我们可以使用文章标签。
是这样的吗？
<section>
<header>//h2</header>
<article>
<header>//h3</header>
</article>
<article>
<header>//h3</header>
</article>
</section>
是的，没问题……绝对正确
最后，HTML5 带来了更好的语义标记形式！该元素比旧的导航更有意义
<
ul>（无序列表）或
<
ol>（有序列表）元素，因为这些列表可以表示任何内容。使用该标签，搜索引擎可以更好地定义此标签仅用于导航用途的概念，例如使用绝对 URL（http://www.your-site.com/example-page.html）或相对 URL（your-directory/example-file.html）。旧的列表标签可以表示图像列表或某些内容的类型，无论它是否为链接。
新的部分标签非常适合主页，您可能在其中有指向网站不同部分的链接，并希望在每个部分中表示特定类型的內容。文章标签也是“不言而喻的”。几年前就应该有这个了。我真的很喜欢这个标签！一种更好地表示与文章或页面内容相关但不是文章或页面内容直接组成部分的内容的方法。
谢谢你的分享！这正是我需要的！
你好，
我刚刚看到一篇文章解释说我们应该使用而不是文章
http://www.iandevlin.com/blog/2013/01/html5/the-main-element
你怎么看？
我不知道如何组合我的部分、文章、主体和旁白标签。由于我的网格，我的文章和我的辅助导航位于同一行。
那么我可以这样做吗？
<main>
<article>
<h1></h1>
<p></p>
</article>
<aside>
</aside>
</main>
?
您在主体、部分、文章中使用了 h2
太棒了！在你的帮助下，我刚刚对我们的网站进行了 HTML5 和 Jquery 的重新设计。谢谢！
您在部分中使用了 h2，但我认为它应该是 h1 标签
这似乎与 html5doctor 所述不一致。文章标签应在使用部分标签的地方使用，反之亦然。
……或者也许根本不重要。这里的问题是每个人都感到困惑（包括那些写过关于 HTML5 的书的人），而且有充分的理由。
我建议您阅读“HTML5 的真相”中的这篇免费章节（http://www.netmagazine.com/features/truth-about-structuring-html5-page）。
一旦您理解了标签背后的意图，您就可以决定是否以及何时应该使用它们。
嘿，chris，快速提问，在文章标签内放置部分可以吗？还是无效的？
可读性和 W3C 是双向的。HTML5 布局层次结构为了布局原因而赋予部分标签更大的权重。文章标签的位置是设计者的语义，内容传递。CSS 权重，从重到轻似乎运行部分-文章-div。使**部分**成为极好的内容锚点，**文章**成为可靠的占位符，而 div 成为不显眼的操作器。
header/header article... section... article/article .../section .../article footer/footer现在是 2013 年……我们现在可以使用<main>标签了。
我知道这是一篇旧文章，但我只是在更新我的模板，并注意到W3Schools仍然显示该标签为“不受支持”。这看起来有点奇怪。在 IE 10+ 中有人遇到过任何问题吗？
我刚刚浏览了一下代码，我注意到没有
标签。也许 Coyer 可以编辑代码，因为有很多评论，人们可能不会向下滚动。想知道评论部分是否应该位于主<section></section>标签内，或者我们需要另一个<section></section>来放置评论模板？提前感谢。
谢谢！HTML5 改变了网络世界……
请考虑这些错误
http://html5doctor.com/avoiding-common-html5-mistakes/
很棒的简单文章！
人们仍然认为它包含错误，但不是每个人都能阅读规范！
在规范中，它清楚地显示了一篇文章包含一个章节，以及一个章节包含一篇文章 - 放过它吧！
http://www.w3.org/html/wg/drafts/html/master/sections.html#the-article-element
这是真的，Dan。但在 Chrome 和 IE 中（我现在只使用后者），CSS 样式表会根据父子关系以不同的方式处理 section 和 article 元素。
article 和 section 是新手 - p、a 和 h1 已经存在一段时间了
屏幕布局反映了较旧（基础？）元素的稳定性
有时设计师必须像错误测试人员一样编写代码 - 推进这两种情况，你将拥有更多控制权
不确定这是否适用于 article 和 section - 它们现在正处于增强状态
https://css-tricks.cn/perfect-full-page-background-image/ …在这方面我最喜欢的……
H1在哪里？我们可以在每个 section、article 或 header 中放置多个 H1标签吗？这对SEO有好处吗？
嘿，Chathura，
也许有人已经回答了你的问题，但根据 Matt Cutts（Google 的大人物，并且乐于回答关于 SEO 最佳实践的问题）的说法，在一个页面上使用多个 H1 标签是可以的，但要谨慎使用并适度。这意味着在有意义的地方使用 H1！通常，当我开发网站时，我会在徽标处使用一个 H1（仅在首页上），首页的主要标题也可以使用一个 H1，因为它们在网站的不同部分被很好地分隔开来。在进行内部布局页面时，我删除了徽标处的 H1，只使用基本锚点代替，这样页面上就只有一个 H1，并且它专用于页面标题。
希望这说得通。
Matt Cutts 关于 SEO 中 H1 元素最佳实践的视频：https://www.youtube.com/watch?v=GIn5qJKU8VM
也许这个问题已经解决了，但现在我在很多网站上看到，开发人员完全跳过了 H1 标签，直接使用 H2 来表示页面标题/文章标题……我对此感到困惑，因为 H1 应该用于页面的主要标题……为什么这在现在的网站中变得普遍？对我来说很困惑，我还要大胆猜测一下，使用 H2 作为主要页面标题的任何网站的开发人员都只是懒惰，没有注意到正在使用的 HTML 元素类型。
现在越来越常见的是使用横幅或徽标图像代替 H1 标题。子标题仍然感觉应该使用 H2 等等。实际上没有充分的理由使用 H 标签，因为我们倾向于重置所有默认样式，并且网页设计正在脱离打印模型。
未提出的问题是，徽标应该放在 H1 标签中吗？也许可以加上 Rel 属性？有人在乎吗？
嗯……想象一下阅读一份报纸，其中包含不同的版块，例如体育版、娱乐版和商业版。每个版块中不都有几篇文章吗？有时，一篇文章可能包含几个部分。这似乎有点像先有鸡还是先有蛋的问题 :P
不应该像这样吗？http://codepen.io/anon/pen/myzZMb.html
根据我在一篇文章中读到的内容，使用 section 包含 article 还是 article 包含 section 实际上并不重要。我不知道这样做是否可以，但我认为 section 标签更适合用于通用内容，而 article 则适合用于博客文章或类似内容。
那么，关于上面提到的“section”和“article”我们得到了答案吗？
我认为 Article 标签的主要用途是用于博客内容。如果你正在制作一个非新闻/信息页面，使用 Article 标签有点误导，尽管我假设它可以作为一个不错的段落包装器。但最终，这都是语义。你可以用 Div 标签完成整个页面。
每个人都过于关注“section”标签及其位置，以至于没有人问过 HTML5 中另一个新标签“main”标签。虽然内容可能是“article”或“section”，但它也是页面的“主要”内容，所以不应该使用该标签吗？
这与标准 HTML 有什么不同？
哪些是 HTML5 特定的元素！？
各位好，
在 HTML 5 中，上面很好地描述了特定的流程或结构骨架。
它基本上有 7 个核心元素，与 html4 及更早版本不同，我们依赖于 div 标签来扮演这些角色，并使用 CSS 来以所需/必要的格式进行显示。
在 HTML 5 中
div 的基本用途和使用 CSS 控制它们的功能被追加了（注意：只是一个标准的添加，没有删除），并且进行了彻底的新修改，这些核心标签更有效地实现了其目的，它们如下所示。
1) Header
2) Nav
3) Main
4) Section
5) Article
6) Aside
7) Footer
现在，在专业上，您可以使用所有这些或其中一些，如 Chris 建议的那样，或者采用一种灵活的方法，您可以将上述标签和 div 进行组合，或者只使用传统的 div 和 css 使用方法。
关于它们的区别和细节在下面的评论中通过简单的示例进行了说明。
现在，正如我上面所说，
在传统方法中
<
div id=”footer”>
其中所有 id 值都在 CSS 中精确定义，并且只按相应的方式起作用，这里的作用和角色取决于我们在 CSS 中的定义。
在标准 HTML 5 中
</header
<
section>
（可选 * 不是必须使用的标签，但绝对是一个很好的添加）
这里 CSS 仍然发挥着至关重要的作用，但仅用于视觉样式，而不是在主要级别为标签分配角色。
现在
<
header> 标签用于显示页面的顶部区域，其中放置了徽标、搜索栏、登录、订阅等其他重要元素。
注意：它也放置在内容内部以用于标题或只是作为突出显示等。
<
nav> 标签，像往常一样用于网站的菜单。
注意：它也可以放置在任何地方，不必紧接在 header 后面（取决于菜单类型 - 垂直/水平/大型/多用途等），或者甚至可以用于放置在侧边栏中的内部菜单（水平或垂直）。
<
section> 标签是一个标签，它包含一些内容，无论是侧边栏上的菜单，还是新帖子的显示位置，或图片库等。
注意：它可以放置在网站的任何位置，核心目的是容纳一些内容。
<
article> 标签也是一个容纳数据的标签，但只在一个特定的上下文中，而不是多个上下文中
例如：假设如果你正在谈论“总理”，你可以包含与该特定主题相关的任意详细信息，你不能突然在同一个上下文中谈论“总统”。
但如果你正在谈论政治，你可以同时包含总理和总统，它们都成为上下文的一部分。
让我详细举例说明
政治
总理
姓名：John
年龄：45
政党：XYZ 党
XYZ 党是 1990 年成立的一个全国性政党
传记
总统
姓名：John
年龄：45
政党：ABC 党
ABC 党是 2001 年成立的一个地区性政党
传记
</section
现在，这里政治被视为一个 section，包含的文章是总理和总统。
我们可以再次使用这个 section，但那时只包含总理的详细信息
例如：
姓名：
年龄
竞选区域
他/她所属的政党
他赢了几次
详细信息/传记
等等，将被视为文章中的 section。
其他情况也类似。
同时，还有一个有趣的元素/标签
需要说明。它也服务于明确的目的，但应该始终与上下文相关，尽管实际上并不是上下文的一部分，就像你在上面的例子中看到的那样，它谈到了与上下文相关的一些特定部分，但不是上下文的一部分。
标签是内容容器，网站的主要部分驻留在其中，可能包括从滑块到菜单、表单、网站详细信息等任何内容。
最后是
<
footer> 标签
它的用途和作用无需解释，假设你们都知道它的用途。
我相信，这个解释有点长，但绝对切中要害且易于理解。
如有任何疑问，您可以回复评论或通过邮件联系我 [email protected]
我非常感谢“Chris”创建了这个精彩而美丽的门户网站，其中包含如此海量的知识。
来自Mozilla：
<section>可以包含<article>，而<article>可以包含<section>。article 和 section 之间有什么区别？
• 两者都可以
o 嵌套在彼此内部
o 在不同的上下文或嵌套级别中具有不同的含义
• section 就像书籍中的章节
o 它们通常具有同级元素（可能在不同的文档中？）
o 它们共同具有一些共同点，例如书中的章节
• 至少在最低级别，一个作者对应一篇文章
o 标准示例：单个博客评论
o 博客文章本身也是一个很好的例子
o 博客文章和其评论文章也可以用 article 包裹
o 它是一个“完整”的事物，而不是一系列类似事物的一部分
• article 中的 section 就像书中的章节
• section 中的 article 就像卷中（在一个系列内）的诗歌
如有疑问，请参考规范
https://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-section-element
https://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-article-element
请注意，规范中的示例显示 section 和 article 都嵌套在彼此内部；没有简单的规则说明一个应该只/总是嵌套在另一个内部。
可能需要添加 main 内容角色或 main 标签。
article 应该包含 section，而不是反过来。
在 section 内包含 article 是完全可以接受的。 规范 目前规定
而且，就 article 而言，它们可以并且是页面内自包含的元素
综合来看，section 可以是一组主题相关的 article，这些 article 是自包含的元素。这里唯一可能需要更新的是在 section 内包含标题。