您的位置:首页 > Web前端 > HTML5

HTML语义化以及HTML5新增语义化标签

2018-02-11 18:29 483 查看
一、为什么要进行HTML语义化
现在的页面通篇都是div+css,为了改变这种这种状况,开发者们和官方提出了让HTML结构语义化的概念,并且官方W3C,也在HTML5给出了几个新的语义化的标签。
二、什么是HTML语义化
HTML语义化其实就是HTML标签语义化,根据文本的结构化,用正确的标签做正确的事情,便于开发者的阅读和写出更优雅的代码。
三、为什么要进行语义化
1、为了在没有css代码时,也能呈现很好的内容结构,代码结构,以至于达到没有编程基础的非技术人员,也能看懂一二。
2、提高用户体验,比如:title,alt用于解释名词和图片信息。
3、利于SEO,语义化能和搜索引擎建立良好的联系,有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重。
4、方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。

5、便于团队开发和维护,语义化更具可读性,如果遵循W3C标准的团队都遵循这个标准,可以减少差异化,利于规范化。
四、在语义化的时候我们要注意什么
1、尽可能少使用没有语义的div、span元素
2、在p和div都能使用的时候,尽量使用p,因为p标签有上下边距,可以兼容特殊终端。
3、不要使用纯样式标签,如:b、font、u等,改用css设置。
4、需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b,因为没语义),em是斜体(不用i同b);

5、使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头标题用th,内容单元格用td;
五、H5新增加的语义化标签
 1.header元素
  header 元素代表“网页”或“section”的页眉
  通常包含h1-h6元素或hgroup,作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分,一个搜索框,一个nav,或者任何相关logo。
  2.footer元素
  footer元素代表“网页”或“section”的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。如果footer元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。
  3.hgroup元素
  hgroup元素代表“网页”或“section”的标题,当元素有多个层级时,该元素可以将h1到h6元素放在其内,譬如文章的主标题和副标题的组合
  4.nav元素
  nav元素代表页面的导航链接区域。用于定义页面的主要导航部分
  5.aside元素
  aside元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。(特殊的section)
  6.section元素
  section元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组
  7.article元素
  article元素最容易跟section和div容易混淆,其实article代表一个在文档,页面或者网站中自成一体的内容,其目的是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的widget小工具。(特殊的section)
  8.address元素
  address代表区块容器,必须是作为联系信息出现,邮编地址、邮件地址等等,一般出现在footer。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: