HTML语义化是用正确标签表达内容角色，如<header>代表页头、<nav>承载导航、<article>包裹可独立分发的内容；否则将损害无障碍访问、SEO效果及代码可维护性。
语义化不是“写得好看一点”，而是让 <header> 真的代表页头、<nav> 真的承载导航、<article> 真的包裹独立内容——否则，屏幕阅读器读不出来，搜索引擎抓不准，连你自己半年后回来改代码都得先猜三分钟。
为什么 <div class="main"> 比 <main> 更容易出问题
用 <div class="main"> 不会报错，但等于主动放弃浏览器和辅助技术的默认支持：
- 屏幕阅读器无法识别该区域是页面主体，用户不能用快捷键（如 JAWS 的
Ctrl+Alt+M）直接跳转到<main> - 搜索引擎可能将它和一堆无关的
<div>一并忽略，降低正文内容的权重 - CSS 中若写
main { display: block; }，在旧版 IE（如 IE11）里需要额外 polyfill 才能生效，而<div>天然兼容——但这不是优势，是退化 - Vue/React 组件中若用
<div role="main">模拟，不如直接用原生<main>简洁且无 ARIA 维护负担
<section> 和 <article> 到底怎么选
两者都表示“内容区块”，但语义边界很关键：
-
<article>：内容必须能独立存在、可被单独分发或重用。比如一篇博客、一条新闻、一个用户评论——复制粘贴到 RSS 或邮件里依然成立 -
<section>：只是逻辑分组，不强调独立性。比如“产品特性”“客户评价”“技术参数”这些同属一页的子模块，用<section>更准确 - 错误用法：
<section>包裹整篇博客（应为<article>），或把导航菜单塞进<article>（它既不独立也不可分发） - 嵌套规则：
<article>内部可以有多个<section>，但<section>里放<article>要谨慎——除非真是“一组独立文章”，比如首页的“最新三篇文章”列表
标题层级（<h1>–<h6>）断层为什么比样式错更致命
视觉上用 CSS 把 <h3> 改成大号粗体，看起来没问题；但语义断层会直接破坏结构理解：
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器依赖标题层级生成文档大纲（Document Outline），跳过
<h2>直接写<h3>，会导致大纲出现“悬空”节点 - 搜索引擎可能判定内容结构混乱，降低页面可信度评分
- 某些无障碍测试工具（如 axe）会直接报
heading-order错误，影响合规审计 - 正确做法：以内容逻辑定层级，而非字号。首页
<h1>是站点名，文章页<h1>是标题，其下小节用<h2>，子项用<h3>，中间不跳级
真正难的不是记住哪些标签可用，而是每次写 <div> 前停半秒：这里有没有更精确的语义？如果答案是否定的，那才用 <div>——否则，就是把技术债悄悄塞进了 HTML。
