HTML 无原生分类标签元素，应使用 xxx 或 xxx 实现，兼顾语义、样式与交互，避免误用 、
、id 及 microdata。
怎么用 HTML 给文章打分类标签（不是 SEO 用的 meta）
直接说结论：HTML 本身没有“分类标签”语义元素，
里不能塞
或
这种原生标签。你真正能用的，是靠
、
配合
或
属性来标记，再由 CSS 或 JS 去识别和渲染成标签云。
常见错误是硬套
到页面主体里，或者把分类当关键词塞进
里——这些对前端展示无效，纯属白忙。
是最轻量、最可控的做法
如果分类要跳转（比如点“React”进分类页），就用
别用
categorytagclassdata-*前端
包单个标签——语义重、默认换行、CSS 调整成本高
避免用
id
标分类名（如
id="react"
），因为同一页面可能多个“React”标签，
id
必须唯一
为什么不用 microdata 或 RDFa 做分类标注
microdata（比如
itemprop="articleSection"
）或 RDFa 理论上能表达分类，但实际中几乎没人靠它驱动前端标签云。原因很实在：
浏览器不渲染 microdata 内容，你得写 JS 把它捞出来再插入 DOM，多一层间接性
SEO 效果极弱——Google 已明确表示不依赖 microdata 解析文章分类
维护成本高：改一个分类名，要同步改 HTML 结构 + JS 提取逻辑 + CSS 类名
主流 CMS（如 WordPress、Hexo）导出的分类 HTML，99% 都是
display: inline-flex
或
display: inline-block
控制标签流式排列，别信“用 flex 布局就行”——父容器没设
flex-wrap: wrap
，长标签会溢出
标签字体大小别用固定 px，优先用
em
或
rem
，否则响应式断点下文字挤成一团
如果标签是 AJAX 加载的（比如评论区带标签），记得给容器加最小高度或占位符，否则页面会抖动
超过 20 个标签时，考虑加
max-height
+
overflow-y: auto
，别硬撑着全展开——用户真不会拉滚动条数到第 17 个
服务端生成 vs 前端 JS 渲染标签列表
分类数据来源决定实现方式，不是“哪个高级选哪个”，而是看谁更稳、更容易 debug。
静态站点（Jekyll/Next.js/astro）：服务端模板里循环输出
——最简单，首屏即见，无水合问题
动态 CMS（WordPress REST API / Strapi）：前端用
fetch
拿分类数组，再
map()
成
——注意处理空数组、网络失败、重复渲染
千万别在
useEffect
里反复请求同一篇文章的分类数据，容易触发竞态（race condition），最后显示的是旧分类
如果分类有层级（如 “前端 > JavaScript > React”），别用斜杠拼字符串塞进
data-category
，拆成
data-category="前端" data-subcategory="JavaScript"
更易过滤
复杂点在于：分类名常含空格、中文、emoji，甚至用户手动输错的符号。所以任何基于分类名的 JS 过滤或 URL 拼接，都得先
trim()
、
encodeURIComponent()
、再校验长度——这些细节不处理，上线后第一周就会收报错日志。