HTML 通过元素表达网页内容的含义和关系。浏览器解析文档后会建立文档对象模型，也就是常说的 DOM。CSS 和 JavaScript 可以基于这个结构设置样式和交互，辅助技术也会利用元素语义帮助用户理解页面。
文档的基本骨架
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>页面标题</title>
</head>
<body>
<main>主要内容</main>
</body>
</html><!doctype html> 让浏览器使用标准模式解析页面；lang 声明文档的主要语言；字符编码声明应放在文档头部较前的位置。视口设置使移动浏览器按照设备宽度布局页面。
选择有含义的元素
header 表示页面或内容区的引导部分，nav 用于主要导航链接，main 包含页面独有的主要内容，article 适合相对独立、可单独理解的内容，footer 表示页脚或内容区尾部。
div 和 span 本身没有特定语义，适合在没有更准确元素时作为分组容器。选择元素时应先问“这段内容是什么”，而不是“希望它看起来怎样”。视觉效果交给 CSS 处理。
标题形成内容提纲
h1 到 h6 表示不同层级的标题，不代表固定字号。页面主标题通常使用 h1，其下的主要部分使用 h2，再细分时使用 h3。标题层级清楚，读者和辅助技术都更容易浏览内容。
链接、按钮与表单各有职责
跳转到另一个地址应使用带有 href 的链接；执行当前页面中的操作应使用 button。不要用无法通过键盘自然操作的普通容器模拟按钮。表单控件还应有可识别的标签，通常通过 label 与控件关联。
结构清晰带来的好处
- 关闭样式后，内容依然保持合理的阅读顺序；
- 键盘与屏幕阅读器用户能更容易找到页面区域；
- 搜索工具更容易理解页面主题；
- 样式和脚本可以依托稳定结构，减少不必要的特殊处理。
语义化并不要求把每个容器都换成专用标签，而是让重要内容获得准确的结构。先写出自然的文档顺序，再逐步增加视觉布局和交互，通常更容易得到可靠的页面。