3.9　创建文章

3.9　创建文章

HTML5的另一个新元素便是article，参见图3.9.1。你已经见过一些用到该元素的示例。现在，让我们深入了解一下它的作用。

根据其名称，你大概会猜想article用于包含像报纸文章一样的内容。不过，article并不局限于此。在HTML5中，“文章”（article）更接近于“项目”（item）。

HTML5对该元素的定义如下。

article元素表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，即聚合。它可以是一篇论坛帖子，一篇杂志或报纸文章，一篇博客文章，一则用户提交的评论，一个交互式的小部件或小工具，或者任何其他独立的内容项。

其他article的例子包括电影或音乐评论、案例研究、产品描述，等等。你或许惊讶于它还可以是交互式的小部件或小工具，不过这些确实是独立的、可再分配的内容项。

...
<body>
<header>
     <nav role="navigation">
        ... [包含链接的ul] ...
     </nav>
</header>
<article>
    <h1 id="gaudi">Barcelona's Architect</h1>
 
    <p>Antoni Gaudí's incredible buildings bring millions of tourists to Barcelona each year.</p>
 
    <p>Gaudí's non-conformity, already visible in his teenage years, coupled with his quiet but firm devotion to the church, made a unique foundation for his thoughts and ideas. His search for simplicity, based on his careful observations of nature, are quite apparent in his work, from the <a href="#park-guell">Park Guell</a> and its incredible sculptures and mosaics, to the Church of the <a href= "#sagrada-familia">Sacred Family</a> and its organic, bulbous towers.</p>
 
    <h2 id="sagrada-familia" lang="es">La Sagrada Família</h2>
 
    ... [图像和段落] ...
 
    <h2 id="park-guell">Park Guell</h2>
 
    ... [图像和段落] ...
</article>
 
</body>
</html>

图3.9.1　为了精简，我对文章内容进行了缩写，略去了与上一节相同的nav代码。可以在本书网站查看完整的代码（www.bruceontheloose.com/htmlcss/examples/）。在这个例子里只有段落和图像，不过article可以包含各种类型的内容，如视频、图形、列表等。这段代码生成的页面如图3.9.2所示

3.9　创建文章 - 图1

图3.9.2　现在，页面有了header、nav和article元素，以及它们各自的内容。在不同的浏览器中，article中标题的字号可能不同。可以通过CSS使它们在不同的浏览器中显示相同的大小（参见第10章）

创建文章的步骤

输入
。
输入文章的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。
输入。

提示　正如你在3.4节中学到的，article是四个分块内容元素中的一个，另外三个是nav、section和aside。

提示　可以将article嵌套在另一个article里面，只要里面的article与外面的article是部分与整体的关系。不过，不能将article嵌套在address元素里面。

提示　一个页面可以有多个article元素（也可以没有）。例如，博客的主页通常包括几篇最新的文章，其中每一篇都是其自身的article。

提示　一个article里包含一个或多个section元素并不是强制性的。让article里的h1～h6独自存在也是很好的，不过定义section则会让文章的语义更明显。每个section都可以有自己的标题层级关系（参见3.4节）。

提示　article和section元素很容易相互混淆，这也是我直接引用HTML5有关定义的原因。我不希望你将它们的意思理解偏。我会在3.10节中讨论section以及如何在这两个元素之间作出选择。

提示　要了解在哪种情况下可对article使用role="main"，参见3.14节。在图3.9.1中的article放入这段代码是合理的，因为该元素是页面主要内容的容器，不过我有意略去了，以避免给读者留下所有article元素都需要role="main"的印象。

更多article示例

图3.9.1中的示例只是使用article的一种方式，下面看看其他的用法。

例1（基本文章）
<article>
 <h1>The Diversity of Papua New Guinea</h1>
 <p>Papua New Guinea is home to more than 800 tribes and languages …</p>
 … [故事内容的其余部分] …
 
 <footer> <!— article的页脚，而非页面的页脚 —>
   <p>Leandra Allen is a freelance journalist who earned her degree in anthropology from the University of Copenhagen.</p>
   <address>
   You may reach her at <a href="mailto:leandra@therunningwriter.com"> leandra@therunningwriter.com</a>.
   </address>
 </footer>
</article>
注意footer和address元素的使用（对它们的讨论分别参见本章和第4章）。这里，address只应用于其父元素article，而非整个页面或任何包含在那个article里面的article（如例2中的读者评论）。

例2展示了嵌套在article父元素里面的article元素。该例中嵌套的article是用户提交的评论，就像你在博客或新闻站上见到的评论部分。该例还显示了section元素（参见3.10节）和time元素（在第4章讨论）的用法。

例2（嵌套文章）
<article>
   <h1>The Diversity of Papua New Guinea</h1>
   … [父元素文章内容] …
 
   <footer>
      … [父元素文章页脚] …
   </footer>
 
   <section>
      <h2>Reader Comments</h2>
      <article>
        <footer>travelgal wrote on <time datetime="2011-11-17" pubdate>November 17, 2011</time>:</footer>
        <p>Great article! I’ve always been curious about Papua New Guinea.</p>
      </article>
      <article>
        … [下一篇读者评论] …
      </article>
   </section>
</article>
这些只是使用article及有关元素的几个常见方式。

3.9 创建文章

3.9 创建文章

3.9　创建文章

3.9　创建文章