HTML5最佳实践;部分/头/ /条元素

小开

Section只能用于在文档中包装一个节(如章节等)
头标签:NO。标题标记表示页面标题的包装器，不要与H1, H2等混淆。
哪一个div ?: D
是的
From W3C Schools:

标签定义外部内容。外部内容可以是来自外部提供者的新闻文章，或来自web日志(博客)的文本，或来自论坛的文本，或来自外部来源的任何其他内容
不，头标签有不同的用途。H1、H2等表示文档标题H1是最重要的

我没有回答其他问题，因为很难猜到你指的是什么。如果还有其他问题，请告诉我。

< /引用> < / p >

小开

为什么不使用item_1, item_2等等。文章标签上的id ?是这样的:

<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...

似乎没有必要添加包装器div。ID值在HTML中没有语义意义，所以我认为这样做是完全有效的——您不是说第一篇文章是总是 item_1，而是当前页面上下文中的item_1。id不需要具有任何独立于上下文的含义。

另外，关于你在第26行提出的问题，我不认为<标签是必需的，我认为你可以省略它，因为它在“main-left”div中是单独的。如果它在文章的主列表中，你可能想要包括<只是为了保持一致性。

小开

事实上，当谈到页眉/页脚时，你是非常正确的。以下是关于如何使用主要HTML5标签的一些基本信息(我建议阅读底部链接的完整源代码):

< em > < / em >节 -用于将与主题相关的内容分组在一起。听起来像一个div元素，但它不是。div没有语义意义。在用section元素替换所有div之前，一定要问自己:“所有的内容都相关吗?”

除了< em > < / em > -用于切线相关的内容。仅仅因为一些内容出现在主内容的左边或右边，不足以成为使用aside元素的理由。问问自己，是否可以在不降低主要内容意义的情况下删除旁白中的内容。拉引号是切线相关内容的一个例子。

header元素和header(或报头)之间有一个关键的区别。在一个页面中通常只有一个标题或“报头”。在HTML5中，你可以想要多少就有多少。规范将其定义为“一组介绍性或导航辅助工具”。您可以在站点的任何部分使用标题。事实上，您可能应该在大多数部分中使用标题。规范将section元素描述为“内容的主题分组，通常带有一个标题。”

< em > nav < / em > -用于主要导航信息。一组链接组合在一起不足以成为使用nav元素的理由。另一方面，站点范围的导航属于nav元素。

< em >页脚< / em > -听起来像是对职位的描述，但实际上不是。页脚元素包含包含它的元素的信息:作者、版权、相关内容的链接等等。虽然我们通常在整个文档中都有一个页脚，但HTML5允许我们在部分中也有页脚。

# EYZ0: # EYZ1

此外，这里有一个关于article的描述，在上面的源代码中没有找到:

< em > < / em >条 -用于指定独立、自包含内容的元素。一篇文章本身就应该有意义。在用文章元素替换所有div元素之前，一定要问问自己:“它是否可能独立于网站的其他部分阅读?”

小开

我认为你不应该在新闻摘要上使用标签(第67、80、93行)。你可以使用section，也可以使用div。

一篇文章需要能够站在自己&仍然是有意义的或完整的。由于它不完整或只是一个摘录，它不可能是一篇文章，它更像是一个章节。

当你点击“阅读更多”的后续页面可以

小开

主要的错误是:你在整个文档中都有“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??如果在header中没有包含更多的元素，只使用一个h2。请记住，你的结构不是风格化文档，而是构造一个自解释的文档。

将此应用于文档的其余部分; 祝你好运;)

小开

div元素可以替换为新的元素:header, nav, section, article, aside和footer。

该文档的标记可能如下所示:

<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>

您可以在这篇文章在A List Apart上中找到更多信息。

小开

编辑:不幸的是，我必须纠正自己。

参考下面https://stackoverflow.com/a/17935666/2488942的w3规范链接，其中包括一个示例(不像我前面看到的那些)。

< p >然后…… 在这里是一篇关于它的好文章，感谢@Fez

我最初的回答是:

w3规范的结构方式:

4.3.4节

4.3.4.1体元素

4.3.4.2 section元素

4.3.4.3 nav元素

4.3.4.4 article元素

．...

我认为section比article更高级别。正如在这个答案 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

小开

我建议你阅读关于构建HTML5的W3 wiki页面:

<header>用于包含站点的头部内容。# EYZ1 包含站点的页脚内容。包含导航菜单，或页面的其他导航功能
<article>包含一个独立的内容片段，将使

