很多人搜索 HTML，以为自己要学的是标签大全。但真正能让网页变得可维护、可收录、可访问的，不是记住所有标签，而是搭出正确的页面骨架。
一个结构好的 HTML 页面，至少要做到：
- 浏览器能正确渲染
- 搜索引擎能理解主题
- 屏幕阅读器能读出层级
- 后续开发者能看懂结构
如果你刚开始制作网页，可以先看 如何制作一个网页 和 HTML 编辑器新手指南，再用本文补结构基础。
先给结论：HTML 的核心不是标签数量，而是语义关系
一个网页不是一堆 div 的集合，而是一组内容关系：
| 区域 | 语义 | 常用标签 |
|---|---|---|
| 站点头部 | 导航、品牌、入口 | header、nav |
| 主内容 | 当前页面核心内容 | main、article、section |
| 标题层级 | 内容结构 | h1-h6 |
| 辅助信息 | 侧栏、补充内容 | aside |
| 页脚 | 版权、链接、联系方式 | footer |
语义清楚，SEO、可访问性和维护性都会更好。
一、最小 HTML 页面骨架
一个基础页面可以从这段开始：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>页面标题 - 品牌名</title>
<meta name="description" content="用一句话说明这个页面解决什么问题。">
</head>
<body>
<header>
<nav aria-label="主导航"></nav>
</header>
<main>
<h1>页面唯一主标题</h1>
</main>
<footer></footer>
</body>
</html>
这段代码并不复杂，但它包含了语言、视口、标题、描述、导航、主内容这些关键结构。
二、标题层级要表达内容结构
页面应该只有一个主要 h1，它对应当前页面的核心主题。h2 用于主要章节，h3 用于章节下的小节。
错误做法：
- 为了字体大小乱用 h1/h2
- 跳过层级，从 h2 直接到 h5
- 多个模块标题都用 h1
正确思路是：标题标签负责结构，字体大小交给 CSS。
三、为什么不建议全页面 div 化
div 没有语义，只是通用容器。它不是不能用，而是不应该替代所有标签。
过度 div 化会带来：
- 搜索引擎难以判断内容重点
- 屏幕阅读器缺少区域提示
- 开发者看不出模块职责
- 后续样式和交互更难维护
如果一个区域是导航，就用 nav；如果是正文主区域，就用 main；如果是独立文章，就用 article。
四、图片、链接、按钮要写出真实意图
HTML 结构质量不仅体现在大标签，也体现在小元素。
图片
<img src="team.jpg" alt="团队成员正在讨论网站结构草图">
alt 不是关键词堆砌，而是图片无法显示或被读屏软件读取时的替代说明。
链接
链接文案应该说明去哪里，不要写一堆“点击这里”。
按钮
执行动作时用 button，跳转页面时用 a。不要为了样式把所有东西都写成 div。
五、表单结构决定可用性
表单里最重要的是 label、输入控件和错误提示之间的关系：
<label for="email">邮箱</label>
<input id="email" name="email" type="email" autocomplete="email">
<p id="email-error">请输入有效邮箱地址</p>
如果没有 label，用户点击文字不能聚焦输入框，读屏软件也很难说明字段含义。
六、失败案例：页面看着正常，但搜索结果和读屏体验都很差
某个官网视觉上很完整，但代码里所有模块都是 div，标题靠 class 控制大小，没有 h1，图片 alt 全是空，按钮也用 div 模拟。结果搜索引擎很难判断页面主题，键盘用户也很难完成操作。
修复不需要重做设计：
- 补齐 head 里的 title 和 description
- 建立 header/main/footer 结构
- 调整 h1-h3 标题层级
- 为图片、表单、按钮补语义
- 用 CSS 保持视觉不变
七、HTML 结构 Checklist
- 是否设置
lang、charset 和 viewport - 每页是否有唯一清晰的 title 和 description
- 是否有唯一 h1
- 标题层级是否连续表达结构
- 导航、主内容、页脚是否有语义标签
- 图片 alt 是否描述真实内容
- 表单是否有 label 和错误提示关系
- 按钮和链接是否按真实行为选择标签
结语
HTML 的价值不是写出复杂代码，而是给网页建立可理解的骨架。结构清楚，CSS 和 JavaScript 才有稳定的附着点，SEO 和可访问性也不会变成后期补丁。
继续阅读：