HTML5 语义化 - main

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

  W3C 规范

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

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

  自从 <main> 元素包含在 HTML 规定里之后,<body> 元素就还原成了它在 HTML4 中的定义。

The body element represents the content of the document.

  细节

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

  按照规格,如果你在一个文档中试图使用多个 <main> 标签,那么 W3C validator 会抛出错误。

  <main> 元素的另外一个规定是,它不能作为 <article>, <header>, <aside>, <footer>, <nav> 的子元素节点。

  使用

  就像其它的 HTML5 新元素一样,并不是所有的浏览器都能够识别出 <main> ,并且给它加上预设的样式,你可能需要在自己的 CSS 文件中将它设置为块级元素。

main {display:block;}

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

<script type="text/javascript">document.createElement('main');</script>

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

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

  所以,在实践中它应该是什么样子呢?下面是使用 <main> 元素之前的文档结构。

<header>Header</header>
<div id="content">Main Content</div>
<footer>Footer</footer>

  下面使用 <main> 元素改写文档。

<header>Header</header>
<main id="content">Main Content</main>
<footer>Footer</footer>

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

  总结

  正如你所见的,使用 <main> 元素是超级简单的,只需要话费几分钟的时间,所以现在真的到了将 <main> 带入到网站开发的过程中


原文发布于微信公众号 - 大数据钻研(bigdata118)

原文发表时间:2017-04-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java技术分享圈

杨老师课堂之Excel VBA 程序开发第七讲表格数据高亮显示

2.在sheet1中选择通用下拉列表中的WorkSheet  右侧选择SelectionChange,写入下列代码:

14170
来自专栏QQ音乐前端团队专栏

Web Components 初探

任何 UI 框架或库最期望目标之一是帮助我们建立通用的模式或约定。

1.1K40
来自专栏吾爱乐享

php学习之css入门(一)

18720
来自专栏hbbliyong

Android Studio 快捷键

Alt+回车 导入包,自动修正 Ctrl+N   查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L  格式化代码 Ctrl+Alt+O 优化导入...

31160
来自专栏前端下午茶

一个骚气的文章目录自动生成器了解一下

这个插件根据选定的目录内容中的 h1, h2, h3, h4, h5, h6 标签来自动生成目录插入到选定的目录容器中,并且提供一个漂亮的样式效果

19020
来自专栏Flutter入门到实战

开发工具总结(5)之Markdown语法图文全面详解及其工具介绍

版权声明:本文为博主原创文章(少量文字参考他人博文,已加上引用说明),未经博主允许不得转载。https://www.jianshu.com/p/c0a2897a...

29440
来自专栏Ryan Miao

照着官方文档学习react

准备 先要准备环境。搭建一个基于webpack的react环境:Hello ReactJS. 一些要点 我在想是否应该完整的记录照抄的过程呢。毕竟已经开始一段,...

37570
来自专栏闻道于事

JavaScript面向对象之Windows对象

JavaScript之Window对象 首先我们先了解一个概念:事件。 事件,就是把一段代码设置好,满足条件时触发。或者说,事件是可以被 JavaScript ...

31490
来自专栏积累沉淀

JavaScript BOM浏览器对象模型

BOM  1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM缺少...

24360
来自专栏前端小叙

Vue.js 2.0 学习重点记录

Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 V...

37950

扫码关注云+社区

领取腾讯云代金券