什么是HTML5？HTML5的含义、元素和好处

译者 | 李睿

审校 | 孙淑娟

html5是超文本标记语言(HTML)的第五版，网络浏览器使用它来可视化代码。它在网站功能、网页内容开发等方面有一些改进。 ​

HTML的发展 ​

在万维网的早期，主要的网络浏览器创造者（例如微软Inte.NET Explorer和Mosaic Netscape）开发了特定于浏览器的元素，以增强其浏览器的网页外观。到上世纪90年代末，他们为Internet Explorer和Netscape创建了不同版本的网站。 ​

1996年，新成立的万维网联盟(W3C)建议创建HTML3.2。这个标准涵盖了当时常用的HTML元素。它还包括对HTML的表示扩展，例如在Internet Explorer和Netscape“浏览器大战”期间创建的中心元素和字体。 ​

很快出现了HTML 4.0(1998)和HTML 4.01(1999)，它们强调表示和结构的分离，同时增强了可访问性。这些升级在新创建的级联样式表(css)标准下转移了表示元素。 ​

HTML5的出现 ​

在2000年之后不久，Mozilla、Opera和苹果公司联合起来建立了网络超文本应用技术工作组(WHATWG)。这个实体的目标与W3C不同，其目的是增强HTML开发，使该语言能够满足来自实际创作实践和浏览器行为的新需求。WHATWG的最初文档Web Applications 1.0和Web Forms1.0被结合起来建立了HTML5。 ​

如今，WHATWG维持着一个正在使用的HTML标准，不使用数字进行分类。WHATWG的工作也为W3C建立自己的HTML5工作组提供了基础。HTML5在2014年10月正式获得“推荐”的地位。 ​

HTML5标准的规范由两个组织共同维护，这偶尔会导致轻微的不一致。大多数浏览器开发人员依赖WHATWG版本作为实现参考。 ​

HTML 4.01 Strict是HTML5的基础，该版本没有基于表示的元素和其他不推荐的属性。这导致大多数HTML5使用多年前使用的浏览器兼容元素创建。它还引入了许多新元素和全局属性，并使HTML 4.01中许多不推荐使用的属性和元素过时。HTML5的一个关键特性是包含了一个标准协议，用于处理浏览器遗留和格式错误的标记。​

HTML5的独特之处 ​

在这次升级之前，HTML主要关注用于标记网页可视化内容的元素。HTML5通过提供许多完成任务的新方法走在了前面。在以前的HTML版本中，这些任务需要特定的编程或专有插件，例如Silverlight或Flash。 ​

HTML5的特性包括标记和脚本元素，以及用于在页面上添加视频和音频、本地数据存储、离线操作和位置数据使用等功能的应用程序编程接口(API)。HTML5解决了标准的Web开发功能，开发团队不需要为每个应用从头开始创建功能，而是可以依赖于内置的浏览器功能。 ​

HTML5的元素 ​

HTML5引入了许多大多数主流浏览器都支持的新元素。下面列出的是HTML5的关键元素。 ​

（1）<article>​

这个新的元素用于将特定内容标记为文章的一部分。这些内容将独立于网站上的其他内容处理，即使其中可能有重叠。 ​

（2）<aside> ​

该元素除了定义包含在其中的内容之外，还定义了其他内容。它经常用于文档边栏。虽然该元素在浏览器中不以特定形式呈现，但可以使用CSS来设置其样式。​

该元素旨在识别与页面主要内容相关的内容，但不是其主要意图的一部分。例如，可以用它来概括作者信息和“查看更多”链接。 ​

（3）<audio>​

该元素允许用户嵌入页面的声音内容，例如音乐或音频流。<audio>标记与一个或多个<source>标记一起使用，以划分音频源。浏览器将运行第一个受支持的源。支持的音频格式包括MP3、OGG和WAV。如果浏览器不支持该元素，它将显示<audio>和</audio>标记之间的文本。​

（4）<bdi> ​

该元素的名称表示双向隔离。它的功能是隔离一个文本段，该文本段的格式可能与元素外部的文本不同。<bdi>有助于嵌入用户生成的内容，其中包含具有未知方向格式的文本。​

（5）<canvas>​

该元素使用JAVAScript绘制图形(方框、路径、渐变、文本)并向页面添加图像。在默认情况下不包括边框和文本，标记是透明的，仅作为绘制图形的容器。可以使用不同于元素的脚本生成这些图形。如果元素在浏览器中不受支持或JavaScript被禁用，它将在＜canvas＞标记中显示任何文本。​

（6）<data>​

该元素用于向内容中添加机器可读的信息。机器可读的值由数据处理器提供，而人类可读的值也提供给web浏览器来呈现。 ​

（7）<datalist> ​

该元素为元素提供了一个“自动完成”功能，它指定了一个预设选项的下拉列表，当数据输入时，浏览器将在输入数据时向用户显示这些选项。<datalist>元素的id属性必须等于<input>元素的list属性才能绑定它们。​

（8）和 <summary>​

