BLOG
Enjoy when you can, and endure when you must.
DEC 30, 2013/HTML
HTML5的标签演变

在原先的HTML开发中,通常使用不同的id或class来标识一个div的作用,如id为header的div为页面的头部,id为nav的div则作为页面的主导航条。但是对于代码本身,任何用户代理(网页浏览器、屏幕阅读器、搜索引擎爬虫等)看到这段代码都无法确定每个div的意义。HTML5旨在使用全新的语义化元素来解决这个问题。下面就来看看HTML5的全新语义化元素。

本文的大部分内容来自于Ben Frain.《Responsive Web Design with HTML5 and CSS3》。

<section>

<section>元素用来定义文档或应用程序中的区域(或节)。其中的内容应是按照主题的分组。例如,可以用它组织你的个人信息,一个<section>用于联系信息,另一个用于新闻动态。需要重点理解的是用它的目的不是为了美化样式。如果你只想将某个元素包裹起来以便设置样式,那应该和以前一样继续使用<div>。

<nav>

<nav>元素用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域。因为<nav>用于主导航区域,所以严格来讲它不是为页脚或其他经常会包含一组链接的区块而设计的,不应该将其用于这些地方。

<article>

<article>元素用来包裹独立的内容片段。如博客中的博客正文。注意,如果出现嵌套的<article>元素,那内层的<article>元素内容应该和外层文章内容直接有关。

<aside>

<aside>元素用来表示与页面主内容松散相关的内容。如侧边栏。引文、广告以及导航元素(如友情链接等)也可以使用它。

<hgroup>

<hgroup>代表“段”或者“节”的标题。如果页面中有一组使用<h1>、<h2>、<h3>等标签的标题、标语和副标题(具有多层级的标题),则可以考虑使用<hgroup>将它们包裹起来。这样在HTML5的大纲结构算法中就会隐藏次级标题元素,从而只让<hgroup>中的第一个标题元素进入文档大纲。

<header>

<header>用来包含对区域内容的介绍说明。实际使用中,<header>可用作网站头部的“刊头”区域,也可用作对其他内容如<article>元素的简要介绍。

<footer>

<footer>用来包含其所在区域的辅助信息。例如可以用它包含一组指向其他页面的超链接,或者用它包含版权信息。和<header>一样,它也可以视情况在同一个页面上多次出现。例如博客网站的页脚可以用它,同时博客正文<article>元素内的文脚也可以用它。不过规范指出,博文作者的联系信息应该使用<address>元素来包裹。下面就会介绍<address>。

<address>

<address>元素用于明确地标注离其最近的<article>或<body>祖先元素的联系信息。为避免产生混淆,请记住<address>中一般不放具体的邮政地址,除非相应内容确实需要联系地址。而邮政地址和其他可能会改变的联系信息应该使用<p>标签来包裹。

COMMENTS
LEAVE COMMNT