我什么时候可以安全地使用 HTML5 中的新 <main> 元素？答案

【问题标题】：When can I safely use the new <main> element in HTML5?我什么时候可以安全地使用 HTML5 中的新 <main> 元素？
【发布时间】：2012-12-06 14:32:34
【问题描述】：

在 12 月 16 日，<main> 元素的 HTML5 扩展规范为 submitted to the W3C under something called an editors draft。摘要如下：

本规范是 HTML5 规范 [HTML5] 的扩展。它定义了一个元素用于识别主文档的内容区域。 HTML5 中的所有规范内容规范，除非被本规范明确覆盖，旨在作为本规范的基础。

主要元素形式化识别的常见做法使用 id 值的文档的主要内容部分，例如 “内容”和“主要”。它还定义了一个 HTML 元素，它体现了 WAI-ARIA [ARIA] 地标 role=main 的语义和功能。

例子：

<!-- other content -->

<main>

  <h1>Apples</h1>
 <p>The apple is the pomaceous fruit of the apple tree.</p>

 <article>
 <h2>Red Delicious</h2>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
  <p>... </p>
  <p>... </p>
  </article>

  <article>
  <h2>Granny Smith</h2>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
  <p>... </p>
  <p>... </p>
  </article>

</main>

<!-- other content -->

里面有所有的信息，我觉得我应该开始将它整合到网页中。据我所知，HTML5 规范只是渐进式的，新功能被“固定”到规范中，没有升级。我想这意味着浏览器会在可能的时候开始实现它——问题是，这需要多长时间，我怎么知道所有浏览器都支持它？我现在应该像这样构建它并使用 polyfill 吗？

【问题讨论】：

引用的文件是一个标题错误的提案，仅此而已。（由于其作者不是 HTML5 编辑器之一，因此命名错误。）围绕这个想法进行了激烈的讨论，但将 main 视为 HTML5 的一部分是错误的（这本身就是在进行中，尽管现在收到了 Proposed Recommendation 状态:w3.org/TR/html5)。
然而，据我所知，史蒂夫·福克纳是一名贡献者，这个想法得到了布鲁斯·劳森等人的支持——这有什么意义吗？
它不是错误的标题，也不是一个提案，它是 W3C 的第一个公共工作草案 (FPWD)，如果您想直接了解事实，您可以在计划中找到有关扩展规范的更多信息2014dev.w3.org/html5/decision-policy/…。主要元素在用户开发人员和实施人员中得到广泛支持。在成为 FPWD 之前，Apple、Microsoft、Mozilla 和 Opera（HTML WG 的所有成员）之类的公司都可以反对发布（没有人反对）>
@rickyduck 注意：W3C 编辑草稿是包含最新编辑的规范副本。 W3C 工作草案是已发布的快照，例如w3.org/TR/html-main-element
它不由 hixie 来决定，实施者决定：在 firefox 中实现
已分配bugzilla.mozilla.org/show_bug.cgi?id=820508 所以看起来它正在发生 :-)

标签： html semantic-markup specifications

【解决方案1】：

对<main> 的支持与对 HTML 5 中引入的任何其他新容器元素的支持非常相似。

足够新的浏览器会支持它。
旧版浏览器允许您设置样式，使其成为 display: block，并为您提供视觉效果
如果没有 JavaScript shim（其工作方式与所有其他新容器元素的工作方式完全相同），旧版本的 IE 将根本不支持它。

“何时”取决于您需要什么级别的浏览器支持以及您对 JS shim 的依赖程度。

【讨论】：

