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