.
.

<section>用于将不同的物品分成不同的
目的或主题，或定义一个单一的不同部分篇文章。< / p > 定义一个与main相关的内容块内容围绕着它，但不是它的中心。

它们包括我在这里清理的一个图像:

html5

在代码中，它看起来像这样:
<body>
<header></header>
<nav></nav>
<section id="sidebar"></section>
<section id="content"></section>
<aside></aside>
<footer></footer>
</body>
让我们更详细地探讨一些HTML5元素。

# EYZ0
<section>元素用于包含的不同区域功能性或主题区域，或分解一篇文章或故事分成不同的部分。在本例中:"sidebar1"包含各种有用的链接将持续存在于站点的每个页面上，例如 “订阅RSS”及“从商店购买音乐”。“main”包含本页主要内容为博客文章。在其他页网站上，此内容会有所改变。这是一个相当通用的元素，但是仍然比普通的<div>.
有更多的语义意义
# EYZ0

<article>与<section>相关，但有明显不同。而<section>用于对内容的不同部分进行分组功能，<article>用于包含相关的个人独立的内容，比如独立的博客文章、视频，图片或新闻。这样想，如果你有一些条目的内容，每一个条目都适合阅读拥有的，并且在RSS中作为单独的项目聚合是有意义的 feed，那么<article>适合标记它们。在我们的例如，<section id="main">包含博客条目。每个博客条目是否适合作为RSS提要中的一个项目进行联合，会吗当脱离上下文单独阅读时，是有意义的，因此<article>
<section id="main">
<article></article>
<article></article>
<article></article>
</section>
< p >简单啊?请注意，您也可以在其中嵌套部分文章，这样做是有意义的。例如，如果每一个这些博客文章有一个一致的结构，不同的部分，然后你也可以在文章中加入章节。它看起来就像这样:
<article>
<section id="introduction"></section>
<section id="content"></section>
<section id="summary"></section>
</article>
<header>和<footer>

正如我们上面已经提到的，<header>和 <footer>元素是包装页眉和页脚内容，分别。在我们的特定示例中，是<header>元素包含一个logo图像，<footer>元素包含一个版权注意，如果您愿意，可以添加更详细的内容。也请注意，每个页面上可以有多个页眉和页脚以及我们刚刚讨论的顶级页眉和页脚，您也可以有一个<header>和<footer>元素嵌套在每个 <article>，在这种情况下，它们只适用于那个特定的篇文章。添加到上面的例子:
<article>
<header></header>
<section id="introduction"></section>
<section id="content"></section>
<section id="summary"></section>
<footer></footer>
</article>
# EYZ0
<nav>元素用于标记导航链接或其他内容构造(如搜索表单)，将带您到不同的页面当前站点，或当前页面的不同区域。其他链接, 如赞助链接，不算数。你当然可以包括标题和其他结构元素在<nav>，但它是不是义务。< / p >
# EYZ0
你可能已经注意到我们使用了<aside>元素来标记第二个边栏:包含最新的演出和联系方式。这是完全合适的，因为<aside>是标记块与主流相关，但不符合主流的信息直接。这个案例的主要内容都是关于乐队的! <aside>的其他好的选择是关于博客文章、乐队传记或乐队唱片的作者

在哪里留下<div>?
所以，有了这些伟大的新元素在我们的页面上使用，日子不起眼的<div>肯定是有编号的吧?不。事实上，<div> 仍然有一个完全有效的用途。你应该在没有用于对内容区域进行分组的其他更合适的元素，当你纯粹使用一个元素进行分组时，通常会出现哪种情况内容放在一起用于样式/视觉目的。一个常见的例子是使用<div>来包装页面上的所有内容，然后使用 CSS来居中所有的内容在浏览器窗口，或应用一个具体的背景图像到整个内容。

小开

这是我工作的例子

enter image description here

小开

”第23行。这个div对吗?或者这一定是一个部分?”

都不是——有一个main标记用于此目的，它每页只允许使用一次，并且应该用作主要内容的包装器(与侧边栏或站点范围的标题相反)。

<main>
<!-- The main content -->
</main>

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

小开

不幸的是，到目前为止给出的答案(包括投票最多的)要么是“只是”常识，要么是完全错误的，要么是令人困惑的。无 ¹ pop up!

我写了3个答案:

这个解释(从这里开始)。

OP问题的具体答案

 改进的详细HTML

