语义化结构是组件可维护性的底线，用于可独立分发的内容（如博客正文），用于页面内逻辑分组；必须正确使用等标签并遵守嵌套规则，否则导致无障碍失败与seo稀释。
语义化结构不是样式前提，而是组件可维护性的底线——没选对 <article></article> 还硬套 .card__title，类名再规范也救不回结构失焦。
什么时候该用 <article></article> 而不是 <section></section>
关键看内容是否「可独立分发、可单独引用」。博客正文、新闻条目、产品卡片都满足；而「关于我们」「服务流程」这类页面内逻辑分组，用 <section></section> 更准确。
-
<article></article>内部应有明确标题（<h2></h2>或更高），且允许嵌套<header></header>、<footer></footer>（比如发布时间、作者） -
<section></section>必须有主题，但不要求独立性；它不能替代<main></main>或<aside></aside>的语义角色 - 误用现象：把轮播图容器、筛选条件区全塞进
<article></article>—— 它们既不自包含，也不可被 RSS 抓取
class 命名怎么配合语义标签不打架
BEM 是手段，不是目的。真正要防的是「语义标签 + 表现类名」的双重背叛，比如 <article class="flex-col bg-gray-50"></article>。
- 优先用语义类名：用
.post-card代替.flex-col，用.post-meta代替.text-sm text-gray-500 - 避免在
<nav></nav>上加.float-right—— 导航的定位应由 CSS 逻辑控制，而非类名暴露布局意图 - 当需要变体时，用修饰符强化语义：如
.post-card--featured比.post-card--large更可持续，因为“推荐”是业务属性，“大”是视觉副作用
构建可复用组件时，哪些语义标签不能省略
省略它们等于放弃结构契约。团队协作中，没人会为一个 <div class="header"> 去查文档确认它是否该被屏幕阅读器识别为页眉。
<ul>
<li>每个页面级模块必须有明确角色：<code><header></header>（非仅 logo 区）、<nav></nav>（必须含 <ul><li><a></a></li></ul> 结构）、<main></main>（唯一，且不可嵌套在 <article></article> 内）
<article></article>，内部图文组合优先用 <figure></figure> + <figcaption></figcaption>，而不是 <div class="img-wrapper">
<li>
<code><aside></aside> 不是「放不进 main 的东西」的垃圾桶——它只收与当前上下文相关但非主线的信息，比如术语解释、作者简介、关联链接最常被忽略的其实是嵌套规则：<main></main> 里嵌 <article></article> 合理，但 <article></article> 里再套 <main></main> 就破坏了语义层级；<footer></footer> 必须和它所归属的父元素（、<article></article>、<section></section>）保持逻辑一致。这些不是浏览器报错的点，却是无障碍测试失败和 SEO 权重稀释的源头。
