【问题标题】:HTML5 - Correct usage of the <article> tagHTML5 - <article> 标签的正确使用
【发布时间】:2011-08-04 23:30:45
【问题描述】:

阅读HTML5上&lt;article&gt;标签上的an article,我真的认为我最大的困惑在于本节的第一个问题:

使用&lt;article&gt; 为内容赋予更多语义意义。相比之下,&lt;section&gt; 只是一个相关内容块,&lt;div&gt; 只是一个内容块……要决定这三个元素中的哪一个是合适的,请选择第一个合适的选项:

  1. 内容本身在提要阅读器中是否有意义?如果是这样,请使用&lt;article&gt;
  2. 内容是否相关?如果是这样,请使用&lt;section&gt;
  3. 最后,如果没有语义关系,使用&lt;div&gt;

所以我想我的问题是:什么类型的内容属于提要阅读器?

【问题讨论】:

    标签: html rss semantics


    【解决方案1】:

    规范非常清楚地回答了这个问题:

    article 元素表示一个独立的组合 文档、页面、应用程序或站点,即原则上, 可独立分发或可重复使用,例如在辛迪加。这个 可以是论坛帖子、杂志或报纸文章、博客条目、 用户提交的评论、交互式小部件或小工具,或任何 其他独立的内容。

    见:http://dev.w3.org/html5/spec/Overview.html#the-article-element

    【讨论】:

    • 即您认为页面上的独立内容项
    • 问题出在“独立”这个词上。例如,用户是否可以对仅说“是的,我也是”的博客文章发表评论。被认为是独立的?我相信它可以,并且使用 article 元素是合适的,但不难看出其他人如何得出它不独立的结论。
    • 同意。我认为像这些微妙的标记决策是您作为开发人员必须根据具体情况做出的选择。人们对标准的解释总是会有不同的,你应该根据你对标准的理解,选择你认为最好的。
    【解决方案2】:

    W3C 规范有很多解释的余地​​,最终归结为作者的意见。以下是一个简短的问题形式的答案:

    您想在页面上分享哪些主要的重要内容?

    这里有几个例子:

    • 在这个页面上,每个答案都可以是一篇文章。
    • 在 flickr 照片流中显示的每张照片都可以视为一篇文章。
    • 在 dribbble 上页面上显示的每个镜头都可以是一篇文章。
    • 在 google 上列出的每个搜索结果都可能是一篇文章。
    • 在博客上的每篇文章......好吧,每篇文章都可以是一篇文章。
    • 在包含一篇文章和一系列 cmets 的博客页面上,您可以有两个主要部分。一个是一篇文章,另一个是 cmets,其中每条评论都可以被视为一篇文章。

    作者可以自行决定他们想走多远。大多数博客作者都有文章的 RSS 提要,但其他人也可能提供 cmets 提要和共享链接。

    很多人都写过这个主题。有关更多信息,我强烈建议您阅读:

    【讨论】:

      【解决方案3】:

      您提出了一个很好的论点,是的,规范确实将&lt;article&gt; 明确定义为值得联合的内容集合。在我看来,您的文章将是撰写的博客文章——您作为网站的内容作者所产生的内容。虽然该部分的 cmets 与文章相关,但它们实际上不是文章的一部分,应该归入 &lt;section&gt; 中的另一个块,或者是非语义的 &lt;div&gt; 或只是 &lt;p&gt;s与display:block 设置。这是留给设计师的决定,取决于他们如何在语义上评估评论的价值。

      还要记住,您有&lt;aside&gt; 标签,它几乎是为评论量身定制的,无论是来自作者还是来自读者。

      【讨论】:

        【解决方案4】:

        大多数 Feed 阅读器可以处理多种类型的内容,可能包括副本、图片、视频等。您的 Feed 将包含您网站上重复或包含多个版本的内容。问答网站将提供新问题的提要。视频共享站点将提供新视频的提要。软件评论网站将提供新软件或新评论的提要。

        我建议您考虑一下您的内容的典型消费者希望在他们的提要阅读器中轻松找到什么。您可以定义 Feed 阅读器中属于哪些类型的内容。

        【讨论】:

          【解决方案5】:

          Feed 阅读器通常应该包含一个故事列表。看看http://google.com/elections/ - 这是一个提要阅读器可能包含的东西的一个很好的例子。重要的是所有的故事都是自成一体的,理论上完全不需要关联。

          【讨论】:

            【解决方案6】:

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

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

            您可以在this article on A List Apart 中找到更多信息。

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2014-06-01
              • 2011-07-07
              • 2011-11-03
              • 1970-01-01
              • 1970-01-01
              • 2011-06-13
              相关资源
              最近更新 更多