概述与演进
HTML，即超文本标记语言（HyperText Markup Language），是构建网页内容的标准标记语言。自1991年蒂姆·伯纳斯-李发明万维网以来，HTML经历了数次重大演进。HTML5作为第五次重大修订，由万维网联盟（W3C）与网页超文本应用技术工作小组（WHATWG）共同制定，于2014年正式成为W3C推荐标准。
HTML5的设计哲学强调语义化、兼容性与开放性。与此前版本相比，HTML5不再依赖特定插件即可实现丰富的多媒体呈现，同时引入了大量语义化标签，使文档结构更加清晰，对搜索引擎优化与辅助技术更为友好。其文档类型声明极为简洁——仅需<!DOCTYPE html>即可触发标准模式渲染，这体现了规范制定者对于简洁性的追求。
从技术史角度审视，HTML5的诞生标志着网页从"文档展示平台"向"应用程序平台"的转型。此前，网页主要用于展示静态文本与图片，而富交互应用往往依赖Flash等插件技术。HTML5通过原生支持音视频、画布绘制、本地存储、地理定位等功能，使浏览器本身成为一个功能完备的运行时环境，为后续单页应用的繁荣奠定了坚实基础。
语义化标签
语义化是HTML5最核心的改进之一。在HTML4时代，开发者通常使用<div>与<span>配合class属性来划分页面区域，导致代码中充斥着大量无意义的容器标签。HTML5引入了一系列具有明确语义含义的结构标签，使文档的层次结构一目了然。
主要语义化标签解析
<header>元素用于定义页面或区块的头部区域，通常包含导航链接、标题、标志等内容。一个页面可以包含多个header元素，分别用于页面头部与文章头部。需要特别注意的是，header不能嵌套在footer或address元素内部，也不能作为header或footer的直接子元素出现。
<nav>元素专用于包裹主要的导航链接组。并非所有链接都需要放入nav元素中——只有那些构成主要导航区块的链接才适合使用此标签。辅助技术可以依据nav标签识别页面的主要导航路径，从而为用户提供快捷跳转功能。
<main>元素代表文档的主体内容，一个页面中只能存在一个main元素，且不能作为article、aside、footer、header或nav的子元素。main的内容应当是页面独有的，不应包含重复出现在多个页面中的内容（如侧边栏、导航栏、版权信息等）。
<article>元素表示文档中独立、完整且可独立分发或复用的内容块。一篇博客文章、一个论坛帖子、一则新闻报道都可以使用article标签。article内部可以包含自己的header与footer，形成完整的自包含结构。
<section>元素用于对文档内容进行主题性分组，每个section通常应包含一个标题。与article不同，section强调内容的主题分组而非独立性。当内容本身足够独立、可以单独 syndicate 时，应优先使用article而非section。
<aside>元素表示与页面主要内容间接相关的内容区域，通常以侧边栏形式呈现。其中的内容应当是独立的，即使被移除也不应影响主体内容的理解。典型的aside内容包括引用、广告、相关链接组等。
<footer>元素定义页面或区块的底部区域，通常包含作者信息、版权数据、相关文档链接等。与header类似，一个页面可以包含多个footer元素。
<figure>与<figcaption>元素组合用于包裹独立的流内容单元（如图表、插图、照片、代码片段等），figcaption作为可选的标题或说明文字。这种组合使内容与说明形成了明确的语义关联。
语义化选择原则：当不确定应使用article还是section时，可以问自己——这段内容能否独立存在于另一个上下文中？如果可以，使用article；如果它只是当前文档的一个主题分段，使用section。
文档结构
一个规范的HTML5文档应当具备清晰的层次结构。标准的文档骨架包含文档类型声明、html根元素、head元信息区域与body内容区域。head部分负责提供文档的元数据，包括字符编码声明、视口设置、标题、样式表链接、脚本引用等。
字符编码声明应当尽可能早地出现在head中，理想位置是head的第一个子元素：<meta charset="UTF-8">。视口元标签对于响应式设计至关重要：<meta name="viewport" content="width=device-width, initial-scale=1.0">，它告诉浏览器页面的宽度应当等于设备宽度，初始缩放比例为1。
HTML5的文档大纲算法（Outline Algorithm）基于区块内容元素（sectioning content）构建隐式的文档目录结构。这些区块元素包括article、aside、nav和section，它们各自创建一个新的隐式区块。标题元素（h1至h6）在区块内的层级是相对于其所在区块的，而非整个文档。这意味着在一个article内部使用h1作为标题是完全合理的，它仅表示该article内部的最高层级标题。
然而需要警惕的是，尽管HTML5规范允许在区块元素内嵌套h1，但在实际开发中，为了兼容旧版浏览器和搜索引擎的解析逻辑，许多开发者仍然遵循"一个页面一个h1"的传统做法。更稳妥的做法是根据文档的整体层级结构使用h1至h6，而非完全依赖区块元素的隐式层级重置。
表单增强
HTML5对表单系统进行了全面增强，新增了十余种输入类型、大量属性以及内置验证机制，极大地提升了用户体验并减轻了开发者的负担。
新增输入类型
HTML5引入了email、url、tel、number、range、date、time、datetime-local、month、week、color、search等输入类型。这些类型不仅在移动设备上会唤起对应的优化键盘（如email类型会显示带有@符号的键盘），还提供了原生的格式验证功能。
date与time相关输入类型为用户提供了原生的日期时间选择器，避免了依赖第三方库。但需要注意的是，不同浏览器对这些类型的渲染样式存在差异，在需要统一视觉风格的场景下，开发者可能需要使用自定义组件替代原生控件。
表单验证属性
required属性标记字段为必填项；pattern属性接受一个正则表达式，用于验证输入格式；min与max属性限定数值或日期的范围；step属性定义合法的间隔值；placeholder属性提供输入提示文本。这些属性在表单提交时会触发浏览器的原生验证，并显示相应的提示信息。
novalidate属性可以添加到form标签上，禁用整个表单的原生验证，这在需要完全由JavaScript控制验证逻辑时非常有用。同时，form标签的autocomplete属性可以控制浏览器是否应当自动填充表单字段。
datalist 元素
datalist元素为input元素提供了预定义的选项列表，用户既可以从列表中选择，也可以自由输入其他值。这实现了类似自动补全的功能，且无需任何JavaScript代码。其使用方式是将datalist的id与input的list属性关联。
多媒体支持
HTML5最引人注目的特性之一是原生支持音视频播放，通过audio与video元素，开发者无需依赖任何插件即可在网页中嵌入多媒体内容。
video元素支持MP4（H.264编码）、WebM（VP8/VP9编码）和Ogg（Theora编码）三种主要格式。由于不同浏览器对格式的支持存在差异，最佳实践是提供多种格式的源文件，由浏览器选择其支持的第一种格式进行播放。source子元素用于指定多个备选媒体源。
video元素提供了丰富的控制属性：controls显示播放控件条；autoplay自动播放（需注意现代浏览器对此有严格限制）；loop循环播放；muted默认静音；preload控制预加载策略（none、metadata、auto）；poster设置视频加载前显示的封面图。通过JavaScript API，开发者可以精确控制播放行为，实现自定义播放器界面。
audio元素与video元素共享相似的API和属性，但仅用于音频内容。对于需要在不同时间点触发事件或显示字幕的场景，track元素可以与video配合使用，提供WebVTT格式的字幕、章节或描述信息。
canvas元素是HTML5引入的另一项重要特性，它提供了一个通过JavaScript动态绘制图形的位图区域。canvas可用于绘制图表、制作游戏、处理图像、实现数据可视化等。其2D渲染上下文提供了丰富的绘图API，包括路径、形状、文本、图像、渐变与阴影等。需要注意的是，canvas绘制的内容不属于DOM，因此无法被搜索引擎索引，也不支持事件监听（除非通过额外的坐标计算实现）。
新增API
HTML5规范不仅包含新的元素与属性，还定义了一系列JavaScript API，扩展了浏览器的能力边界。
本地存储：localStorage与sessionStorage提供了在客户端持久化存储键值对数据的能力。localStorage中的数据没有过期时间，除非被显式删除，否则会一直保留。sessionStorage的数据仅在当前会话期间有效，页面会话结束（标签页关闭）时数据即被清除。两者的存储容量通常为5MB至10MB，远超cookie的4KB限制。使用时需注意，存储的数据只能是字符串，复杂对象需要通过JSON.stringify与JSON.parse进行序列化与反序列化。
离线应用：Application Cache（AppCache）曾是HTML5的离线方案，但因其设计缺陷已被废弃。Service Worker是现代推荐的离线方案，它作为一个独立的线程运行在浏览器后台，可以拦截网络请求、缓存资源、推送通知，实现真正的离线应用体验。Service Worker遵循HTTPS协议要求，且生命周期独立于页面。
地理定位：Geolocation API允许网页获取用户的地理位置信息。通过navigator.geolocation对象，可以调用getCurrentPosition获取当前位置，或watchPosition持续追踪位置变化。出于隐私保护，浏览器会在首次请求时向用户征求许可。
拖放API：HTML5定义了一套原生的拖放（Drag and Drop）机制。通过设置draggable属性并监听dragstart、dragover、drop等事件，可以实现元素在页面内或跨页面的拖放操作。dataTransfer对象用于在拖放过程中传递数据。
Web Workers：Web Workers允许在后台线程中运行JavaScript代码，不会阻塞主线程的用户界面渲染。Worker线程无法直接访问DOM，但可以通过postMessage与主线程通信。这对于执行大量计算任务（如数据处理、图像分析）而不影响页面响应性非常有价值。
最佳实践
编写高质量的HTML代码需要遵循一系列最佳实践。首先是可访问性原则：为所有img元素提供有意义的alt文本，为表单字段添加label标签（通过for属性与input的id关联），确保页面可以通过键盘完全操作，为动态内容更新提供ARIA角色与状态提示。
其次是性能考量：将CSS链接放在head中以便浏览器尽早开始渲染，将脚本放在body底部或使用defer/async属性避免阻塞解析。减少不必要的DOM嵌套层级，保持文档结构的扁平化。合理使用data-*属性存储自定义数据，避免滥用class作为数据存储容器。
语义化不仅关乎标签选择，还涉及属性的正确使用。例如，使用button元素而非可点击的div来触发操作，因为button天然支持键盘聚焦与回车触发；使用a元素仅用于导航，使用button用于操作，避免混淆两者的语义。
最后，保持代码格式的一致性，合理使用缩进与空行增强可读性，为复杂的结构添加注释说明。HTML是网页的骨架，良好的结构是后续样式与交互的基础，值得投入时间精心雕琢。