如何仅用HTML消除按钮链接的超链接下划线？

你用<a>标签包裹按钮时，浏览器会默认给<a>标签添加下划线样式。在不能使用CSS的前提下，可以换一种实现逻辑，直接通过按钮的点击事件完成跳转，彻底规避<a>标签的默认样式问题：

<button onclick="window.location.href='#C1'">First</button>
<button onclick="window.location.href='#C2'">Second</button>
<button onclick="window.location.href='#C3'">Third</button>
<button onclick="window.location.href='#C4'">Fourth</button>

这种写法借助onclick事件调用window.location.href实现锚点跳转，既保留了按钮的原生外观，又达成了链接的跳转功能，同时不会出现超链接下划线。

如果需要兼顾语义化（让屏幕阅读器识别为链接），可以给按钮加上role="link"属性：

<button onclick="window.location.href='#C1'" role="link">First</button>

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