HTML5 引入的新的结构化标签

分享到

HTML5 引入的新的结构化标签

作者：Jeremy Wischusen，发布于2013-5-8

简介： HTML5 引入了许多新标签，包括几个用于更好地描述文本结构的标签。在本文中，我们将了解这些 HTML5 引入的新的结构化标签以及如何使用它们将一个文档划分成几个内容块。文中的示例代码有助于举例说明这些概念。

什么是 HTML5 ？

HTML5 是超文本标签语言 (Hypertext Markup Language, HTML) 的最新版本，也是迄今为止最为激进的版本。本文介绍了各个领域的许多新特性。比较其引人注目的一些新功能：

用于音频和视频的内置多媒体标签
用于在浏览器中绘制内容的画布标签
灵活的形式，允许您通过使用必要属性完成诸如认证之类的操作。

HTML5 使用一组新的结构化标签改进了 HTML 文档构建方法。新标签重点关注如何将一个 HTML 文档分成几个逻辑部分。标签名称对计划包含的内容类型进行了描述。在本文中，我们将了解这些新标签的详细信息。

一些背景知识

Tim Berners-Lee 于 1989 年创建了 HTML，用它来解决访问 Internet 上的信息的现有方法的一些缺陷。自创建 HTML 以来，在 Internet 上找到适合自己的方法是一项艰难的任务。Internet 上的内容被视为个人文档，没有什么简单方法可实现它们之间的导航。从本质上说，您必须知道您要查找的文档地址，然后手动输入该地址。为了解决这一问题，Berners-Lee 创建了两项技术：超文本传输协议 (HTTP) 和 HTML。

HTTP 是 Web 服务器用于交付内容的服务协议。在 Web 浏览器中（假设浏览器显示了完整的 URL），URL 通常是以 http:// 开头的。URL 的这部分告诉了浏览器向 Web 服务器发出请求时使用的协议类型。在 Web 服务器收到文档请求时，就可以将文档编写或转换为 HTML。然后将该 HTML 文档发送回发出请求的浏览器。

HTML 是一个脚本语言，它会告诉 Web 浏览器如何呈现内容。其他文档的链接也可能出现在此内容中，并提供一个在 Internet 上的文件间导航的用户友好方式。

HTTP 和 HTML 的结合使用提供了对 Internet 上内容的轻松导航，只需要单击文字链接，就可以在文档之间导航。在创建这两项技术之后， Berners-Lee 紧接着创建了万维网联盟 (W3C)。W3C 是 HTML 前四个版本的引导力量。

Internet 的初衷是提供简单的文本文档。最早的浏览器都是基于文本的（没有漂亮的窗口，屏幕上只有文本）。在最初引入图像时，添加图像是一件了不起的事。现在，人们可以在 Internet 上进行任何操作，从发送邮件到观看电视节目，随心所欲。Internet 不再是一个传送简单文本的机制。新特性和新的使用带来了 HTML 语言从未遇到的挑战和问题。

W3C 试图使用可扩展超文本标记语言 (Extensible Hypertext Markup Language, XHTML) 2.0 标准解决目前的 Internet 问题。然而，该标准并不被用户认可，大多数都遭到弃用。2004 年，随着 W3C 对 XHMTL 2.0 标准的关注，一个称为 Web 超文本应用程序技术工作组 (WHATWG) 的小组开始开发 HTML5 标准，HTML5 比 XHMTL 2.0 更受欢迎。于是，W3C 放弃了 XHTML 2.0，开始与 WHATWG 合作开发 HTML5。

支持的浏览器

在撰写本文时，HTML5 尚未正式发布。Web 上的大部分内容仍然是根据 HTML4 规范编写的。虽然有一些浏览器提供了 HTML5 规范支持，但是由于每个浏览器只能支持 HTML5 的某些特性，因此事情变的很棘手。在编写一个基于 HTML5 的网站之前，应该检查各个目标浏览器，确保它们支持您将用于网站的特性。

新的文档类型

无论目标浏览器支持哪些功能，您都必须告知浏览器您想要使用 HTML5 规范呈现您的内容。使用文档类型声明就可以实现此目的。

文档类型声明会告诉浏览器使用了哪个版本的标记语言来编写页面。通过引用一个文档类型定义 (Document Type Definition, DTD) 可以实现此目的。DTD 指定了标记语言使用的规则，这样浏览器就可以正确呈现内容。

文档类型可能是一个令人感到困惑的概念。在当前 HTML 规范中，有很多文档类型定义，它们之间的差异并不十分清晰。表 1 显示了当前可用的文档类型及其功能。

表 1. 文档类型和功能

文档类型	功能	示例
HTML 4.01 strict	支持所有 HTML 元素和属性，但不支持表象标签，比如字体标签。也不支持框架集。	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 transitional	和 HTML strict 一样，但支持使用弃用元素，比如字体标签。不支持框架集。	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 frameset	和 HTML transitional 一样，但支持框架集。	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 strict	和 HTML strict 一样，但是必须可以将所有内容写成格式良好的 XML。例如，所有开始标签必须有相应的结束标签。不支持框架集。	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 transitional	和 HTML transitional 一样，但是必须可以将所有内容写成格式良好的 XML。不支持框架集。	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 frameset	和 XHTML transitional 一样，但支持框架集。	<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1	和 XHTML strict 一样，但是支持模块功能，比如 Ruby 支持东亚语言。	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

