HTML5 主要元素的用途 [英] Purpose of the HTML5 main element

问题描述

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

的真正目的是什么.我创建了如下所示的两个场景:

I've been looking into HTML semantics lately and I was wondering what the real purpose of <main> is. I've created two scenarios shown below:

场景一

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

哪个是最好的解决方案，为什么?

Which one would be the best solution and why?

推荐答案

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

According to W3C, main should be used only for content that is unique to that document, so in your case the scenario #2 is the most appropriate.

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

The main element represents the main content section of the body of a document or application. The main content section consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

注意:main 元素不是对内容进行分段，对文档大纲

Note: the main element is not sectioning content and has no effect on the document outline

文档的 main 内容部分包含唯一的内容到该文档并排除在一组文件中重复的内容诸如站点导航链接、版权信息、站点徽标和横幅以及搜索表单(除非文档或应用程序 main 功能是一个搜索表单).

The main content section of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form).

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

Authors MUST NOT include more than one main element in a document.

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

Authors MUST NOT include the main element as a child of an article, aside, footer, header or nav element.

这篇关于HTML5 主要元素的用途的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！