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