要理解这里讨论的html元素的作用，您必须知道其中一些元素是文档的一部分。每个html文档都可以是 section根据HTML5大纲算法，用于创建大纲-& #x2060;或⁠ -目录(TOC)。大纲通常是不可见的(现在)，但作者应该以这样一种方式使用html，从而使大纲反映他们的意图。

你可以用完全这些元素和没有其他的创建部分:

创建(显式)子节

# EYZ0部分

# EYZ0部分

# EYZ0部分

# EYZ0部分
李< / ul > < / >
创建兄弟节或子节

<h*>^{<一口> 2}的未指定类型的section(不是所有都这样做，见下文)
李< / ul > < / >
关闭当前显式(子)节

section可以命名为:

<h*>创建的section自己命名

<section|article|nav|aside>节将由第一个<h*>命名(如果有的话)

这些<h*>是唯一不创建自己的部分
李< / ul > < / >

关于分段还有一件事:以下上下文(即元素)创建了“轮廓边界”。它们包含的任何部分对它们来说都是私有的:

文档本身使用<body>

使用<td>表单元格

# EYZ0

<details>， <dialog>， <fieldset>和<figure>

# EYZ0其他

< p > < kbd > # EYZ1 < br > <代码> & lt; body> 如果你想要兄弟姐妹在顶层…</h3> & lt; h3>…你必须使用untyped <h*>…</h3> & lt; article> & lt; h1>…和其他部分一样将descent< / h1> & lt; / article> & lt; nav> & lt; ul> & lt; li> & lt; a href =…在…& lt; / a> & lt; / li> & lt; / ul> & lt; / nav> & lt; / body> > < /代码 # EYZ1 < br > <代码> 1。如果你想要兄弟姐妹在最高层…… 2 .……你必须使用untyped 带有<h*>… 2.1……和其他部分一样将会下降 2.2. (不愿透露姓名的导航)< /代码> < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < / kbd > < / p >
这就提出了两个问题:

<article>和<section>之间有什么区别?

<李>都可以:

相互嵌套

在不同的上下文中或嵌套级别使用不同的概念
李< / ul > < / > 0就像书中的章节

它们通常有兄弟姐妹(可能在不同的文档中?)

他们在一起有一些共同之处，就像书中的章节一样
李< / ul > < / >
一个作者，一个<article>，至少在最低层

标准示例:一条博客评论

博客条目本身也是一个很好的例子

博客条目<article>和它的评论<article>s也可以用<article>来包装

这是一些“完整”的东西，而不是一系列类似的部分
李< / ul > < / >
# eyz0在<article>中就像一本书中的章节

<section>中的# eyz0就像卷中的诗(在一个系列中)

<header>， <footer>和<main>如何适应?

他们有零的影响的切片

<header>和<footer>

它们允许你标记每一个部分的区域

即使在一个部分中，你也可以多次使用它们

以区别于主体部分在本节中

只受限于作者的品味
<李> # EYZ0

可以标出这部分的标题/名称吗

可能包含此部分的标志

没有必要在部分的顶部或上部
李< / ul > < / > <李> # EYZ0

请标出这一节的署名/作者

可以放在这部分的顶部吗

甚至可以在<header>
李< / ul > < / > 李< / ul > < / > <李> # EYZ0

只允许一次

标记顶级部分的主要部分(即文档，<body>)

子节本身的主要部分没有标记
<main>甚至可以“隐藏”在文档的一些子节中，而文档的<header>和<footer>不能(标记将标记该子节的页眉/页脚)

但在<article>部分^3.是不允许的
李< / ul > < / >
有助于区分“真正的东西”从文档的非页眉，非页脚，非主要内容，如果这在你的情况下有意义…
李< / ul > < / >

^{<一口> 1}想到的是:大纲，算法，隐式分段
我使用<h*>作为<h1>， <h2>， <h3>， <h4>， <h5>和<h6>
<aside>或<nav>中也不允许<main>，但这并不奇怪。-实际上:<main>只能隐藏在(嵌套的)下降的<section>部分或出现在顶层，即<body> < /一口> < / p >

小开

根据解释在我的“主要”答案中，有问题的文件应该根据大纲标记出来。

在以下两个表中，我展示了:

原始HTML及其大纲

一个可能的大纲和HTML来做这个

