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