HTML5结构化标签
一 结构化标签
在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式。而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等。也就是说整个HTML文档结构定义不清晰,HTML5中为了解决这个问题,专门添加了:页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。
在讲这些新标签之前,我们先看一个普通的页面的布局方式:
上图中我们非常清晰的看到了,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有底部等模块,而我们是通过class进行区分,并通过不同的css样式来处理的。但相对来说class不是通用的标准的规范,搜索引擎只能去猜测某部分的功能,另外就是此页面程序交给视力障碍人士来阅读的话,文档结构和内容也不会很清晰。而HTML5新标签带来的新的布局则是下面这种情况:
二 article与section 区别
article:一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。
section:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
总结:
article元素可以看成是一种特殊类型的section元素,它比section元素更强调独立性、局部整体性。
section元素强调分段或分块,而article强调独立性。具体来说,如果一块内容相对来说比较独立的、完整的时候,应该使用article元素,但是如果你想将一块内容分成几段的时候,应该使用section元素。
HTML5结构化标签的更多相关文章
- HTML5 常用的结构化标签整理
一.语义化结构化标签 结构化标签优点: 1.方便浏览器处理和识别,提升了网页的质量和语义. 2.减少了大量无意义的div标签,增强代码的可读性. 结构化标签:(header,nav,body,arti ...
- html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
- html5语义化标签——回顾
html5 头部结构 <!doctype html> <meta charset=“utf-8”/> <header></header> 页眉 ...
- Html5语义化标签详解及其兼容性处理
<header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合 一个 ...
- 第二季第十一天 html5语义化标签 css透明度
span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...
- html5语义化标签总结二
HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...
- 转html5语义化标签总结一
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- HTML5语义化标签重构页面
在HTML5未出现之前我们都用div+css来构建页面,比如<div id=”header”>,div的滥用,使得代码的可读性和可维护性很差,现在用本文来介绍一下用HTML5′干净的’语义 ...
- HTML html5 语义化标签
什么是语义化标签 语义化标签就是具有某种含义及结构的标签,让其更容易理解和使用. HTML5 新增了一些语义化标签,如下: article article 标签装载显示一个独立的文章内容.例如一篇完整 ...
随机推荐
- shape的属性(二)
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="r ...
- Dialog第三方登录等待
1. styles.xml 中加入 <style name="loadingDialogStyle" parent="android:Theme.Dialog&qu ...
- 使php支持mbstring库
多国语言并存就意味着多字节,PHP内置的字符串长度函数strlen无法正确处理中文字符串,它得到的只是字符串所占的字节数.对于GB2312的中文编码,strlen得到的值是汉字个数的2倍,而对于UTF ...
- test chemes
rcmobile://messages rcmobile://badge rcmobile://dialer rcmobile://open rcmobile://sms?type=new
- MySql表中key的区别
我们看到Key那一栏,可能会有4种值,即'啥也没有','PRI','UNI','MUL'1. 如果Key是空的, 那么该列值的可以重复, 表示该列没有索引, 或者是一个非唯一的复合索引的非前导列2. ...
- 【转】Android Studio简单设置
原文网址:http://ask.android-studio.org/?/article/14 Android Studio 简单设置 界面设置 默认的 Android Studio 为灰色界面,可以 ...
- spring中的BeanFactory与ApplicationContext的作用和区别?
BeanFactory类关系继承图 1. BeanFactory类结构体系: BeanFactory接口及其子类定义了Spring IoC容器体系结构,由于BeanFactory体系非常的庞大和复杂, ...
- MyBatis的association示例——MyBatis学习笔记之三
前两篇博文介绍的都是单表映射,而实际上很多时候我们需要用到较复杂的映射.今天学会的association的用法,就是一例,现写出来和大家分享(为简洁起见,ant工程中各文件.目录的布局,以及其它与前面 ...
- Delphi读取Word
Delphi读取Word现在关于往Word中写入数据的方法比较多,现在专门开个贴子,希望大家把自己读取Word内容的心得体会说一下,包括读取word文档中,有几个段落,如何读取第几个段落,读取有拼音的 ...
- [Irving] SQL 2005/SQL 2008 备份数据库并自动删除N天前备份的脚本
以下为SQL脚本,本人以执行计划来调用,所以改成了执行命令,大家可根据自己需要改为存储过程使用 )='E:\MsBackUp\SqlAutoBackup\' --备份路径; --备份类型为全备,1为差 ...