< p > < kbd > # EYZ0 < br > _{<代码> & lt; body>
& lt; section>
& lt; header>
& lt; div id = logo> & lt; / div>
& lt; div id = language> & lt; / div>
& lt; / header>
& lt; nav>
.．.
& lt; / nav>
& lt; div id = main>
& lt; div id = main-left>
& lt; article>
& lt; header>
h1>真实的东西</h1>
& lt; / header>
& lt; / article>
& lt; / div>
& lt; div id = main-right>
& lt; id = main-right-hot>节;
& lt; h2>热items< / h2>
& lt; / section>
& lt; id = main-right-new>节;
& lt; h2>新items< / h2>
& lt; / section>
& lt; / div>
& lt; / div>
& lt; div id = news-items>
& lt; header>
<h2>最新消息<
& lt; / header>
& lt; div id = item_1>
& lt; article>
& lt; header>
& lt; h3>……& lt; / h3>
& lt; / header>
& lt; a>阅读more< / a>
& lt; / article>
& lt; / div>
& lt; div id = item_2>
& lt; article>
& lt; header>
& lt; h3>……& lt; / h3>
& lt; / header>
& lt; a>阅读more< / a>
& lt; / article>
& lt; / div>
& lt; div id = item_3>
& lt; article>
& lt; header>
& lt; h3>……& lt; / h3>
& lt; / header>
& lt; a>阅读more< / a>
& lt; / article>
& lt; / div>
& lt; / div>
& lt; footer>
& lt; ul> & lt; li>……& lt; / ul>
& lt; / footer>
代码& lt; / section> < / > < /子>
< br > < br >

# EYZ0 < br >
_{<代码> & lt; body>
& lt; section>
//标识和语言
& lt; nav>
.．.
& lt; / nav>
& lt; article>
h1>真实的东西</h1>
& lt; / article>
& lt; section>
& lt; h2>热items< / h2>
& lt; / section>
& lt; section>
& lt; h2>新items< / h2>
& lt; / section>
<h2>最新消息<
& lt; article>
& lt; h3>……& lt; / h3>
& lt; / article>
& lt; article>
& lt; h3>……& lt; / h3>
& lt; / article>
& lt; article>
& lt; h3>……& lt; / h3>
& lt; / article>
//页脚链接
代码& lt; / section> < / > < /子>
< br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br >

# EYZ0 < br >
<代码> 1。(无标题的文档)
1.1. (无标题的部分)
1.1.1. (untitled导航)
1.1.2. 真实的事物(h1)
1.1.3. 热门单品(h2)
1.1.4. 新增项目(h2)
1.1.5. 最新消息(h2)
1.1.6. 新闻item_1 (h3)
1.1.7. 新闻条目2 (h3)
1.1.8. 新闻item_3 (h3)
< br > < br > < br >
原版的大纲是

< br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br >

< / kbd > < / p >

< p > < br >
下表显示了我对改进版本的建议。我使用以下标记:

# EYZ0
# EYZ0
# EYZ0

< p > < kbd >
# EYZ0 < br >
<代码> 1。(主要)
1.1. 真正的东西
1.2. (hot&新)
1.2.1. 热门单品
1.2.2. 新项目
2. 最新消息
2.1. 新闻item_1
2.2. 新闻item_2
2.3. 新闻item_3 > < /代码
< br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br >

# EYZ0 < br >
_{<代码> & lt; body>
> < /代码# EYZ1 <代码>
& lt; header>
& lt; ASIDE>
& lt; div id = logo> & lt; / div>
& lt; div id = language> & lt; / div>
& lt; / ASIDE>
& lt; / header>
& lt; nav>
.．.
& lt; / nav>
& lt; id = main>条;
> < /代码# EYZ1 <代码>
& lt; ID = main-left>条;
& lt; header>
h1>真实的东西</h1>
& lt; / header>
& lt; / article>
> < /代码# EYZ1 <代码>
& lt; id = main-right>条;
& lt; id = main-right-hot>条;
& lt; h2>热items< / h2>
& lt; / ARTICLE>
& lt; id = main-right-new>条;
& lt; h2>新items< / h2>
& lt; / ARTICLE>
& lt; / ARTICLE>
& lt; / ARTICE>
& lt; id = news-items>条;
& lt; header>
<h2>最新消息<
& lt; / header>
> < /代码# EYZ1 <代码>
& lt; ID = item_1>条;
& lt; header>
& lt; h3>……& lt; / h3>
& lt; / header>
& lt; a>阅读more< / a>
& lt; / article>
> < /代码# EYZ1 <代码>
> < /代码# EYZ1 <代码>
& lt; ID = item_2>条;
& lt; header>
& lt; h3>……& lt; / h3>
& lt; / header>
& lt; a>阅读more< / a>
& lt; / article>
> < /代码# EYZ1 <代码>
> < /代码# EYZ1 <代码>
& lt; ID = item_3>条;
& lt; header>
& lt; h3>……& lt; / h3>
& lt; / header>
& lt; a>阅读more< / a>
& lt; / article>
> < /代码# EYZ1 <代码>
& lt; / ARTICLE>
& lt; footer>
& lt; NAV>
& lt; ul> & lt; li>……& lt; / ul>
& lt; / NAV>
& lt; / footer>
> < /代码# EYZ1‘子> < /
< br > < br >

# EYZ0 < br >
<代码> 1。(无标题的文档)
1.1. (未命名标志和郎)
1.2. (untitled导航)
1.3. (无标题的主要)
1.3.1实物
1.3.2. (untitled hot&新)
1.3.2.1. 热门单品
1.3.2.2. 新项目
1.4. 最新消息
1.4.1. 新闻item_1
1.4.2. 新闻item_2
1.4.3. 新闻item_3
1.5. (untitled footer nav)
< br > < br > < br >
修改后的HTML反映了

计划大纲比
更好
原件。< / em > < / >强
< br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br >

< / kbd > < / p >}}}

