HTML中没有author标签，<author>是无效写法；正确做法是用<footer>包裹、<span itemscope itemtype="https://schema.org/Person">标记作者并配合itemprop="name"，辅以CSS实现“博主徽章”视觉效果。
HTML里没有author标签，别硬塞
HTML标准里压根不存在专门标“博主”或“作者”的语义化标签，<author>是无效写法，浏览器会直接忽略，还可能触发解析警告。很多人看到“作者徽章”就下意识想自定义标签，结果页面结构失效、SEO丢失、无障碍访问出问题。
正确做法是用已有语义标签组合表达身份归属：
-
<address>：仅适用于联系信息（邮箱、电话、地址），且必须出现在<footer>或<aside>中，不适合日常文章署名 -
<meta name="author">：只对文档级元信息有效，不渲染、不显示，纯供爬虫或编辑器读取 -
<span>+role="author"：能辅助屏幕阅读器识别，但需配合aria-label补全具体名字，否则意义有限
用rel="author"链接到博主主页（已弃用，但仍有遗留场景）
过去Google支持通过rel="author"关联作者Google+主页来增强搜索结果展示，但该机制2014年就停用了。现在仍有人在旧模板里留着这行代码，比如：<a href="/about" rel="author">张三</a>——它不会报错，但也不起任何作用，纯属冗余。
如果你维护的是老项目，检查是否有这类残留；如果是新项目，直接删掉，别为兼容性留坑。
立即学习“前端免费学习笔记（深入）”；
实际显示“博主徽章”的推荐方案
所谓“徽章”，本质是视觉标识，得靠HTML结构 + CSS渲染实现。关键是把“谁写的”这个事实表达清楚，同时让机器可读、人眼可辨：
- 用
<footer class="article-meta">包裹作者信息区域，比<div>更语义化 - 作者名用
<span itemprop="author" itemscope itemtype="https://schema.org/Person">，配合itemprop="name"，方便搜索引擎提取结构化数据 - 加个
<span class="author-badge">博主</span>，CSS控制样式（如小圆角、浅色底、微缩字体），避免用<strong>或<em>硬强调——它们表达语气，不是身份 - 如果多作者，用
<ul class="authors">+ 多个<li>，别堆在一行用/分隔，影响可访问性和翻译
示例片段：
<footer class="article-meta">
<span itemprop="author" itemscope itemtype="https://schema.org/Person">
<span itemprop="name">李四</span>
<span class="author-badge">博主</span>
</span>
</footer>
为什么不用<cite>标作者？
<cite>的本意是“引用来源”，比如书名、文章标题、电影名，不是人名。W3C明确说它不适用于作者姓名。常见错误是写成<cite>王五</cite>，这会让屏幕阅读器念成“引用：王五”，逻辑错乱。
真正该用<cite>的地方是：<p>正如<cite>《HTTP权威指南》</cite>第7章所述…</p>
作者名就老老实实用<span>或<link>（如果指向个人主页），别贪图“看起来像标签”而牺牲准确性。
最常被忽略的一点：徽章文案本身（比如“博主”“官方”“认证”）必须和实际权限一致。前端加个class就能显示“认证”，后端没校验、数据库没字段支撑，反而引发信任问题——技术能画框，但不能代替权责界定。
