HTML5 主要元素的用途答案

【问题标题】：Purpose of the HTML5 main elementHTML5 主要元素的用途
【发布时间】：2016-02-19 11:53:19
【问题描述】：

我最近一直在研究 HTML 语义，我想知道 <main> 的真正目的是什么。我创建了如下所示的两个场景：

场景一

     <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>

场景二

     <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>

哪一个是最好的解决方案？为什么？

【问题讨论】：

标签： html semantic-markup

【解决方案1】：

根据W3C，main 应仅用于该文档独有的内容，因此在您的情况下，方案 #2 是最合适的。

main 元素代表body 的主要内容部分文件或申请。 main 内容部分由内容组成直接相关或扩展的中心主题应用程序的文档或中心功能。

注意：main 元素不分割内容，对文件大纲

文档的main 内容部分包含唯一的内容到该文档并排除在一组重复的内容网站导航链接、版权信息、网站等文档标志和横幅以及搜索表格（除非文件或 applications main 功能是搜索表单的功能。

作者不得在文档中包含多个 main 元素。

作者不得包含 main 元素作为 article 的子元素， aside、footer、header 或 nav 元素。

【讨论】：

【解决方案2】：

<main>-元素用于指示页面的主要（主要）内容。如果role="banner" 对内容有重要意义，您应该选择场景一，否则选择两种。

This describes/explains<main>-用途还不错。

引入这些元素（<main>、<header>、<footer>、<section>、<article>、<nav>、<aside>）的首要原因是表明对文档大纲的重要性.

如果您要编译各种章节索引，您会希望查看 <main> 中的标题元素并忽略 <nav> 和 <aside> 部分。这也是 html5 允许多个 <h1> 元素的原因，因为它们的重要性是根据它们所在的元素确定的（与 HTML

【讨论】：

【解决方案3】：

除了已经回答的内容之外，here 的重要一点是：

<main> 不参与文档的大纲；也就是说，不像 <body> 等元素，<h2> 等标题，<main> 不影响 DOM 的页面结构概念。它是内容丰富。

【讨论】：