小开

(# EYZ0)

第7行。section围绕整个网站?或者只有div?

既不。样式:使用<body>，它已经在那里了。对于section /semantics: 如我的示例HTML中所详细说明的，它的效果与有用性相反。对已经包装的内容使用额外的包装器并没有改善，只会产生噪音。
< p > < br > 8号线。每个部分都以标题开始?< / >强

不，在哪里放置通常被总结为“标题”的内容是作者的选择。如果标题内容不需要额外标记就可以清楚地识别，那么即使没有<header>，它也可以完全保持不变。这也是作者的选择。
< p > < br > 第23行。这个div对吗?还是必须是部分?< / >强

<div>可能是错误的。这取决于你的意图:是否只是为了设计样式，它可能是正确的。如果是出于语义目的，那就错了:它应该是<article>而不是正如我的另一个答案所示。<article>也是正确的，如果它同时用于样式化和分段。

<section>在这里看起来是错误的，因为在这个之前或之后没有类似的部分，就像一本书中的章节一样。(这就是<section>的目的)。
< p > < br > 第24行。用div分隔左右列。

不。为什么?
< p > < br > 行25。文章标签的正确位置?< / >强

是的，有道理。
< p > < br > 第26行。是否需要将h1-tag放到头-tag中?< / >强

不。单独的<h*>元素可能永远不需要放在<header>中(但如果你想的话，它可以)，因为它已经很明显是即将到来的内容的标题。-如果<header>也包含一个标语(标记为<p>)，这是有意义的，例如。
< p > < br > 行43。内容与主要文章无关，所以我决定这是部分而不是一边.

<aside>必须与周围的内容“切向相关的”，这是一种误解。关键是:如果内容只是“与无意中相关”，或者根本没有，请使用<aside> !

尽管如此，除了<aside>是一个不错的选择之外，<article>可能仍然比<section>更好，因为“热门项目”和“新项目”并不像一本书中的两个章节那样被阅读。你完全可以选择其中一个，而不是另一个就像对一个东西的另一种排序，而不是一个整体的两个部分。
< p > < br > 行44。H2没有头

是伟大的。
< p > < br > 线53。部分没有头

好吧，没有<header>，但是<h2>-heading很清楚地显示了这个部分中的哪个部分是头文件。
< p > < br > 第63行。Div与所有(不相关)新闻项目

<article>或<aside>可能更好。
< p > < br > 第64行。头与h2

讨论了。
< p > < br > 第65行。嗯，div还是部分?或者删除这个div，只使用# eyz3 -标签

完全正确!删除<div>。
< p > < br > 第105行。# EYZ0: -) < / >强

很合理。

小开

让我们以Facebook留言板为例

The Wall被归为“section”;标记，表示它与页面是分开的。

所有的帖子都在“文章”下面;标签。

然后我们有一个单独的帖子，它在“;章节”下;标签。

我们有标题“X用户张贴这个”。为此，我们可以使用“;标题”;标签。

然后在post中我们有三个部分。一个是图片/文本，喜欢-分享-评论按钮和评论框。

对于评论框，我们可以使用article标签。

小开

根据内森的回答，这非常有意义(对于红色和橙色部分，也许你可以分别使用div的和/或 header和footer):

小开

<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>

参考:# EYZ0