a标签禁止嵌套另一个a标签，浏览器会强制截断内层a导致结构错乱；替代方案是用div/span分别包裹独立链接，或通过css定位+z-index模拟视觉嵌套效果。

a标签不能嵌套另一个a标签

浏览器会直接截断内层@#@#@#@#@#@#@#@#@#@0，但开发者工具里只看到一个@#@#@#@#@#@#@#@#@#@1，用户用键盘操作时<button></button>完全失活

为什么不行：两者都声明了“可交互”，但<a></a>负责导航，<button></button>负责操作，混用会让辅助技术无法判断意图

正确做法：如果目标是跳转，就只用<a></a>；如果目标是触发JS行为（如弹窗、表单提交），就用<button></button>并手动加onclick或事件监听；需要按钮外观的链接，用<a></a> + CSS模拟按钮样式

嵌套块级元素（如div）不是语法错误，但有前提

HTML5允许<a></a>包裹<div>、<code><h2></h2>等块级元素，前提是它不破坏文档大纲、不干扰可访问性，且不在<button></button>或<form></form>内部。

• 能用但不推荐的场景：整块卡片作为链接，包含标题、图片、描述——必须确保所有内容共同指向同一目标，且<img>的alt描述的是跳转目标而非画面本身
• 容易踩坑：把多个逻辑不同的操作塞进同一个<a></a>里（比如“查看详情”和“删除”按钮共存），屏幕阅读器会把全部内容读成一条链接，用户无法区分
• 检查要点：用W3C Validator验证；用键盘Tab测试焦点是否自然落到整个区域；用VoiceOver或NVDA朗读，确认输出语义清晰

SVG里的<a></a>和HTML的<a></a>不是一回事

SVG命名空间中的<a></a>是<svg></svg>子元素，只能包裹SVG图形节点（如<circle></circle>、<path></path>），不能塞HTML标签或纯文本。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 常见错误：在<svg></svg>里写<a><div>文字</div></a>，结果整个链接失效，控制台可能报“unknown element”
• 必须满足：href属性值要带协议（如href="https://example.com"），不能用target="_blank"，也不支持rel属性
• 可访问性补救：手动加role="link"和tabindex="0"，否则键盘用户无法聚焦

真正麻烦的从来不是“能不能写”，而是“写了之后用户怎么理解、机器怎么解析”。a标签的嵌套禁忌背后，全是语义、可访问性和浏览器解析规则的硬约束，绕不开，也假装不了。