幸运的是，文档类型声明在 HTML5 中得到了极大的简化。事实上 HTML5 中只有一个文档类型。如果想使用 HTML5 规范显示您的浏览器，那么请添加清单 1 所示的文档类型。

清单 1. HTML5 文档类型

文档类型声明应该是 HTML 文档中的第一部分内容，应放在 <html> 标签的前面。

新结构元素

创建新结构化标签的基本原理是使用标签将 Web 页面分成逻辑部分，所用的标签描述了页面包含的内容类型。从概念上讲，可将 Web 页面视为一个文档。文档包含页眉、页脚、章节和其他各种将文档分成逻辑部分的约定。

本小节回顾了使用通用样例代码划分 HTML 文档的现有方法。在本文的后续内容中，将使用 HTML5 引入的新的结构化标签修订原始代码，从而了解如何逐步将文档转换成逻辑部分。

HTML 4 方法

如果您创建过 HTML 文档（哪怕是最简单的），就会对 div 标签有一定的了解。div 标签是出现 HTML5 以前的时代的主要机制，用于在 HTML 文档中创建内容块。例如，清单 2 显示了如何使用 div 标签创建一个只包含页眉、内容区域和页脚的简单页面。

清单 2. 使用 div 标签创建的简单 HTML 页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 <html> 
  <head> 
    <title> 
      A Simple HTML Page Using Divs 
    </title> 
  </head> 
  <body> 
    <div id='header'>Header</div> 
    <div id='content'>Content</div> 
    <div id='footer'>Footer</div> 
  </body> 
 </html>

运行良好；div 标签是一个很好的通用标签。不过，除了查看每个 div 标签的 id 属性之外，很难了解每个 div 标签代表文档的哪个部分。尽管您可能认为，只要命名合理，id 足够成为一个指标，但 id 属性是任意的。很多变体也被认为是同样有效的 id 。标签本身并没有指出内容类型，它只负责显示。

HTML5 方法

HTML5 通过提供一组标签来解决这个问题，这些标签可以更清晰地定义构成某个 HTML 文档的主要内容块。不管 Web 页面最终如何显示内容，大多数 Web 页面都是由常见页面和元素的不同组合构成的。

清单 2 HTML5 包含可以将文档分解成常见部分的标签，并指出了每个部分包含的内容。新标签有：

header
section
article
aside
footer
nav

本文其余部分将简要介绍各个标签，您也可以通过修改清单 2 中的原始 div 代码示例来了解这些标签的预期用途，从而了解如何使用 HTML5 引入的新的结构化标签。

header 标签

顾名思义，header 标签用于将 HTML 页面的一部分标记为页眉。清单 3 显示了清单 2 中的代码示例，可以修改该示例来使用一个 header 标签。

清单 3. 添加一个 header 标签

<!DOCTYPE html> 
 <html> 
  <head> 
    <title> 
      A Simple HTML Page 
    </title> 
  </head> 
  <body> 
    <header>Header</header>
    <div id='content'>Content</div> 
    <div id='footer'>Footer</div> 
  </body> 
 </html>

清单 3 中的文档类型也被更改，指出浏览器应使用 HTML5 来显示页面。从现在起，所有示例都假设您使用了正确的文档类型。

section 标签

section 标签用于标识页面上的重要内容部分。该标签有点类似于将一本书分成几个章节。将一个 section 标签添加到清单 4 中的代码示例结果中。

清单 4. 添加一个 section 标签

<!DOCTYPE html> 
 <html> 
  <head> 
    <title> 
      A Simple HTML Page 
    </title> 
  </head> 
  <body> 
    <header>Header</header> 
      <section> 
        <p> 
          This is an important section of the page. 
        </p> 
      </section>
    <div id='footer'>Footer</div> 
  </body> 
 </html>

article 标签

article 标签标识了 Web 页面中的主要内容。以博客为例，每篇帖子都构成一个重要内容。将 article 标签添加到清单 5 中的代码示例结果中。

清单 5. 添加一个 article 标签

<!DOCTYPE html> 
 <html> 
  <head> 
    <title> 
      A Simple HTML Page 
    </title> 
  </head> 
  <body> 
    <header>Header</header> 
      <section> 
        <article> 
          <p> 
            This is an important section of content on the page. 
            Perhaps a blog post. 
          </p> 
        </article> 
        <article> 
          <p> 
            This is an important section of content on the page. 
            Perhaps a blog post. 
          </p> 
        </article>
      </section> 
    <div id='footer'>Footer</div> 
  </body> 
 </html>

aside 标签

aside 标签表示标签中包含的内容与页面主要内容相关，但不是该页面的一部分。这有点类似于使用括弧对正文进行注释（就像这样）。括弧中的内容提供关于该元素的一些附加信息。将一个 aside 标签添加到清单 6 中的代码示例结果中。

