在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之语义标签的更多相关文章

  1. html5 新增语义标签

    一份模板: <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subt ...

  2. html5新增语义标签

    1.header <header> 标签定义文档的页眉(介绍信息). 2.nav <nav> 标签定义导航链接的部分. 3.article <article> 标签 ...

  3. Html5 中的新语义标签

    1.1 语义标签对于我们并不陌生,如<p>表示一个段落.<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更 ...

  4. HTML语义化:HTML5的新标签及IE5.5~9的部分兼容方案

    一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...

  5. HTML5 十大新特性(一)——语义标签

    说语义标签前先来理解下什么叫语义化,当下html是靠div+css来铸造页面的整体框架和结构的,通篇大量的div可读性极低,因此诞生了这些特殊的标签,简单地说就是见名知义,使页面更清晰,方便维护和开发 ...

  6. HTML5之语义化标签

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  7. 浅谈html语义化标签,Html5新增语义化标签

    Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...

  8. html5中的一些新语义标签

    <header> <nav> <ul> <li><a href="">栏目1</a></li> ...

  9. HTML5中的语义标签兼容IE8以及更低版本的浏览器

    看某教程,说让HTML5的这些语义标签能够兼容低版本的浏览器,原文是“你可以设置css的display属性为block”.很好理解,就设置css样式为block嘛,那就直接设置咯: header, s ...

随机推荐

  1. 动态设置和访问cxgrid列的Properties(转)

    原文:http://www.cnblogs.com/hnxxcxg/archive/2010/05/24/2940711.html 动态设置和访问cxgrid列的Properties 设置: cxGr ...

  2. 在centos配置nginx+php的环境

    环境版本:centos6.8/nginx1.10.2/php5.6.29 ====================安装nginx1.10.2==================== #根据centos ...

  3. Bash Shell的操作环境

    1.路径与命令查找顺序 基本上,命令运行的顺序可以这样看: 1)以相对/绝对路径执行命令,例如“/bin/ls”或“./ls”; 2)由alias找到该命令来执行; 3)由bash内置的(builti ...

  4. PHP页面跳转到另一个页面的方法

    用HTTP头信息重定向到另外一个页面的方法如下: <? if (isset($url)) { Header("HTTP/1.1 303 See Other"); Header ...

  5. GitHub上最火的40个Android开源项目

    http://www.csdn.net/article/2013-05-03/2815127-Android-open-source-projects

  6. 将golang程序注册为windows服务

    1.go get  bitbucket.org/kardianos/service 2.参考里面的exmaple,就可以了 我承认我有点蛋疼

  7. WPF的"路径标记语法"

    在此之前我们先了解一下WPF的"路径标记语法" M:表示绘制起点 // M 0,0 L:表示绘制直线 (H:横线 V:竖线)  // L 100,0 C:三次方贝塞尔曲线   // ...

  8. google垂直搜索结果

    佰年金融 所谓“垂直”很干净地分离出来,而不是在谷歌算作有机列表的结果,但该行已开始模糊.例如,现在许多视频结果似乎是直接整合为有机(万SERP的例子).我治疗的新的“有深度的文章”作为一个垂直的结果 ...

  9. libsvm 训练后的模型参数讲解(转)

    主要就是讲解利用libsvm-mat工具箱建立分类(回归模型)后,得到的模型model里面参数的意义都是神马?以及如果通过model得到相应模型的表达式,这里主要以分类问题为例子.测试数据使用的是li ...

  10. re模块汇总

    text = 'The Attila the hun show' m = re.match('.',text)#任意单个字符 m.group() 'T' m = re.match('.*',text) ...