<a> 标签没有 href？现代前端常被忽视的坑与正确做法
在 HTML 中，<a> 标签用于定义超链接，指向页面内或外部资源。但当它没有 href 属性时，行为会发生根本性变化。这是现代前端开发中非常常见却容易被忽略的细节，影响聚焦、无障碍体验和 SEO。
1. 无法聚焦（Keyboard Accessibility）
HTML 元素的可聚焦性决定了用户是否能通过键盘操作访问，例如使用 Tab 键切换：
- 带
href的<a>：自动加入 Tab 顺序 → 用户可键盘访问 - 无
href的<a>：默认 不可聚焦 → 用户无法通过键盘访问
影响：依赖键盘操作的用户（如视障者或无法使用鼠标的人）无法操作，违反无障碍设计原则。
2. 无障碍技术无法识别（Screen Reader）
现代网站强调无障碍：
- 带
href的<a>：屏幕阅读器识别为 link → 用户知道这是可点击链接 - 无
href的<a>：通常被当作 普通文本 或<span>→ 用户无法获知这是链接
影响：依赖辅助技术的用户无法完成导航或交互，体验下降。
3. SEO 分数降低
搜索引擎依赖 <a> 构建站内链接关系：
<a href="...">：搜索引擎索引目标 URL，传递权重<a>无href：搜索引擎忽略 → 链接无法传递权重
影响：页面内链接策略失效，SEO 效果受损。
4. Lint 工具报错（代码规范）
在 React/JSX 或现代前端项目中，常用 eslint-plugin-jsx-a11y 检查：
- 检测
<a>是否缺少href或交互事件 - 没有
href会报错：
jsx-a11y/anchor-is-valid
目的：提醒开发者遵守可访问性标准，防止不可聚焦或屏幕阅读器无法识别。
5. 为什么会出现这个错误？
有时会将 <a> 当作“按钮”使用：
<a>按钮</a>
实际上它只是一个语义不正确的 span：
- 外观可能像按钮
- 交互需额外 JS
- 无法继承链接的聚焦、无障碍与 SEO 优势
6. 正确的解决方式
方案一：明确添加 href（跳转行为）
<a href="/target-page">按钮</a> <!-- -->
方案二：改用 <button> 或 <span role="button">（触发 JS）
<button type="button" onclick="doSomething()">按钮</button>
或
<span role="button" tabindex="0" onclick="doSomething()">按钮</span> <!-- 可聚焦，屏幕阅读器可识别 -->
方案三：结合样式控制外观
保持视觉一致，通过 CSS 调整样式，不要滥用 <a> 当作按钮。
7. 总结
- 没有
href的<a>并非真正的“链接” ，在聚焦、无障碍和 SEO 上都会失效。 - 这是现代 Web 中非常常见但容易修复的错误。
- 正确选择标签：跳转 →
<a>，交互 →<button> - 遵守语义化 HTML 与无障碍规范，可提升 用户体验、SEO 和代码质量。
