HTML5之语义标签介绍


Posted in HTML / CSS onJuly 07, 2016

在HTML5标准中,新加了几个用于增添页面语义的标签,这些标签有:article、section、nav和aside等。与别的大多数标签不 同,浏览器在解释渲染这些标签的时候仅仅把它作为普通的div块级元素来处理,不会添加任何额外的展现逻辑;也即,这些标签仅用于增添语义。对于Web开 发人员而言,使用这些标签的实际意义主要有2点:搜索引擎优化,以及增加页面的可用性(accessibility)。

在元素分类上,article、section、nav和aside称之为“Sectioning Content”

article

article元素可用于表示页面上某块具有一定独立性的内容,这个内容可以是一篇文章、论坛上的一个帖子/评论、一篇博客、一个可交互的控件 等。article标签可以嵌套使用,当这么做时,子article元素与父article元素在逻辑上必须有相应的关联。如Web开发者可以将一篇博客 的正文以及评论作为父级article元素,而将其中的各个评论作为子article元素。

article元素内部不能出现main元素 — main元素意指页面的主要内容,当有main元素时,article元素作为main元素的子元素而存在。

section

section元素意指页面或Web应用中的一部分,不同的section互相之间其“主题”或者说“基调”应当有所不同,一般会通过在section元素内放置heading元素(h1-h6)来定义这个“主题”/“基调”。

把section当成div使用是一种错误 — 除了页面可展现的内容,section的子元素不应该承担任何其它角色(样式、行为、辅助标签等)。

nav

nav元素主要用于包含页面上的导航链接,因此在nav元素中直接包含ul元素或者ol元素是一种非常常见的做法。尽管如此,nav中也可以不包含ul或者ol元素,比如在nav元素中可以包含一个文章段落(p标签),而在该文章段落中包含一些链接(a标签)。

与article元素一样,nav元素内部不能出现main元素。

aside

aside元素一般用于表示页面上的侧边栏,不过该元素仅仅只在语义上表示“侧边栏”,浏览器在解析渲染该标签时只会将其作为普通的div块级元素来处理。如果要真正得到侧边栏的效果,则Web开发人员需要自己编写CSS来实现。

以上这篇HTML5之语义标签介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

原文地址:http://www.cnblogs.com/krolong/archive/2016/07/07/5648710.html

HTML / CSS 相关文章推荐
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
HTML文本属性&颜色控制属性的实现
Dec 17 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 #HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 #HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 #HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 #HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 #HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 #HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 #HTML / CSS
You might like
php中Smarty模板初体验
2011/08/08 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
php实现字符串翻转的方法
2015/03/27 PHP
PHP中each与list用法分析
2016/01/08 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
python中的随机函数小结
2018/01/27 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
python实现音乐下载的统计
2018/06/20 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
explicit和implicit的含义
2012/11/15 面试题
优秀学生干部个人的自我评价
2013/10/04 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
开学寄语大全
2014/04/08 职场文书
学习之星事迹材料
2014/05/17 职场文书
社区综治工作汇报
2014/10/27 职场文书
人事局接收函
2015/01/30 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers