Question

我最近一直在研究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>

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

Answer 1

根据 W3C ，main应仅用于该文档唯一的内容，因此在您的情况下，情景＃2是最合适的。< / p>

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

注意：main元素不是对内容进行分区而对其没有影响   文件大纲

文档的main内容部分包含唯一的内容   到该文档并排除在一组中重复的内容   网站导航链接，版权信息，网站等文档   徽标和横幅和搜索表单（除非文档或   应用程序main函数是搜索表单的函数。）

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

作者绝不能将main元素包含为article的子元素，   aside，footer，header或nav元素。

Answer 2

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

This describes/explains <main> - 目的非常好。

这些元素的首要原因（<main>，<header>，<footer>，<section>，<article>，<nav>，{{1引入的是指示文档大纲的重要性。

如果您要编写各种章节索引，则需要查看<aside>中的标题元素，并忽略<main>和<nav>部分。这也是为什么html5允许多个<aside>元素的原因，因为它们的重要性是基于它们所在的元素来确定的（与HTML＆lt; 5相反，其中标题元素本身将指示文档中的重要性）

Answer 3

除了已经回答的内容之外，从 here 中提取的一个重要观点是：

<块引用>

<main> 不参与文档的大纲；也就是说，不像 <body> 等元素，<h2> 等标题，<main> 不会影响 DOM 的页面结构概念。它是严格提供信息。

Answer 4

这些新的HTML5代码是因为它们经常被用作<div id="header">或<div class="footer">而创建的，所以它们被包含在内，就像你使用它一样，取决于你。

说实话，我甚至看到了一个大标题，里面有一个内页。

<header>
   <p>content...</p>
   <nav><ul><li>....</li></ul></nav>
   <footer>Some header footer content...</footer>
</header>

没有这样的限制，只是标签。

HTML5主要元素的用途

4 个答案: