HTML5语义化与CSS组件库分工明确、互相支撑：语义化定义“说什么”，组件库负责“怎么说”；必须前置语义结构，组件库仅增强表现力而不替代语义标签。
HTML5 语义化不是“加点标签就完事”的装饰动作，它和现代 CSS 组件库（如 Tailwind、Bootstrap 5+、Chakra UI、Ant Design 的底层结构）是分工明确、互相支撑的关系：语义化负责“说什么”，组件库负责“怎么说”。协同的关键，在于不破坏语义骨架的前提下，用组件库的工具去增强表现力，而不是用样式类覆盖或绕过语义结构。
语义结构必须前置，不能由组件库生成
组件库再强大，也不能代替你决定页面的逻辑骨架。比如：
-
header 和 main 必须由开发者手写在 HTML 中，且 main 必须是 body 的直接子元素——Tailwind 的
container或 Bootstrap 的.container只能作为其内部的布局容器，不能替代它们。 - 一个卡片组件（Card）若表示一篇独立文章，应包裹在 article 内，而不是仅靠
class="card"暗示；否则屏幕阅读器只会读成“div”，失去内容可识别性。 - 导航菜单用 nav 包裹，内部用
ul/li/a结构，再配合 Chakra 的Menu或 AntD 的Menu组件——组件提供交互和动效，nav 提供语义锚点。
CSS 类名要服从语义，而非覆盖语义
很多开发者习惯给 div 加一堆 utility class（如 flex flex-col p-4 bg-white rounded），却忽略它本该是什么。正确做法是：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 先选对语义标签：section 表示主题区块，aside 表示辅助信息，footer 表示页脚内容；再在其上叠加 utility class 做视觉修饰。
- 避免用
class="header"去模拟 header 的行为——这会让辅助技术完全失效。组件库提供的“header”类（如 Bootstrap 的.navbar）应只用于样式，不用于替代语义标签。 - Tailwind 的
sr-only、visually-hidden等无障碍类，正是为配合语义结构服务的，比如隐藏视觉标题但保留给屏幕阅读器读取。
组件库的“封装”需保留语义穿透能力
React/Vue 中的 UI 组件（如 <Card>、<Navbar>）如果内部用 div 实现，默认会丢失语义。解决方法有：
立即学习“前端免费学习笔记（深入）”；
- 提供
asChild或as属性（如 Radix UI、shadcn/ui 支持），允许开发者传入 article、nav 等原生标签，让语义“透进来”。 - 组件文档明确标注默认渲染标签，并说明如何替换（例如 Ant Design 的
Menu默认是 nav，而Layout.Header是 header）。 - 避免过度抽象：一个“通用容器组件”不应叫
<Box>就完事，而应支持role或as显式声明语义意图，尤其当它承载主要内容时。
响应式与无障碍，语义是底层前提
CSS 媒体查询、Flexbox/Grid 布局、焦点管理这些能力，都依赖正确的 DOM 结构才能生效：
- 屏幕阅读器按语义顺序朗读，不是按视觉位置。如果 main 被 Flex 排到视觉最右，只要它在 DOM 中位于 nav 之后，逻辑流就不会乱。
- 键盘 Tab 顺序由 HTML 源码顺序决定。用 CSS
order或 Grid 的grid-area调整视觉位置时，不能把 main 移到 header 前面，否则会破坏可访问性。 - 组件库的暗色模式切换、字体缩放支持等特性，只有建立在语义清晰的结构上，才能稳定适配不同用户环境。
