4.3 HTML5 的全新语义化元素
字典中对语义学的定义是“关注语言本质含义的语言学和逻辑学分支学科”。对我们来说，语义化是给我们的标签赋予意义的过程。为什么语义化很重要？很高兴你问这个问题。看看And the winner isn’t...网站目前的标签结构：
大多数网页开发者能看懂这些div上使用的通用的ID命名约定——header、content、sidebar等等。但是对于代码本身，任何用户代理（网页浏览器、屏幕阅读器、搜索引擎爬虫等）看到这段代码都无法确定每个div的意义。HTML5旨在使用全新的语义化元素来解决这个问题。接下来将从页面结构的角度来讲解这些元素。
4.3.1 <section>
<section>元素用来定义文档或应用程序中的区域（或节）。例如，可以用它组织你的个人信息，一个<section>用于联系信息，另一个用于新闻动态。需要重点理解的是用它的目的不是为了美化样式。如果你只想将某个元素包裹起来以便设置样式，那应该和以前一样继续使用<div>。
想知道W3C的HTML5标准对<section>的说明，请访问如下网址：http://dev.w3.org/html5/spec/Overview.html#the-section-element。
4.3.2 <nav>
<nav>元素用来定义文档的主导航区域，其中的链接指向其他页面或当前页面的某些区域。因为<nav>用于主导航区域，所以严格来讲它不是为页脚或其他经常会包含一组链接的区块而设计的（虽然将它用在这些区块里包含链接也没问题）。
想知道W3C的HTML5标准对<nav>的说明，请访问如下网址：http://dev.w3. org/html5/spec/Overview.html#the-nav-element。
4.3.3 <article>
<article>元素与<section>元素很容易混淆。在完全理解之前我只得一遍又一遍地阅读它们的标准定义。<article>元素用来包裹独立的内容片段。当搭建一个页面时，想想你准备放入<article>标签的内容能否作为一个整块而被复制粘贴到另外一个完全不同的网站且能保持完整的意义？另一种办法是，想想包裹在<article>中的内容能否在RSS订阅源中独立成为一篇文章？应该使用<article>标签包裹的内容，最明显的例子就是博客正文。注意，如果出现嵌套的<article>元素，那内层的<article>元素内容应该和外层文章内容直接有关。
想知道W3C的HTML5标准对<article>的说明，请访问如下网址：http://dev.w3.org/html5/spec/Overview.html#the-article-element。
4.3.4 <aside>
<aside>元素用来表示与页面主内容松散相关的内容。在实践中，我经常将其用作侧边栏（当它包含合适的内容时）。另外，引文、广告以及导航元素（如友情链接等）也可以使用它。
想知道W3C的HTML5标准对<aside>的说明，请访问如下网址：http://dev.w3.org/html5/spec/Overview.html#the-aside-element。
4.3.5 <hgroup>
如果页面中有一组使用<h1>、<h2>、<h3>等标签的标题、标语和副标题，则可以考虑使用<hgroup>将它们包裹起来。这样在HTML5的大纲结构算法中就会隐藏次级标题元素，从而只让<hgroup>中的第一个标题元素进入文档大纲。
HTML5的大纲结构算法
HTML5允许每个<section>容器有自己独立的大纲结构。这样你就不必总想着现在是几级标题了。例如在一个博客中，博文的标题可以使用<h1>标签，同时博客内容的标题也可以包含<h1>标签。请见如下代码：
尽管代码中有多个<h1>和<h2>元素，但大纲结构还是这样：
·Ben’s blog
ºA post about something
因此，你就不必吃力地去记住标题级别了，而是可以在每个容器中随意使用任何级别的标题元素，HTML5的大纲结构算法令自动组织好大纲。可以使用下面的HTML5大纲生成器来测试生成网页的大纲结构：
http://gsneders.html5.org/outliner/
http://hoyois.github.com/html5outlier/
下图展示了HTML5大纲生成器的界面：
想知道W3C的HTML5标准对<hgroup>的说明，请访问如下网址：http://dev.w3.org/html5/spec/Overview.html#the-hgroup-element。
4.3.6 <header>
由于<header>元素不计入大纲结构，所以不能用它来划分内容结构，而是应该用它来包含对区域内容的介绍说明。实际使用中，<header>可用作网站头部的“刊头”区域，也可用作对其他内容如<article>元素的简要介绍。
想知道W3C的HTML5标准对<header>的说明，请访问如下网址：http://dev.w3.org/html5/spec/Overview.html#the-header-element。
4.3.7 <footer>
和<header>一样，<footer>元素也不计入大纲结构，所以也不能用于划分内容结构。应该用它来包含其所在区域的辅助信息。例如可以用它包含一组指向其他页面的超链接，或者用它包含版权信息。和<header>一样，它也可以视情况在同一个页面上多次出现。例如博客网站的页脚可以用它，同时博客正文<article>元素内的文脚也可以用它。不过规范指出，博文作者的联系信息应该使用<address>元素来包裹。
想知道W3C的HTML5标准对<footer>的说明，请访问如下网址：http://dev.w3.org/html5/spec/Overview.html#the-footer-element。
4.3.8 <address>
<address>元素用于明确地标注离其最近的<article>或<body>祖先元素的联系信息。为避免产生混淆，请记住<address>中一般不放具体的邮政地址，除非相应内容确实需要联系地址。而邮政地址和其他可能会改变的联系信息应该使用<p>标签来包裹。
想知道W3C的HTML5标准对<address>的说明，请访问如下网址：http://dev.w3.org/html5/spec/Overview.html#the-address-element。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论