编者注:电子商务商家在其业务中使用复杂的技术。对这些技术具备实用的“必要了解”级理解,有助于商家更好地开展业务。为此,我们推出了“必要了解”系列文章,以大多数商家都能受益的方式解读复杂主题。在本期文章中,撰稿人、网页无障碍专家将为您解释 HTML5。
在HTML 5于万维网上得到广泛应用之前,还有相当长的一段时间,但仔细审视即将出现的一些变化及其如何使您的电子商务网站受益是值得的。
任何网站的主要构建块是其标记语言。标记语言用于组织页面上的信息——指明某段文本是标题,而另一段是段落或列表。HTML4 和 XHTML 是目前最常用的标记语言,它们共享一套用于标记基于 Web 文档的通用元素。正确使用这些元素意味着为您的文档应用了具体的语义,从而使其最有可能被尽可能多的用户代理(user agents)正确理解。
什么是语义?
从广义上讲,语义学是将意义应用于结构;在HTML术语中,这意味着使用最能描述其包含信息的HTML元素,其中HTML元素应为内容附加意义,这包括使用<abbr>元素来标识缩写、使用各种标题元素(<h1>、<h2>、<h3>)来标识章节标题和文章标题,或更明确地使用<a>元素来标识超链接。
然而,HTML4 和 XHTML 可用的元素种类并不丰富,这导致其有效描述页面内容的语义能力有限。HTML4 的语义解释一直是 Web 标准专家争论的话题。幸运的是,HTML5 提供了显著扩展的、具有语义意义的标记元素集合。
语义化的 HTML 如何帮助我的网站?
人类顾客只能看到您选择设计的网站外观,但他们访问这些信息所使用的设备和方式可以从精确的语义中获益良多。例如,在线购物者可能使用移动浏览器,该浏览器会重新组织您网站的内容,以便在较小的屏幕上更易于使用;或使用辅助技术,该技术能够根据您提供的语义指示对信息进行分组;或使用搜索引擎,由于语义描述了内容类型,搜索引擎可以更好地索引您的网站。简而言之,语义化 HTML 始终为您带来潜在益处。
正确使用语义是否意味着搜索引擎会将您的网站排名提高?不一定。是否意味着残障用户就能使用您的网站?同样,不一定。但语义是实现所有这些目标道路上的一个步骤。
HTML5 中有哪些新元素?
HTML5Gallery.com 的屏幕截图,展示了使用 HTML5 构建的网站。
HTML 5中的大多数新元素直接与内容结构和信息类型相关,新的内容结构类型包括<section>、<article>、<aside>、<hgroup>、<nav>和<figure>,新的信息类型元素包括<video>、<audio>、<meter>、<time>、<details>和<summary>,虽然还有许多其他元素,但这些元素在电子商务中特别有用。
目前关于这些元素的讨论大多涉及它们在博客文章或文章中的使用,提供的示例往往解释给定元素如何适用于您的文章标题和署名,或在应用程序中包含信息,事实上,W3C为<article>元素提供的示例明确指出博客条目或报纸文章是该元素的逻辑文档内容,但这不应被解读为它们不适用于电子商务!
关键新功能
其中一个最重要的元素是 <article>,它代表您网站上单个独立的内容块。在电子商务中,这基本上就是您的产品。在产品页面上,<article> 应包含有关您产品的所有详细信息:图片、描述、详情、购买信息。在分类页面上,它是每个展示产品的容器。“Article”不仅指书面文档,也指服装(一件衣服)。
HTML 5中的一个重大变革者是<video>元素,特别是鉴于苹果决定不在iPhone或iPad上支持Flash,使用浏览器驱动的视频播放器对于大量使用视频的任何网站都具有巨大潜力,目前对Flash视频的替代支持还不够充分,但至少在某些应用程序中提供使用video元素可能已经必要。
从<article>元素的使用中可以明显看出,HTML 5开发中应用的一个原则是元素名称应清楚地表明该元素的用途,然而,这并不意味着它们的使用方法一定是显而易见的,使用示例往往会向一个方向偏见预期,如上面的例子所示,其中article似乎代表书面文档。
目前,大多数产品页面都使用各种<div>元素进行标记。HTML中缺乏区分性的结构元素意味着在任何给定的产品页面上,所有类型的信息在语义上都是平等的。这在HTML5中可以改变。借助用于构建页面结构的新元素,您现在可以清楚地指示页面的哪个区域是产品页面的“核心”:即article部分。在该区域内,您可以从结构上将代表产品的图片、产品详情、仅与文章间接相关的补充信息,或访客完成复杂产品订单的进度分开。
一旦所有主流浏览器完全支持这些结构,它们将为网站的未来可用性带来巨大潜力。
我何时可以使用 HTML5?
本文仅涉及 HTML5 的一个方面:新的 HTML 元素。实际上,HTML5 包含了一系列旨在简化 Web 应用开发的新特性,但其中大多数特性距离实用还有相当长的距离。然而,尽管许多浏览器要么不支持这些新元素,要么支持不完整,但这些新元素如今即可使用。
在将结构与表现分离作为构建网站的首选方法——即 CSS 和 HTML(正如你可能听到的描述)——的情况下,只要排除一些不足为奇的例外情况,大多数浏览器是否支持这些元素其实并不构成重大影响。
在大多数情况下,使用 HTML5 元素只需在级联样式表(CSS)中为它们声明一些样式即可。唯一的例外是 Internet Explorer 不会识别它尚未支持的元素的 CSS 声明。因此,需要少量 JavaScript 代码才能使 Internet Explorer 识别这些元素。本文并非深入探讨如何实现此功能或使用 CSS 样式化新元素的合适之处,但以下是一些提供更多信息的资源:
- 为 IE 提供 HTML5 元素识别的 JavaScript
- 是的,你今天就可以使用 HTML5!
- 5doctor 上的 HTML5 文章
- 使用 HTML5 标记的电子商务网站
总结
目前没有任何 HTML5 特性能让你立即将网站推向市场领先地位。你所做的任何尝试可能需要数年时间才能产生足够的市场渗透率从而带来巨大影响。但正如你所知,需求驱动发展。HTML5 在未来带来的好处足够多,因此向供应商和开发人员要求支持是值得的。
“必备知识”系列
- 电商商家需知的五个网页设计概念
- 帮助你的电商业务的五个实用 HTML 标签
- 轻松实现网站兼容性测试
- 图像格式:JPG、GIF 和 PNG 之间有什么区别?

