HTML5 语义化 - main

网友投稿 974 2022-07-27

早在 2013 年,

元素就被正式添加到 W3C HTML 规范中,到目前位置,关于该元素的定义已经很完善了,所以现在是时候深入了解什么时候适合使用
元素了。那么,下面就开始吧。

HTML5 语义化 - main

W3C 规范

的主要目的是将 ARIA 的地标性作用 main 映射到 HTML 中的元素。这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。W3C 规范将
描述为 :

文档或应用程序的主要内容。主内容区域由与文档的中心主题或应用的核心功能的直接相关或扩展的内容组成。

自从

元素包含在 HTML 规定里之后, 元素就还原成了它在 HTML4 中的定义。

The body element represents the content of the document.

细节

使用

元素值得注意的一点是,它在每个页面中只能使用一次。为什么要规定一个页面只能使用一次呢?虽然我对具体的细节并不感兴趣,但是有些观点看起来还是比较有意义的。

按照规格,如果你在一个文档中试图使用多个

标签,那么 W3C validator 会抛出错误。

元素的另外一个规定是,它不能作为
,
,

使用

就像其它的 HTML5 新元素一样,并不是所有的浏览器都能够识别出

,并且给它加上预设的样式,你可能需要在自己的 CSS 文件中将它设置为块级元素。

main {display:block;}

有的时候,为了支持一些较低版本的 IE 浏览器,你可能还需要使用 JavaScript 创建该元素。

当然了,你还可以使用 html5shiv.

使用

元素最简单的方式就是去替换那些 ID 或者 Class 值为 main 或者 content 之类的
元素。

所以,在实践中它应该是什么样子呢?下面是使用

元素之前的文档结构。

Header

Main Content

Footer

下面使用

元素改写文档。

Header

Main Content

Footer

好了,这是如此的简单,以至于一分钟不到我们就可以将文档改写成新潮的 HTML5 样式。

总结

正如你所见的,使用

元素是超级简单的,只需要话费几分钟的时间,所以现在真的到了将
带入到网站开发的过程中了。

所以,在实践中它应该是什么样子呢?下面是使用

元素之前的文档结构。

Header

Footer

下面使用

元素改写文档。

Header

Main Content

Footer

好了,这是如此的简单,以至于一分钟不到我们就可以将文档改写成新潮的 HTML5 样式。

总结

正如你所见的,使用

元素是超级简单的,只需要话费几分钟的时间,所以现在真的到了将
带入到网站开发的过程中了。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:十分钟入门 Less
下一篇:CSS 高级布局技巧(cssci)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~