语义化HTML是基础要求而非加分项，直接影响可访问性、SEO、CSS维护和DOM查询稳定性；正确使用、、、等标签并验证效果至关重要。
HTML 标签不是“怎么写都行”，而是“用错一个，语义就断一层”。语义化不是加分项，是基础要求——它直接影响屏幕阅读器识别、SEO 权重分配、CSS 可维护性，甚至影响 document.querySelector 的稳定性。
什么时候该用 是纯容器，无任何语义。滥用 document.body.querySelectorAll('section').length 突然变多，但实际并无逻辑分段）。
- ✅ 正确：文章中带
安装步骤
- ❌ 错误：仅用于 CSS 布局的外层包裹（如
）→ 必须用 ，不能硬套 - ⚠️ 注意：
一样“没样式”，别因看不出区别就乱换
- ✅ 正确：
- ❌ 错误：把整页导航栏包进
- ? 判断法：把这块 HTML 单独保存为文件，能否脱离原页面被理解？能 →
为什么 更安全不只是语义问题：focus 状态、键盘导航可达、屏幕阅读器播报为“按钮”；而 需手动补全所有交互逻辑，漏一项就等于关掉一类用户的入口。立即学习“前端免费学习笔记（深入）”；
提交
- ⚠️ 注意：
type="submit"，不加 type="button" 可能意外触发表单提交
- ? 扩展：禁用状态统一用
disabled 属性，比 pointer-events: none 更可靠（后者不阻止键盘 focus）
Google 明确在结构化数据文档中列出
- ✅ 必须写
datetime 属性，且格式为 YYYY-MM-DD 或 YYYY-MM-DDThh:mm（ISO 8601）
- ❌ 不要写
datetime 无法标准化
- ? 场景：新闻发布时间、活动开始时间、版本更新日志，都是
语义化最常被忽略的点，不是“不知道用什么标签”，而是“改完 HTML 后没验证效果”。用浏览器开发者工具打开 Accessibility 面板，看 role 和 name 是否符合预期；用 document.title + document.body.innerHTML 模拟爬虫视角，检查关键信息是否还在 DOM 主干路径上。
不只是语义问题： 立即学习“前端免费学习笔记（深入）”；
Google 明确在结构化数据文档中列出 语义化最常被忽略的点，不是“不知道用什么标签”，而是“改完 HTML 后没验证效果”。用浏览器开发者工具打开 表示有独立标题的内容区块，必须能被单独摘出来理解； 会污染文档大纲（document.body.querySelectorAll('section').length 突然变多，但实际并无逻辑分段）。
安装步骤
默认不自带 margin/padding，视觉上和
和 的核心区别在哪 强调“可独立分发、复用”，比如一篇博客、一条微博、一个商品卡片； 强调“文档内部逻辑分组”，比如“评论区”“相关推荐”这些依附于当前页面才成立的部分。
里可以嵌套 （如文章里的“代码示例”小节） —— 导航不是独立内容，也不该被 RSS 抓取；不能 → 或 为什么
比 原生支持空格/回车触发、自动获得 focus 状态、键盘导航可达、屏幕阅读器播报为“按钮”；而
在表单内默认 type="submit"，不加 type="button" 可能意外触发表单提交
disabled 属性，比 pointer-events: none 更可靠（后者不阻止键盘 focus）
标签不是摆设，它真被搜索引擎解析 作为日期信号源；不用它，仅靠文本“2024年5月20日”，爬虫可能识别失败或归类为普通字符串。
datetime 属性，且格式为 YYYY-MM-DD 或 YYYY-MM-DDThh:mm（ISO 8601） —— “昨天”是相对时间，datetime 无法标准化 的刚性使用场景Accessibility 面板，看 role 和 name 是否符合预期；用 document.title + document.body.innerHTML 模拟爬虫视角，检查关键信息是否还在 DOM 主干路径上。