清单 6. 添加一个 aside 标签

<!DOCTYPE html> 
 <html> 
  <head> 
    <title> 
      A Simple HTML Page 
    </title> 
  </head> 
  <body> 
    <header>Header</header> 
      <section> 
        <article> 
          <p> 
            This is an important section of content on the page. 
            Perhaps a blog post. 
          </p> 
          <aside> 
            <p> 
              This is an aside for the first blog post. 
            </p> 
          </aside>
        </article> 
        <article> 
          <p> 
            This is an important section of content on the page. 
            Perhaps a blog post. 
          </p> 
        </article> 
      </section> 
    <div id='footer'>Footer</div> 
  </body> 
 </html>

footer 标签

footer 标签将所包含的元素内容标记为文档的页脚。将一个 footer 标签添加到清单 7 中的代码示例结果中。

清单 7. 添加一个 footer 标签

<!DOCTYPE html> 
 <html> 
  <head> 
    <title> 
      A Simple HTML Page 
    </title> 
  </head> 
  <body> 
    <header>Header</header> 
      <section> 
        <article> 
          <p> 
            This is an important section of content on the page. 
            Perhaps a blog post. 
          </p> 
          <aside> 
            <p> 
              This is an aside for the first blog post. 
            </p> 
          </aside> 
        </article> 
        <article> 
          <p> 
            This is an important section of content on the page. 
            Perhaps a blog post. 
          </p> 
        </article> 
      </section> 
    <footer>Footer</footer>
  </body> 
 </html>

此时，所有原始 div 标签都已使用 HTML5 结构化标签替换。

nav 标签

nav 标签中包含的内容主要用于导航。将 nav 标签添加到清单 8 中的代码示例结果中。

清单 8. 添加一个 nav 标签

<!DOCTYPE html> 
 <html> 
  <head> 
    <title> 
      A Simple HTML Page 
    </title> 
  </head> 
  <body> 
    <header>Header 
      <nav> 
        <a href='#'>Some Nav Link</a> 
        <a href='#'>Some Other Nav Link</a> 
        <a href='#'>A Third Nav Link</a> 
      </nav>
    </header> 
      <section> 
        <article> 
          <p> 
            This is an important section of content on the page. 
            Perhaps a blog post. 
          </p> 
          <aside> 
            <p> 
              This is an aside for the first blog post. 
            </p> 
          </aside> 
        </article> 
        <article> 
          <p> 
            This is an important section of content on the page. 
            Perhaps a blog post. 
          </p> 
        </article> 
      </section> 
    <footer>Footer</footer> 
  </body> 
 </html>

完成的示例

清单 9 显示了使用新 HTML5 结构化标签替换原始 div 标签的结果。

清单 9. 完成的示例

<!DOCTYPE html> 
 <html> 
  <head> 
    <title> 
      A Simple HTML Page 
    </title> 
  </head> 
  <body> 
    <header>Header 
      <nav> 
        <a href='#'>Some Nav Link</a> 
        <a href='#'>Some Other Nav Link</a> 
        <a href='#'>A Third Nav Link</a> 
      </nav> 
    </header> 
      <section> 
        <article> 
          <p> 
            This is an important section of content on the page. 
            Perhaps a blog post. 
          </p> 
          <aside> 
            <p> 
              This is an aside for the first blog post. 
            </p> 
          </aside> 
        </article> 
        <article> 
          <p> 
            This is an important section of content on the page. 
            Perhaps a blog post. 
          </p> 
        </article> 
      </section> 
    <footer>Footer</footer> 
  </body> 
 </html>

尽管该示例比较简单（用于演示），但当您将清单 2 div 的原始示例与清单 9 中的结果进行比较时，就应该对新结构化标签的用途有明确的了解。

结束语

HTML5 引入的新标签描述了它们所包含内容的类型，有助于将文档分成几个逻辑部分。何时何地在文档中使用这些新标签完全由您决定，就像何时何地写一本书由作者决定一样。尽管撰写同一本书的两名作者可能选择使用不同的方法对书进行分节，但使用章节这一行为仍然是一致的。类似地，某个给定 Web 页面的两名作者可能选择使用不同的结构，HTML5 引入的新的结构化标签提供了新的约定，Web 页面开发人员可以使用旧 div 标签没有提供的功能。

参考资料

“HTML5 中的新元素”（developerWorks，2007 年 8 月）：了解有关 HTML5 结构的更多信息。
WHATWG：探索 WHATWG 社区，该组织负责编写 HTML5 规范。
W3C：了解有关 W3C 的更多信息，该社区创建了原始 HTML 规范，目前正与 WHATWG 共同开发 HTML5 规范。
HTML5（Wikipedia）：了解有关 HTML 5 的更多信息。
“HTML5 differences from HTML4”(W3C)：在该工作草案中进一步理解 HTML4 和 HTML5 之间的差异。
“HTML5 First Look”(lynda.com)：探讨 HTML5 是什么（不是什么）。
developerWorks Web 开发专区：寻找各种基于 Web 的解决方案的文章。