HTML语义化标签编码规范与审查要点-html教程-PHP中文网

html语义化是让标签真实反映内容角色，而非视觉替换；main必须唯一且不嵌套，nav仅用于主导航，article须可独立分发，aside限相关补充信息，time需合法datetime值，标题层级须严格递进，img必有alt，表单控件须与label显式关联。

html语义化标签编码规范与审查要点

HTML语义化不是“把 div 换成 section 就完事”，而是让每个标签真实反映它包裹内容在整页中的角色。用错标签比不用更糟——比如把页脚链接塞进 nav，或给轮播图容器套 main，反而会误导屏幕阅读器和搜索引擎。

哪些标签必须严格按角色使用，不能“看着像就套”

语义标签失效的常见起点，就是脱离上下文强行替换。关键不是“能不能用”，而是“该不该用”：

main 只能出现一次，且不能嵌套在 article、aside、footer 内部；它代表整个页面唯一的核心内容流，不是“视觉上最显眼的区域”
nav 仅用于主导航（如顶部菜单、左侧栏目导航），页脚的“关于我们”“加入我们”列表属于普通链接集合，用 ul + li 即可，不必硬套 nav
article 必须是能独立分发、被单独引用的内容单元（如一篇博客、一条新闻、一个用户评论），不能用来包首页的多个卡片或广告位
aside 是与主内容相关但可独立存在的补充信息（如侧边栏作者简介、相关文章推荐），不是所有“在右边的 div”都算 aside
time 必须带 datetime 属性，且值为合法机器可读格式（如 2026-08-25），不能只写中文“2026年8月25日”就当语义化了

标题层级和 `h1`–`h6` 的硬性约束

标题结构是语义骨架中最易被破坏的一环，错误会直接导致大纲混乱、SEO降权、辅助技术误读：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

每个页面有且仅有一个 h1，它是整页最高主题，不是“最大的字”
子级标题必须连续递进：h1 → h2 → h3，禁止跳级（如 h1 后直接 h4）或倒退（如 h2 下再用 h1）
h1–h6 不是样式工具，禁止用 CSS 改变字号/粗细来模拟标题；也不允许在标题内嵌套 p、div 或列表
同一层级的标题应语义等价，例如两个 h2 应同属一个逻辑模块（如“产品功能”“客户案例”），不能一个是章节名、一个是按钮文字

审查语义化是否落地的三个实操检查点

靠肉眼扫代码容易漏掉隐性错误，建议结合工具+人工聚焦以下三处：

打开浏览器开发者工具的「Accessibility」面板，看「Document Outline」是否生成合理层级；若全是“generic”或缺失 h1，说明标题或语义标签未生效
用 W3C Markup Validation Service 提交 HTML，重点看警告（Warning）而非仅错误（Error）——例如 “nav element has no heading” 就提示你该加 h2 作为导航标题
关掉 CSS 查看纯 HTML 渲染效果：如果结构仍能清晰传达内容关系（如导航可识别、文章段落分明、图片有文字描述），才算真正语义化到位

`img`、`figure` 和表单控件的不可妥协项

这些元素的语义缺失直接影响可访问性和基础功能，没有商量余地：

所有 img 必须含 alt 属性：alt="公司Logo" 或纯装饰图写 alt=""（空字符串，不能省略）
带说明文字的图片（如图表、截图、引用图）必须用 figure + figcaption 包裹，不能只靠 p 标签写说明
表单中每个 input、select、textarea 都需与 label 显式关联（用 for/id 或嵌套方式），不能只靠视觉对齐
fieldset + legend 必须用于逻辑分组的表单控件（如多选性别、地址类型），不能只为了加个边框而滥用

最容易被忽略的是语义的“粒度”——section 不是万能占位符，它需要有明确的主题和内在逻辑；满屏 section 和满屏 div 在语义层面毫无区别。判断标准只有一个：删掉所有 CSS 和 JS，仅靠标签本身，能否让一个新来的开发者或一台爬虫准确说出这块内容在整个页面里“是干什么的”。