HTML5-语义化

HTML5早在2012年就已形成了稳定的版本,但于2014年10月完成最终标准制定。

那么讨论H5语义化的作用是什么呢?

使用规范化语义的意义:

  • 易于用户阅读:使页面呈现清晰的结构;
  • 利于SEO:搜索引擎根据标签来确定上下文和各个关键字的权重;
  • 方便其他设备解析:如盲人阅读器根据语义渲染网页;
  • 利于开发和维护:语义化具有可读性、代码便于维护、与CSS3关系更加和谐。

主体结构标签解析:

1、<header>

<header>定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。

在一个文档中,您可以定义多个<header>元素,但需要注意的是<header>元素不能作为<address>、<footer>、<header>元素的子元素。

2、<nav>

<nav>描述一个含有多个超链接的区域,该区域包含跳转到其他页面或页面内部其他部分的链接列表。

在一个文档中,可定义多个<nav>元素。

3、<main>

<main>定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏、导航栏链接、版权信息、网站Logo、搜索框(除非搜索框作为文档的主要功能)。

在一个文档中不能出现多个<main>标签。

4、<article>

<article>元素表示文档、页面、应用或网站中的独立结构,是可独立分配、可复用的结构。如在发布中,它可能是论坛帖子、杂志、新闻文章、博客、用户提交的评论、交互式组件或者其他独立的内容项目。

当<article>元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

5、<aside>

<aside>元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

6、<footer>

<footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

使用footer插入联系信息时,应在footer元素内使用<address>元素。

7、<section>

<section>表示文档中的一个区域(或节),比如内容中的一个专题组。

<article>比<section>更具有独立性、完整性。
如果元素内容可以分为几个部分的话,应该使用<article>而不是<section>。
不要把<section>元素作为一个普通的容器来使用,特别是当<section>仅仅是为了美化样式或方便脚本使用的时候,这时应使用<div>。

题外话:苹果当年以各种性能借口(之所以说是借口,因为没有技术解决不了的问题)选择H5而放弃如日中天Flash,也预示了互联网的总体发展标准应遵循开放、免费。

订阅
提醒
0 评论
内嵌讨论
查看全部讨论