HTML5部分标签含义?

Fez*_*sta 15 html5

我知道有很多关于这个主题的问题,但我找不到答案的权威来源.

这是官方定义维基页面,并且有更多文档,但如果不是在一个非常简单的示例中或以不同的方式,它们没有解释正确的用法.

到目前为止,我"理解"了什么:

<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>
Run Code Online (Sandbox Code Playgroud)

这就是大纲的看法:

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:
Run Code Online (Sandbox Code Playgroud)

因此,<section>人们认为它具有两种完全不同且不相关的语义含义?

它是否正确使用:

<!-- MY DOUBT -->
<section> <!-- USED AS CONTAINER -->
  <article>
    <section></section> <!-- USED AS CHAPTER -->
  </article>
</section>
Run Code Online (Sandbox Code Playgroud)

以这种方式?
我发现可以反向使用:

<!-- FROM W3C -->
<article> <!-- BLOG ENTRY -->
  <section> <!-- USED AS CHAPTER ABOUT COMMENTS -->
    <article></article> <!-- COMMENT -->
  </section>
</article>
Run Code Online (Sandbox Code Playgroud)

但我无法找到我在下面写的方式的答案.

我想阅读W3C小组编写的讨论<section>标签的基础可能有用,但我找不到它.

NB我正在寻找使用授权来源记录的回复

uno*_*nor 4

http://www.w3.org/wiki/HTML/Elements/section不是官方定义section在 HTML5 规范中定义section,目前是候选推荐(它是Editor\xe2\x80\x99s Draft的快照)。

\n\n

在CR中,section定义

\n\n
\n

section元素表示文档或应用程序的通用部分。在这种情况下,部分是内容的主题分组,通常带有标题。

\n
\n\n

section是一个分段内容元素(与articleaside和一起nav)。这些分段元素和标题 ( h1- h6) 创建一个轮廓

\n\n

以下三个示例在语义上是等效的(相同的含义,相同的轮廓):

\n\n
<!-- example 1: using headings only -->\n<h1>My first day</h1>\n<p>\xe2\x80\xa6</p>\n<h2>Waking up</h2>\n<p>\xe2\x80\xa6</p>\n<h2>The big moment!</h2>\n<p>\xe2\x80\xa6</p>\n<h2>Going to bed</h2>\n<p>\xe2\x80\xa6</p>\n\n<!-- example 1: using section elements with corresponding heading levels -->\n<section>\n  <h1>My first day</h1>\n  <p>\xe2\x80\xa6</p>\n  <section>\n    <h2>Waking up</h2>\n    <p>\xe2\x80\xa6</p>\n  </section>\n  <section>\n    <h2>The big moment!</h2>\n    <p>\xe2\x80\xa6</p>\n  </section>\n  <section>\n    <h2>Going to bed</h2>\n    <p>\xe2\x80\xa6</p>\n  </section>\n</section>\n\n<!-- example 1: using section elements with h1 everywhere -->\n<section>\n  <h1>My first day</h1>\n  <p>\xe2\x80\xa6</p>\n  <section>\n    <h1>Waking up</h1>\n    <p>\xe2\x80\xa6</p>\n  </section>\n  <section>\n    <h1>The big moment!</h1>\n    <p>\xe2\x80\xa6</p>\n  </section>\n  <section>\n    <h1>Going to bed</h1>\n    <p>\xe2\x80\xa6</p>\n  </section>\n</section>\n
Run Code Online (Sandbox Code Playgroud)\n\n

section 所以只要 (*)使用h1-就可以使用h6。当您section需要在大纲中使用单独的条目但可以\xe2\x80\x99t(或不想\xe2\x80\x99t)使用标题时,可以使用该标题。

\n\n

另请注意,headerfooter始终属于其最近的祖先分段内容(或分段根,如body,如果没有分段元素)元素。换句话说:section///每个元素article都可以有自己的/asidenavheaderfooter

\n\n

articleaside可以nav说是该元素的更具体的section变体。

\n\n
\n\n
\n

两个完全不同的用例

\n
\n\n

这两个用例根本没有什么不同。在“容器”的情况下,您可以说section代表文档的一章,而在“章节”的情况下section代表文章/内容的一章(当然,它是文档的一部分)。

\n\n

同样,有些标题用于给网页部分加标题(如“导航”、“用户菜单”、“评论”等),有些标题用于给内容加标题(“我的第一天”、“我的第一天”、“我的第一天”)。最喜欢的书”等)。

\n