该元素中包含的内容最初是隐藏的，只有在用户希望看到它时才显示出来。它可以包含任何内容。 ​

为此创建了一个用户可以打开或关闭的交互式小部件。这个小部件在默认情况下是关闭的，打开后展开以显示其中的内容。​

＜summary＞标记定义了＜details＞小部件的可见标题，可以与之交互以查看或隐藏内容。​

（9）<dialog>​

这个元素定义了一个对话框或子窗口，使得在网页上很容易生成弹出对话框和模态窗口。 ​

（10） <embed> ​

该元素用于嵌入第三方应用程序，这些应用程序通常采用视频或音频等多媒体内容的形式。它充当用户嵌入插件(如Flash动画)的容器。在HTML5中实现这个元素只需要开始标记。应该注意到，许多现代浏览器不再支持Java插件和applet、ActiveX控件或Shockwave Flash，从而限制了该元素的可用性。​

（11）<figure> 和<figcaption>​

该元素用于指定自包含的内容，如图表、插图、代码列表和照片。其内容与主流有关；然而，它的位置不依赖于主流，如果元素被移除，页面流通常不会受到影响。＜figcaption＞元素允许用户为＜figure＞添加标题。​

（12）<footer>​

该元素为节或页定义页脚。它通常包含作者、联系方式、版权、“返回顶部”链接、网站地图、相关阅读等信息。单个文档可以包含几个＜footer＞元素。联系人详细信息通常插入该元素的<address>标记中。​

（13）<header> ​

该元素通常包含与页面标题和标题相关的信息。通常情况下，它概述了介绍信息或导航链接的容器。它也有助于可视化一个或多个标题元素（从＜h1＞到＜h6＞）、徽标、图标和作者。该元素甚至可以用于包装搜索表单或节的目录。虽然单个文档可以包含许多<header>元素，但<header>标记不能放在<address>、<footer>或其他<header>属性中。​

（14）＜keygen＞​

该元素在表单中用于指定密钥对生成器字段。其目的是为用户提供一种安全的身份验证方法。提交表单后，将生成公钥和私钥。后者存储在本地，而前者传输到服务器，用于创建客户端证书，以便将来对用户进行身份验证。该元素也有助于创建和验证数字签名。​

（15）<main>​

该元素概述了页面的主要内容，这些内容对于特定文档来说应该是唯一的。在文档中重复的内容，如导航链接、边栏、网站徽标、搜索表单和版权数据，不应包含在该元素中。一个文档不能有多个<main>元素，并且该元素不能是<aside>、<article>、<header>、<footer>或<nav>元素的后代。​

（16）<mark>​

该元素定义必须在段落中突出显示或标记的文本。​

（17）<meter> ​

该元素也称为度量，用于在预定义的范围和分数值内定义标量度量。例如，<meter>可以确定硬盘使用情况或查询结果相关性。​

（18）<nav>​

该元素概述了网站中通常用于导航链接的部分，这些链接可以指向当前页面上的其他位置或其他页面。常见的＜nav＞元素包括表、菜单和索引。​

不能将文档中的每个链接都包含在<nav>元素中；与其相反，它只适用于较大的导航链接块。具有类似功能的屏幕阅读器和浏览器可以用来知道何时可以跳过初始内容呈现。 ​

（19）<output>​

该元素表示计算的输出，例如由JavaScript或其他脚本执行的计算。其属性包括for（用于指定计算结果与计算期间使用的元素之间的关系）、form（用于指定输出元素所属的形式）和name（用于命名输出元素）。​

（20）<progress>​

该元素显示任务的进度，例如完成的工作量或下载的持续时间。它通常与JavaScript一起使用。 ​

（21）＜ruby＞、＜rt＞和＜rp＞​

该元素用于指定ruby注释，即附加到主文本的小字体的额外文本。ruby文本的目的是指导用户理解字符的含义或发音（通常用于日语内容）。​

＜ruby＞通常与＜rt＞和＜rp＞一起使用<ruby>包含需要解释的字符，＜rt＞包含要给出的信息，可选的＜rp＞标记用于定义在浏览器不支持常规ruby注释的情况下要显示的内容。​

（22）<section> ​

该元素定义了网页的特定部分，包括页眉和页脚。它用于将页面划分为节和子节，特别是当需要多个页眉、页脚或其他节标记时。它对相关内容的通用块进行分组。​

（23）<svg>​

该元素为SVG图形创建一个容器。它有许多绘制框、路径、圆、图形图像和文本的方法。​

（24）<时间>​

该元素以人类可读格式显示日期和时间，还用于以机器可读格式编码日期和时间数据。它的应用包括生日提醒、安排日历事件和提高搜索引擎结果的质量。​

（25）<video>​

该元素用于在网页中嵌入视频内容。它应该包含＜source＞标记来概述不同的视频源，浏览器将播放第一个支持的源。支持的视频格式包括MP4、OGG和WebM。如果浏览器不支持此元素，它将显示<video>和</video>标记之间的文本。​

（26）<wbr>

