语义化html是基础要求而非加分项，直接影响可访问性、seo、css维护和dom查询稳定性；正确使用、、、等标签并验证效果至关重要。
HTML 标签不是“怎么写都行”，而是“用错一个，语义就断一层”。语义化不是加分项，是基础要求——它直接影响屏幕阅读器识别、SEO 权重分配、CSS 可维护性，甚至影响 document.querySelector 的稳定性。
什么时候该用 <section></section> 而不是 <div><p><code><section></section> 表示有独立标题的内容区块，必须能被单独摘出来理解；<div> 是纯容器，无任何语义。滥用 <code><section></section> 会污染文档大纲（document.body.querySelectorAll('section').length 突然变多，但实际并无逻辑分段）。
- ✅ 正确：文章中带
<h2>安装步骤</h2> 的区块 → 用 <section></section>
- ❌ 错误：仅用于 CSS 布局的外层包裹（如
<div class="header-nav">）→ 必须用 <code><div>，不能硬套 <code><section></section> - ⚠️ 注意：
<section></section> 默认不自带 margin/padding，视觉上和 <div> 一样“没样式”，别因看不出区别就乱换<h3>
<code><article></article> 和 <section></section> 的核心区别在哪
<h2>安装步骤</h2> 的区块 → 用 <section></section>
<div class="header-nav">）→ 必须用 <code><div>，不能硬套 <code><section></section><section></section> 默认不自带 margin/padding，视觉上和 <div> 一样“没样式”，别因看不出区别就乱换<h3>
<code><article></article> 和 <section></section> 的核心区别在哪<article></article> 强调“可独立分发、复用”，比如一篇博客、一条微博、一个商品卡片；<section></section> 强调“文档内部逻辑分组”，比如“评论区”“相关推荐”这些依附于当前页面才成立的部分。
- ✅ 正确：
<article></article>里可以嵌套<section></section>（如文章里的“代码示例”小节） - ❌ 错误：把整页导航栏包进
<article></article>—— 导航不是独立内容，也不该被 RSS 抓取 - ? 判断法：把这块 HTML 单独保存为文件，能否脱离原页面被理解？能 →
<article></article>；不能 →<section></section>或<div><h3>为什么 <code><button></button>比<div onclick> 更安全<p>不只是语义问题：<code><button></button>原生支持空格/回车触发、自动获得focus状态、键盘导航可达、屏幕阅读器播报为“按钮”；而<div onclick> 需手动补全所有交互逻辑，漏一项就等于关掉一类用户的入口。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/1547" title="Favird No-Code Tools"><img src="https://img.php.cn/upload/ai_manual/000/969/633/68b7a0e82b449361.png" alt="Favird No-Code Tools" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/1547" title="Favird No-Code Tools">Favird No-Code Tools</a> <p>无代码工具的聚合器</p> </div> <a href="/ai/1547" title="Favird No-Code Tools" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div><pre class="brush:php;toolbar:false;"><!-- ❌ 危险：键盘用户无法用空格触发 --> <div onclick="submitForm()" tabindex="0">提交</div> <p><!-- ✅ 正确：一行解决全部交互需求 --> <button type="button" onclick="submitForm()">提交</button></pre><ul> <li>⚠️ 注意：<code><button></button>在表单内默认type="submit"，不加type="button"可能意外触发表单提交 - ? 扩展：禁用状态统一用
disabled属性，比pointer-events: none更可靠（后者不阻止键盘 focus）
<time></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></time>的刚性使用场景
语义化最常被忽略的点，不是“不知道用什么标签”，而是“改完 HTML 后没验证效果”。用浏览器开发者工具打开 Accessibility 面板，看 role 和 name 是否符合预期；用 document.title + document.body.innerHTML 模拟爬虫视角，检查关键信息是否还在 DOM 主干路径上。
