主要内容的 HTML5 语义文章标签答案

【问题标题】：HTML5 semantics article tag for main content主要内容的 HTML5 语义文章标签
【发布时间】：2011-04-05 20:06:11
【问题描述】：

语义：你想让它们正确，但有时它们只是令人困惑。

网站文档结构：

<body>
    <header>
    <div id="main">
        <header> (not on every page)
        <div id="content">
        <footer> (not on every page)
    <aside>
    <footer>

将 div#main 替换为 article 标签在语义上是否正确？

【问题讨论】：

标签： html semantics article

【解决方案1】：

为了在这个问题上举起死胡同，目前接受的答案很快就会不正确。有一个 <main> 元素的扩展草案，它的目标正是您需要的。此外，它在浏览器中自动处理 ARIA role="main" 以获得更好的可访问性。请查看此链接了解更多信息：https://dvcs.w3.org/hg/html-extensions/raw-file/tip/maincontent/index.html

本规范是 HTML5 规范 [HTML5] 的扩展。它定义了一个用于识别的元素文档的主要内容区域。中的所有规范内容 HTML5 规范，除非被此明确覆盖规范，旨在作为本规范的基础。

主要元素形式化识别的常见做法使用 id 值的文档的主要内容部分，例如 “内容”和“主要”。它还定义了一个 HTML 元素，它体现了 WAI-ARIA [ARIA] 地标 role=main 的语义和功能。

<main>

  <h1>Apples</h1>
 <p>The apple is the pomaceous fruit of the apple tree.</p>

 <article>
 <h2>Red Delicious</h2>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
  <p>... </p>
  <p>... </p>
  </article>

  <article>
  <h2>Granny Smith</h2>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
  <p>... </p>
  <p>... </p>
  </article>

</main>

【讨论】：

文章中有一条注释说main标签符合HTML5.1规范。期待更广泛的支持

【解决方案2】：

根据http://html5doctor.com/the-article-element/，这是一种有效的语义编码方式。它被称为“博客风格的<article>”。

根据您的结构，您也可以将#content 替换为文章。

不要忘记包含http://code.google.com/p/html5shiv/，如果您通过 https 为您的网站提供服务，请同时查看 Protocol Relative Url（Google for it），这样您就没有检测http和https之间的切换。

【讨论】：

谢谢！ HTML5 Shiv 已包含在内。需要明确的是，当文章元素的内容本身有意义时，它的使用在语义上是正确的？
根据 HTML5doctor：“
元素是一种特殊的
；它比
具有更具体的语义含义，因为它是一个独立的、自包含的块相关的内容。我们可以使用
，但使用
会给内容更多的语义。 - 所以我会说是的！ :)

【解决方案3】：

我认为用<section> 标签替换它会更合适。 <article> 标签适用于博客帖子、论坛帖子或报纸文章等内容（因此是标签的名称）。

相比之下，<section> 标签适用于文档中更通用的内容部分，因此更适合这种情况。

这都是much better explained by Mark Pilgrim DiveIntoHTML5.ep.io

【讨论】：

文章元素可以很容易地独立存在，但是栏目元素不是最好搭配其他栏目元素吗？
也许，但据我了解您的结构，您还有另一个带有 id 内容的div，所以我想这就是<article> 标签更适合的地方，并且对于包含元素a @987654328 @ 更合适。
article 中的 section 可能不是您想要的，它会创建错误的轮廓。在这里只使用article 就可以了。它不限于用在可以用“文章”一词描述的内容中。不得以这种方式阅读/理解元素名称。
<article> 元素定义了一个可以独立的区域，<section> 元素定义了一个主题休息区。