我知道有很多关于这个话题的问题,但我找不到一个权威的答案来源。
这是official definitionwiki page,这里有more documentation,但是如果不是以非常简单的例子或不同的方式,它们就不能解释正确的用法。
到目前为止我“理解”的是:
<section>定义页面的一部分(部分),如blogrolls、标题新闻、博客条目列表、评论列表以及所有可以与公共主题一起使用的内容。
<article>定义一个与页面其他部分分离的内容(?)它只有一个主题(博客条目、评论、文章等)。
但是,在<article>中,我们可以使用<section>将其部分拆分为多个部分,在这种情况下,它具有容器功能来标记较大文本的章节。
怀疑
如果这些句子正确(或部分正确),这意味着<section>有两种完全不同的用法。
我们可以这样写一个页面:

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset=utf-8>
        <title>Fruits</title>
    </head>

    <body>

        <h1>Fruits war blog</h1>

        <section id="headlineNews"> <!-- USED AS CONTAINER -->

            <h1>What's new about fruits?</h1>
            <article><h1>Apples are the best</h1>Apples are better than bananas</article>
            <article><h1>Apple's cakes</h1>With apples you can prepare a cake</article>

        </section>

        <section id="blogEntries"> <!-- USED AS CONTAINER -->

            <h1>Articles about fruits</h1>

            <article>
                <h1>Apples vs Bananas</h1>
                <section>  <!-- USED AS CHAPTER -->
                    <h2>Introduction:</h2>
                    Bananas have always leaded the world but...
                </section>
                <section>  <!-- USED AS CHAPTER -->
                    <h2>The question:</h2>
                    Who is the best? We don't know so much about apples...
                </section>
            </article>

        </section>

    </body>
</html>

这就是轮廓的样子:
1. Fruits war blog
   1. What's new about fruits?
      1. Apples are the best
      2. Apple's cakes
   2. Articles about fruits
      1. Apples vs Bananas
         1. Introduction:
         2. The question:

那么,<section>被认为有两个完全不同且不相关的语义意义?
是否正确使用:
<!-- MY DOUBT -->
<section> <!-- USED AS CONTAINER -->
  <article>
    <section></section> <!-- USED AS CHAPTER -->
  </article>
</section>

用这种整洁的方式?
我发现is possible以相反的方式使用:
<!-- FROM W3C -->
<article> <!-- BLOG ENTRY -->
  <section> <!-- USED AS CHAPTER ABOUT COMMENTS -->
    <article></article> <!-- COMMENT -->
  </section>
</article>

但是我找不到我在下面写的方式的答案。
我想读一下W3C小组编写的关于<section>标记基础的讨论是有用的,但我找不到它。
注意:我在找有作者资料的回复。

最佳答案

http://www.w3.org/wiki/HTML/Elements/section不是section的官方定义。sectionisdefined in the HTML5 specification,它当前是候选建议(它是Editor’s Draft的快照)。
在CR中,sectionisdefinedas:
section元素表示文档或应用程序的一般部分。在本文中,节是一个主题性的内容分组,通常带有标题。
section是一个sectioning content元素(与articleasidenav一起)。这些分段元素和标题(h1-h6)创建了一个outline
以下三个例子在语义上是等价的(意思相同,轮廓相同):

<!-- example 1: using headings only -->
<h1>My first day</h1>
<p>…</p>
<h2>Waking up</h2>
<p>…</p>
<h2>The big moment!</h2>
<p>…</p>
<h2>Going to bed</h2>
<p>…</p>

<!-- example 1: using section elements with corresponding heading levels -->
<section>
  <h1>My first day</h1>
  <p>…</p>
  <section>
    <h2>Waking up</h2>
    <p>…</p>
  </section>
  <section>
    <h2>The big moment!</h2>
    <p>…</p>
  </section>
  <section>
    <h2>Going to bed</h2>
    <p>…</p>
  </section>
</section>

<!-- example 1: using section elements with h1 everywhere -->
<section>
  <h1>My first day</h1>
  <p>…</p>
  <section>
    <h1>Waking up</h1>
    <p>…</p>
  </section>
  <section>
    <h1>The big moment!</h1>
    <p>…</p>
  </section>
  <section>
    <h1>Going to bed</h1>
    <p>…</p>
  </section>
</section>

因此,您可以使用sectionwhenever (*)您使用h1-h6。当您需要大纲中的单独条目但不能(或不想)使用标题时,可以使用section
还要注意,headerfooter始终属于其最近的祖先剖分内容(或剖分根,如body,如果没有剖分元素)元素。换句话说:每个元素都可以有自己的元素。
因此,可以说,sectionarticleaside元素的更具体的变体。
两个完全不同的使用案例
这两个用例根本没有什么不同。在“容器”案例中,您可以说nav代表文档的一章,而在“章节”案例中header代表文章/内容的一章(当然,这是文档的一部分)。
同样,一些标题也用于为网页部件命名(如“导航”、“用户菜单”、“注释”等),而一些标题则用于为内容命名(“我的第一天”、“我最喜欢的书”等)。

关于html5 - HTML5部分标签含义?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18741090/

10-13 02:38