语义化html是使用具有明确含义的标签（如、、）准确表达内容结构与角色，而非依赖等无意义标签；其重要性在于提升可访问性、seo效果、代码可维护性、设备兼容性及团队协作效率。
HTML结构化布局不是为了“看起来更规范”，而是让CSS选择器稳定、样式复用可控、多人协作不打架——没做语义化分层的页面，改个页脚样式可能顺手把导航栏撑开。
为什么和不能互换用
浏览器和辅助技术会按语义解析这些标签：main是全页唯一主体内容容器，section是带主题的子区块，必须有标题（h2或更高）。把商品列表塞进main没问题，但若把它拆成“热销榜”“新品上架”两个区块，就得用section包裹，并各自配h2。否则 axe 等无障碍检测工具会报错，CSS 里写 main section:last-child 也容易误命中。
- 违反
main唯一性：多个main会让屏幕阅读器跳过后续内容 - 空
section（无标题）被部分读屏软件忽略，SEO 权重下降 - 用
div替代section后，JS 查询document.querySelectorAll('section')就失效
class="header" 和 标签谁更可靠
靠 class="header" 定位模块，在大型项目里极不可靠：CSS 可能覆盖掉这个 class，设计师改稿时顺手删了 class 却没通知前端，JS 脚本也可能动态移除它。而 header 是标准 DOM 接口，只要结构没动，document.querySelector('header') 就稳稳拿到页眉区域，连注释都不用加。
-
header不限于页面顶部，也可用于文章区块头部，语义更灵活 - 多个
header允许存在（如每篇article都可有自己的header），但页面级header应该只有一个 - IE8 及更早版本不识别
header等新标签，需引入html5shiv，但仅影响样式渲染，不影响 DOM 结构可用性
嵌套超过三层就该警惕
常见反模式：div 包 div 再包 div，最后才塞进一个 article。这种结构导致 CSS 选择器被迫写成 .wrapper .container .content article h2，一旦中间某层 class 名变更，整条链就断。现代布局（Flexbox/Grid）支持扁平结构，article 完全可以直接作为 main 的子元素。
- 理想嵌套深度控制在 3 层内：例如
body > main > article或body > section > article - 用
data-属性替代冗余 class 做模块锚点，比如data-module="product-list"比class="product-list-wrapper"更不易冲突 - DOM 子元素超 50 个时，浏览器重排压力明显上升，建议用
section分块管理长列表
BEM 类名和语义标签不是二选一
语义标签解决“这是什么”，BEM 类名解决“这是哪个模块里的什么”。比如一个卡片组件，用 article 表达它是独立内容单元，再加 class="card card--featured" 描述其视觉变体。两者叠加，既保结构稳定，又留样式扩展空间。
- 避免类名含样式词：
btn-red违反“描述功能而非外观”原则，应改为btn btn--danger -
nav标签下直接用ul+li，不要额外套div class="nav-items" - 团队内统一 BEM 前缀规则，比如所有业务模块加
mod-前缀：mod-search-bar，避免与基础组件类名冲突
最常被忽略的一点：语义标签本身不带默认样式，header 和 div 在渲染上完全一样——别指望换标签就能自动对齐或留白，该写的 CSS 一行都不能少；但换完之后，你再也不用猜“这个 div 到底是不是导航”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
