上月16日,对于HTML5的扩展规范<main>
元素是在一些所谓的编辑草案提交给W3C 。 摘要如下:
本说明书中的一个扩展HTML5规范[HTML5]。 它定义了用于一个文件的主要内容区域的识别的元素。 在HTML5规范所有的规范性内容,除非本说明书中具体覆盖,旨在对本规范的基础。
主元件的正式化使用id值的文档的主要内容部分的识别常见的做法如“内容”和“主”。 它还定义了体现语义和WAI-ARIA [ARIA]界标角色的功能=主HTML元素。
例:
<!-- 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规范仅仅是渐进的。 我想这意味着该浏览器将开始实施它的时候,他们可以 - 问题是,多久这个需要,我如何知道所有的浏览器支持呢? 我是不是应该建立它像这样现在和诉诸填充工具?
用于支撑<main>
将是非常类似于在HTML 5中引入的任何其它新的容器元件支撑。
- 足够新的浏览器将支持它。
- 旧的浏览器将让你的风格,所以看起来是
display: block
,给你它的视觉效果 - IE浏览器的旧版本将不支持它在所有没有一个JavaScript垫片(将在完全相同的方式药粥所有其他新的容器元素工作)。
在“何时”取决于你所需要的浏览器支持,怎么舍得你是依赖于JS垫片什么样的水平。
现在,我会小心USNG它。
对于提议的未来,真正重要的是在浏览器中实现。 特别是,由于<main>
是提出块级元素,这将需要改变的HTML5分析器实施以及赋予它的主要默认ARIA的作用。
如果没有默认的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>
标签,所述前导码段,但它是用于粗心陷阱。
在HTML 5.1 的主要因素 ,现在是实施中的Webkit。 验证支持到接踵而至。 预计火狐实施 soonish。
您可以继续使用它时,Chrome 26和Firefox 21已经付诸实施。
正如引入许多其他新的HTML5元素,不是所有的浏览器都能识别<main>
或有它预设样式。 你需要确保它显示在你的CSS块级元素:
main {display:block;}
从目前来看,您还需要使用JavaScript来创建用于旧版本IE的元素:
<script>document.createElement('main');</script>
当然,如果你使用的html5shiv , <main>
现烤直接。