语义化html的核心是用准确标签表达内容角色：nav、main、aside、footer等容器明确区域意图；h1–h6严格层级构建大纲；ul/ol表集合，table表二维数据；em、strong、time等传达语言或机器可读语义。
语义化 HTML 的核心不是堆砌标签，而是让每个元素准确表达其内容角色——结构清晰自然带来易维护性，无需额外注释或文档也能一目了然。
用对语义容器，页面骨架就稳了
避免通篇 div 套 div。导航用 nav，主内容用 main，侧边栏用 aside，页脚用 footer。浏览器、屏幕阅读器和开发者都能立刻识别区域意图。
- 一个页面只应有一个 main 元素，代表核心内容流
- section 用于逻辑分组（如“产品特性”“客户评价”），需有明确主题和标题
- article 表示可独立分发的内容单元（博客条目、新闻稿），可嵌套在 section 或 main 中
标题层级不跳级，大纲自动生成
用 h1–h6 构建内容层次，而非控制字号。现代浏览器和开发工具能直接解析出文档大纲（DevTools → Accessibility → Outline），跳级（如 h1 后接 h3）会破坏结构逻辑，也影响 SEO 和辅助技术理解。
- 每个页面一个 h1，通常是主标题
- 子模块用 h2，子模块内的小节用 h3，依此类推
- 样式统一通过 CSS 控制，不依赖标签默认大小
列表与表格各司其职，别硬凑
用 ul/ol 表达项目集合，用 table 表达二维关系数据。把导航菜单写成 div + span 再用 CSS 排版，不如直接用语义化的 nav + ul；把价格对比做成一堆 div 栅格，远不如带 caption、thead、tbody 的表格来得清晰可靠。
- 无序列表（ul）适合并列项，有序列表（ol）强调顺序或步骤
- 表格必须包含 caption（说明表意）和表头（th），必要时用 scope 属性关联单元格
- 纯布局目的请用 CSS Grid 或 Flexbox，HTML 只负责内容结构
内联语义不靠 class，靠原生标签
强调语气用 em，重要性强调用 strong，删除文本用 del，插入文本用 ins。这些不是“加粗”或“斜体”的视觉指令，而是传达语言意图的信号。
- time 包裹日期时间，支持机器解析（如日历应用抓取）
- address 仅用于联系信息，不是所有地址都适用
- 避免用 b 和 i 替代 strong 和 em，它们已失去语义，仅保留样式含义
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
