HTML5主要元素的用途

我最近一直在研究HTML语义，我想知道

的真正目的是什么。我创建了两个场景，如下所示：

场景一

     <main role="main">
        <header role="banner">
           <hgroup>
              <h1>Header 1</h1>
              <h2>Header 2</h2>
           </hgroup>

           <nav>
              <ul>
                 <li><a href="#">Link 1</a></li>
                 <li><a href="#">Link 2</a></li>
                 <li><a href="#">Link 3</a></li>
              </ul>
           </nav>
        </header>

        <section role="region">
           <header>
              <h1>Articles</h1>
           </header>

           <article>
              <header>
                 <h1>Article name</h1>
              </header>

              <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

              <footer>
                 <a href="#" title="Read more">Read this post</a>
              </footer>
           </article>

           <footer>
              <a href="#" title="Read more">Read this articles</a>
           </footer>
        </section>

        <footer role="contentinfo">
           <p>Page last updated <time datetime="2009-11-04">November 4th, 2009</time></p>
           <address>
              <a title="Posts by Just A Name" href="#">Just A Name</a>
           </address>
        </footer>
     </main>

标题1
标题2





文章
最后更新页面2009年11月4日

场景二

     <header role="banner">
        <hgroup>
           <h1>Header 1</h1>
           <h2>Header 2</h2>
        </hgroup>

        <nav>
           <ul>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
           </ul>
        </nav>
     </header>

     <main role="main">
        <section role="region">
           <header>
              <h1>Articles</h1>
           </header>

           <article>
              <header>
                 <h1>Article name</h1>
              </header>

              <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

              <footer>
                 <a href="#" title="Read more">Read this post</a>
              </footer>
           </article>

           <footer>
              <a href="#" title="Read more">Read this articles</a>
           </footer>
        </section>
     </main>

     <footer role="contentinfo">
        <p>Page last updated <time datetime="2009-11-04">November 4th, 2009</time></p>
        <address>
           <a title="Posts by Just A Name" href="#">Just A Name</a>
        </address>
     </footer>

标题1
标题2





文章
最后更新页面2009年11月4日

哪一个是最好的解决方案以及原因？

元素用于指示页面的主要（主要）内容。如果

role=“banner”

对内容有重要意义，则应选择场景一，否则选择场景二

-用途非常好

引入这些元素（

，

，

，

，

，

，

）的第一个也是最重要的原因是为了表明对文档大纲的重要性

如果要编译分类的章节索引，您需要查看

中的标题元素，并省略

和

部分。这也是html5允许多个

元素的原因，因为它们的重要性是根据它们所在的元素来确定的（与HTML<5相反，在HTML<5中，标题元素本身会指示文档中的重要性）。

根据，

main

应仅用于该文档特有的内容，因此在您的情况下，场景2是最合适的

main

元素表示 文件或申请。

main

内容部分由内容组成 与某一主题直接相关或扩展到该主题的 应用程序的文档或中心功能

注意：

main

元素不是剖切内容，对 文件大纲

文档的

main

content部分包含唯一的内容 并排除在一组文档中重复的内容 网站导航链接、版权信息、网站 徽标、横幅和搜索表格（除非文件或 应用程序

main

功能是搜索表单的功能）

作者不得在文档中包含一个以上的主元素

作者不得将

主
元素作为
文章的子元素，
旁边
，
页脚
，
页眉
或
导航
元素

除了已经回答的问题外，还有一个重要的问题：

对文档的大纲没有帮助；也就是说，不同于
元素，如
，标题，如
，以及

不影响DOM对页面结构的概念。它是
信息量大