semantic ui在html标签语义化上优于bootstrap，推荐用于重视可访问性与seo的项目；前者倾向原生语义标签如、并命名贴近自然语言，后者依赖class控制且不强制语义结构，需手动补全aria属性与标签替换。
如果您在选型前端 UI 框架时关注 HTML 结构的语义表达能力，会发现 Bootstrap 与 Semantic UI 在标签使用、class 命名逻辑及可访问性支撑上存在系统性差异。以下是针对二者在设计语义化维度上的具体对比分析：
一、HTML 标签层面的语义化实践
语义化标签直接影响屏幕阅读器解析、SEO 层级识别与 DOM 可维护性。Bootstrap 默认不约束容器元素类型，而 Semantic UI 在组件封装中更倾向原生语义标签。
1、Bootstrap 官方文档中导航栏示例为 <div class="navbar"></div>，未强制要求使用 <nav></nav> 标签；若开发者未主动替换，该区域将缺失导航角色语义。
2、Semantic UI 的 <div class="ui menu"> 示例虽允许，但其核心组件（如 button、menu、header）官方推荐直接使用 <code><button class="ui button"></button> 或 <nav class="ui menu"></nav>，天然携带语义上下文。
3、当需满足 WCAG 2.1 导航标准时，仅添加 class="navbar" 不等于具备导航语义，必须配合 。
二、Class 命名体系的语义承载能力
class 名称是否“语义”，取决于其是否表达内容意图或行为角色，而非是否贴近自然语言。两种框架在此路径上采取不同抽象策略。
1、Bootstrap 的 btn btn-primary 将按钮抽象为“主操作控件”，强调功能角色而非具体用途；该组合对顺序不敏感，btn-primary btn 仍可正常渲染。
2、Semantic UI 的 ui primary button 更贴近自然语言结构，但类名顺序严格不可调换：ui button primary 有效，ui primary button 失效，否则样式规则无法匹配。
3、处理禁用状态时，Bootstrap 使用 btn btn-primary disabled 即可生效；Semantic UI 需写全 ui disabled primary button，class 数量随状态叠加线性增长，HTML 冗余度显著升高。
三、无障碍支持的实现机制差异
语义化标签仅为无障碍基础，真正的可访问性依赖 role、aria-* 属性及键盘交互支持，而两者均不自动注入关键属性。
1、Bootstrap 下拉菜单默认无 role="menu"，也未设置 aria-haspopup 与 aria-expanded，需开发者手动补全。
2、Semantic UI 的模态框（modal）不会自动添加 role="dialog"、aria-modal="true" 或焦点捕获逻辑，若未手动声明，键盘 Esc 键无法关闭，且屏幕阅读器无法识别对话框上下文。
3、使用 <div class="ui input"> 替代 <code><input> 会导致原生表单语义丢失，必须外层包裹 。
四、响应式与布局语义的耦合程度
栅格系统是否具备语义表达力，影响开发者对布局意图的理解效率与错误排查成本。
1、Bootstrap 的 container、row、col-md-6 是功能导向命名，明确表达“容器—行—中屏占6列”的布局动作，无需理解 flex 或 grid 原理即可完成响应式切分。
2、Semantic UI 的 ui grid 体系虽提供 stackable、mobile only 等修饰类，但其断点控制隐含在 JS 初始化中，CSS 类本身不暴露媒体查询意图，调试时难以定位响应失效原因。
3、当出现 col-6 在移动端未单列显示时，Bootstrap 的典型原因是遗漏外层 row（导致负 margin 失效）；Semantic UI 则常因 stackable 类未被 JS 激活而静默失败。
五、定制化过程中的语义保全难度
项目演进中常需覆盖默认样式，此时语义结构是否易于剥离样式、独立维护，成为长期成本关键。
1、Bootstrap 支持 SCSS 变量与 mixin 全链路定制，$enable-important-utilities: false 等开关可禁用侵入性规则，保留原始语义标签结构不受干扰。
2、Semantic UI 的 CSS 体积默认比 Bootstrap 大约 12%，尤其启用全部模块后，大量嵌套选择器（如 .ui.menu .item a）使局部样式覆盖需更高权重，易引发 !important 滥用，间接破坏语义与样式的解耦原则。
3、若团队已建立 HTML5 语义规范，Bootstrap 要求开发者主动将 div.container 替换为 main.container 或 section.container；Semantic UI 因默认使用 <section class="ui segment"></section> 等结构，初始语义密度更高，但深度定制时更易因 class 顺序错乱导致样式坍塌。