该元素的名称表示单词断开机会。它指定文本行中可以根据需要添加换行符的位置。如果使用的单词太长，并且浏览器可能会在错误的位置断开，该元素将很有用。​

HTML5的好处 ​

以上看到了HTML5中引入的元素如何简化多媒体内容的集成并增强语义价值。现在将进一步了解HTML5的好处。​

（1）充实语义​

语义标记描述与特定含义相关联的标记，而不是简单地创建特定的视觉输出。例如，＜h1＞标记清楚地划分了网页的主要标题。虽然可以通过使用相关的格式化标记而不是＜h1＞标记使标题文本加粗和变大来实现相同的输出，但语义含义不会保留。​

以前版本的HTML也有语义标记，如标题标记、链接rel和文档元数据。然而，导航菜单、页面标题和主要内容部分等常见结构元素在语义上没有区别。相反，他们都使用了＜div＞标记。​

HTML5通过一系列新的语义元素来解决这个问题，例如＜header＞、＜main＞、＜section＞、＜nav＞、＜aside＞、＜article＞和＜footer＞。此外，新的内联语义元素（如＜address＞和＜time＞）帮助在线服务（如搜索引擎）快速定位页面上的相关数据。现有的内联标记（如粗体、斜体和下划线）也得到了改进，现在与特定的语义相关联。​

（2）无插件的富媒体体验​

随着互联网速度越来越快，富媒体已经成为在线体验的核心部分。虽然HTML最初作为超文本文档（可能还有一些图像）的标记语言，但HTML5通过＜视频＞和＜音频＞等元素固有地支持富媒体。​

除了功能强大和方便开发人员之外，这个特性还有另一个好处：无插件。Java和Flash等插件的一些缺点包括性能差、用户选项少、安全漏洞和搜索引擎可见性不足。​

此外，HTML5为用户提供了新的表单元素以及与CSS和JavaScript的出色集成，简化了全面的富媒体Web应用程序的创建，而无需依赖插件。​

（3）XML的兼容性​

由于HTML5(也称为XHTML5)的XML序列化，可以使用“更严格” 的XML语法编写代码。这对于喜欢格式良好的XHTML(包括引号括起来的属性值、小写元素名和所有元素的闭包)提供的整洁性的开发人员非常有用。在期望代码与其他XML应用程序一起工作的情况下，HTML5文档必须作为XML服务。​

（4）设计和内容分离 ​

除了鼓励语义标记之外，HTML5不鼓励那些仅用于帮助浏览器可视化内容的无意义标记(例如关于字体、文本颜色、文本对齐等的声明)。该标准已经弃用了许多支持这种可视化的元素，并且少数受支持的特性显示“不推荐实践”警告。 ​

分离设计和内容简化了网站的维护和重新设计，因为CSS处理样式声明。此外，在一个平台上看起来不错的设计决策（比如桌面设备）在另一个平台（移动设备）上也不一定好看。HTML5通过提供语义场景并允许内容适应来解决这一问题。​

（5）可访问性和设计响应性 ​

HTML早期的迭代不能与现代技术众多的屏幕尺寸和纵横比无缝兼容。这包括手机、平板电脑、电子阅读器、辅助技术（例如文本到语音转换器）、屏幕阅读器抑制样式，同时提高文本放大和对比度，盲文翻译。这些技术被试图将样式和设计“硬编码”到页面内容中的标记所阻碍。 ​

然而，由于语义标签和可访问的丰富互联网应用程序(ARIA)，使用HTML5创建可访问和响应的网站要简单得多。例如，屏幕阅读器可以更容易地解释HTML5内容，使视障人士更容易在线浏览。​

（6）应用程序编程接口 ​

早期的HTML规范只记录了语言中允许的元素、值和属性。这种方法适用于简单的文本网站，但对创建需要编程和脚本的基于Web的应用程序没有太大帮助。 ​

HTML5通过定义大量简化与应用程序通信的新API实现了巨大飞跃。它引入了先前需要插件或定制代码的功能API，包括Web存储、拖放、地理定位和微数据。 ​

这有助于标准化特定机制，简化原本复杂的编码任务，并允许开发者添加跨平台浏览器无缝运行的功能。 ​

（7）持久本地存储 ​

作为Cookie和客户端数据库的混合体，HTML5支持本地浏览器存储。该特性允许浏览器同时支持跨多个窗口存储，增强安全性和性能，并确保即使在浏览器关闭后数据也能持久。 ​

持久的本地存储支持离线操作，并防止Cookie删除对浏览器操作造成不利影响，因为大多数现代浏览器都支持由HTML5支持的客户端数据存储。它还允许使用HTML5功能而不是第三方插件的应用程序顺利运行。 ​

结语 ​

技术优先的企业已经在向HTML5过渡，很快，HTML5将成为跨垂直行业的首选标记语言。任何在线优先的企业都不能忽视这一标准，如果它希望保持相关性的话。使用HTML5，你可以充分利用其前沿的用户粘性功能、用户友好性和可访问性！ ​

原文标题：​​What Is HTML5? Meaning, Elements, and Benefits​​，作者：Hossein Ashtari