所以本质上，我现在实际上可以使用 <main> 元素和所需的后备，没有任何影响，然后每当提交应用程序时，它在语义上会更有效吗？是否也没有机会，元素本身不会被“固定”到规范中？
与任何其他新元素具有相同的附带条件，是的。规范仍有可能更改，任何内容都可以删除。
该元素还不是 HTML5草案的一部分（更不是WHATWG“生活标准”）。但是根据答案中提供的规定，它几乎可以像 <dwim> 元素一样安全地使用，除了 <main> 可能实际上进入规范和浏览器，可能带有定义的含义、默认呈现和预期的浏览器行为让您大吃一惊。
您的意思是 HTML 5.1 草案 (w3.org/html/wg/drafts/html/master/Overview.html)？主要元素规范与 HTML 5.1 中出现的任何新特性具有同等地位，无论它是否符合 WHATWG 标准，意义不大。
@SteveFaulkner，您在此处引用的文件说：“除了正在进行的工作外，引用此文件是不合适的。” （此外，到目前为止，它没有描述main元素，而是在“没有专用元素的常用成语”下列出了主要内容。）

【解决方案2】：

现在，我会小心使用它。

对于提案的未来，真正重要的是在浏览器中的实施。特别是，因为<main> 是一个建议的块级元素，它需要对 HTML5 解析器实现进行更改，并为其赋予默认的 ARIA 角色 main。

没有默认的 ARIA 角色，元素就没有意义，尽管现在使用它来准备是一种合理的方法。

不过，解析器更改确实需要一点小心。请记住，</p> 标签是可选的。现在假设您决定在“主要”内容之前需要一段序言。你可以写：

<!DOCTYPE html>
<body>
  <p> This is my page preamble ...
  <main>
    My main content ...
    <div>
       A story ...
    </div>
  </main>
</body>

如果浏览器实现<main> 元素，<main> 标签将自动关闭<p> 元素，在DOM 中，<p> 元素和<main> 元素将是彼此的兄弟。 <div> 元素及其内容将是 <main> 元素的子元素。即 DOM 将是：

HTML
 +--HEAD
 +--BODY
     +--P
     |  +--This is my page preamble ... 
     +--MAIN
         +--My main content ...
         +--DIV
             +--A story

但是，现在在浏览器中，<main> 成为 <p> 元素的子元素，而“我的主要内容...”是 <main> 元素的子元素，<div> 元素不是。即 DOM 有这样的结构：

HTML
 +--HEAD
 +--BODY
     +--P
     |  +--This is my page preamble ...
     |  +--MAIN
     |      +--My main content ... 
     +--DIV
        +--A story

当然，通过在序言段落中明确使用</p> 标签可以轻松避免这种情况，但对于粗心的人来说，这是一个陷阱。

【讨论】：

提出了一个很好的观点！感谢您的输入！出于习惯，我个人总是使用</p>，但就像你说的那样，这肯定是粗心的陷阱。
从什么时候改变元素的显示属性导致HTML解析规则的改变？您想说将div 放在a 中实际上会使a 也位于div 中吗？ jsfiddle.net/ufmnb
@SpadarShut - 它没有。当我说“块级”时，我的意思是相当于 HTML4 DTD 的 %block; 实体定义，而不是 CSS 显示属性。 HTML5 并没有真正相同的概念，但flow content elements that aren't also phrasing content elements 有点相似。

【解决方案3】：

HTML 5.1 main element 现在在 Webkit 中是 implemented。 Validation support 稍后跟进。期待Firefox implementation 很快。

【讨论】：

期望他们很快就会合理实施
@SteveFaulkner - 向史蒂夫致敬。是否有可能将示例添加到 5.1 规范中，其中主要元素显然不在史酷比点？也许类似于我的答案中的示例？
@Alohci 添加了一个错误w3.org/Bugs/Public/show_bug.cgi?id=20730 会解决它。
元素刚刚登陆 mozilla-inbound 土地bugzilla.mozilla.org/show_bug.cgi?id=820508#c36

【解决方案4】：

你可以继续使用它，Chrome 26 和 Firefox 21 已经实现了它。

正如许多其他新的 HTML5 元素的引入一样，并非所有浏览器都能识别<main> 或为其预设样式。您需要确保它在 CSS 中显示为块级元素：

main {display:block;}

目前，您还需要使用 JavaScript 为旧版本的 IE 创建元素：

<script>document.createElement('main');</script>

当然，如果你使用html5shiv，<main>现在直接烘焙了。

【讨论】：