如何在外层已加链接的文章区块内添加独立跳转的按钮链接

HTML 规范明确禁止 <a> 标签互相嵌套，嵌套后浏览器会自动解析为并列的 <a> 元素，导致跳转逻辑混乱。你需要实现「点击文章大部分区域跳转详情页、内部分类/作者按钮可独立跳转」的效果，仅用纯 HTML 就可以实现，不需要用到 CSS，核心思路是拆分原来的外层跳转链接：

具体修改逻辑 #

• 移除包裹整个 <article> 的外层 <a> 标签
• 将原本外层的文章跳转链接，分别套在需要触发文章跳转的元素上：头图、文章标题、「Read Article」文本
• 保留内部的分类、作者独立跳转链接，不会和其他跳转逻辑冲突

修改后的合规代码示例 #

<article>
    <!-- 头图绑定文章跳转 -->
    <a href="https://www.pcfinancial.ca/en/learning-hub/blog/introducing-the-new-pc-money-account/" target="_blank" title="Link to Article">
        <img src="images/first-article.png" alt="Introducing the new PC Money Account">
    </a>
    <!-- 分类独立跳转链接 -->
    <p><a href="https://www.pcfinancial.ca/en/learning-hub/blog/category/fuel-financial-fluency/" target="_blank" title="Fuel Financial Fluency">Financial Fluency</a></p>
    <!-- 标题绑定文章跳转 -->
    <h3>
        <a href="https://www.pcfinancial.ca/en/learning-hub/blog/introducing-the-new-pc-money-account/" target="_blank" title="Link to Article">
            Introducing the new PC Money&trade; Account
        </a>
    </h3>
    <!-- 作者独立跳转链接 -->
    <p><a href="https://www.pcfinancial.ca/en/learning-hub/blog/author/pc-financial-team/" target="_blank" title="Link to Author">By PC Financial Team</a></p>
    <!-- Read Article 绑定文章跳转 -->
    <p>
        <a href="https://www.pcfinancial.ca/en/learning-hub/blog/introducing-the-new-pc-money-account/" target="_blank" title="Link to Article">
            Read Article
        </a>
    </p>
</article>

以上代码完全符合 HTML 规范，实现的效果和目标站点完全一致：点击头图、标题、「Read Article」文本会跳转文章详情页，点击「Financial Fluency」分类、作者名称会触发对应的独立跳转。

内容的提问来源于stack exchange，提问作者mmeow