href 带有“#”，这是不好的做法吗？
CSS 标记侦探 建议在存在带有 href=# 的链接时改进标记。
href=# 是一种不好的做法还是不好的标记？在某些情况下，尤其是。对于不引人注目，这是唯一的方法，对吧？
这是一个需要改进的例子：
<a href="#">Cancel</a>
The CSS Markup Detective suggests to improve the markup when there are links with href=#.
Having href=# is a bad practice or bad markup? In some situations, esp. with respect to unobtrusive this is the only way, right?
Here is an example that needs to be improved:
<a href="#">Cancel</a>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
这被认为是一种不好的做法，因为如果没有 JavaScript，它就毫无意义。如果您的链接仅包含 # 作为 href，那么您可能在与该链接交互时依赖 JavaScript 来执行。因此，基本上，您应该执行以下操作之一：
创建一个模仿 JavaScript 执行操作的正确 URL。这允许禁用 JavaScript 的用户仍然可以访问该功能。如果启用了 JavaScript，您只需拦截点击，取消默认操作（导航到链接 URL），然后执行通常的渐进增强逻辑。
如果您没有后备方案或无法在没有 JavaScript 的情况下使用该功能，请在页面加载时使用 JavaScript 动态添加链接。这样，禁用 JavaScript 的用户将无法看到对他不起作用的链接。您可以将其与
标记结合起来，以通知用户由于禁用了 JavaScript，他错过了您网站的某些功能。It's considered a bad practice since it is meaningless without JavaScript. If you have links with only a # as the href, then you are probably relying on JavaScript to execute when that link is interacted with. So basically, you should do one of the following things:
Create a proper URL that mimics the action that the JavaScript would do. This allows users with JavaScript disabled to still access the functionality. If JavaScript is enabled, you can just intercept the click, cancel the default action (navigation to the link url), and do your usual progressive enhancement logic.
Add the link dynamically with JavaScript upon page load if you don't have a fallback or can't make that functionality work without JavaScript. This way a user with JavaScript disabled will not be able to see links that won't work for him anyway. You could couple this with
<noscript>tags to inform the user that he is missing out on some of the functionality of your site by having JavaScript disabled.我不认为这是一个不好的做法。最后，在生产时将其保留是一种不好的做法。如果您在页面内使用标签，这也是一个很好的做法。
I don't think it's a bad practice. Just to leave it when in production, finally, is a bad practice. And if you are working with labels inside the page, it's a good practice too.
我使用 href="javascript:;"如果需要的话。使用 href="#" 会将锚点视为当前页面内的锚点，并可能导致不良行为（例如单击时窗口/框架滚动到顶部）。
I use href="javascript:;" if this is required. Using href="#" treats the anchor as an anchor within the current page and can cause undesired behavior (such as a window/frame scrolling to the top on click).
这不是一个坏习惯，而且比
href='javascript:;'更好。如果要阻止页面“跳转”，请取消 click 事件的传播或从 onclick 函数返回 false。It's not bad practice, and it's better than
href='javascript:;'. If you want to stop the page from 'jumping' cancel the propagation of the click event or return false from the onclick function.从可访问性的角度来回答，这取决于您对锚元素所做的事情。
引用 2024 年现行 HTML 规范的摘录...
链接
href属性表示 超链接，其中是...特别是§7.4。 6.4 滚动到片段 定义了
所需的行为（强调我的）：因此，
转到页面顶部具有非常明确定义的调用滚动的本机行为事件到文档顶部。请注意，此事件遵循 scroll-behavior CSS 属性，负责任的前端开发人员已将其配置为遵循 prefers-reduced-motion: reduce< /strong>。如果您的目的是通过标记良好的超链接负责任地将最终用户滚动回页面顶部，那么这几乎肯定是最佳实践。
...然而，使用 javascript 来破解
href="#"的功能几乎可以肯定是一种糟糕的做法，因为它改变了明确定义的用户期望单击此类链接来执行的本机行为，并且可能会绕过运动敏感用户在其系统上配置的可访问性首选项。事实上，我质疑使用 javascript 来有效取消现代前端开发中的任何链接行为。通常，如果需要执行不导航到资源的自定义 javascript 操作，则使用
此外，如果使用 JavaScript 通过取消本机事件并用自定义逻辑替换行为来接管资源导航，那么它仍然几乎肯定会让用户体验变得奇怪。例如，历史管理由浏览器本地处理，并遵循非常复杂的算法。我从未见过遵循 §7.4.2.3.3 正确分段导航。
TL;DR - 请不要尝试使用 JavaScript 来执行浏览器本机执行的操作。
To answer from an accessibility perspective, It Depends on what you're doing with the anchor element.
Citing an excerpt from the living HTML specification in 2024...
Links with an
hrefattribute represent a hyperlink, which are...In particular, §7.4.6.4 Scrolling to a fragment defines the required behavior for
<a href="#">as such (emphasis mine):Therefore,
<a href="#">Go to top of page</a>has a very well defined native behavior of invoking a scroll event to the top of the document. Note that this event respects the scroll-behavior CSS property, that responsible front-end developers have configured to respect prefers-reduced-motion: reduce.If your intention is to responsibly scroll the end-user back to the top of a page via a well labeled hyperlink, then it is almost certainly a best practice.
...however using javascript to hack up what
href="#"does is almost certainly a poor practice, as it changes the well defined native behavior that users would expect clicking such a link to perform and may bypass accessibility preferences that motion-sensitive users have configured on their systems.In fact, I'd question using javascript to effectively cancel any link behaviors in modern front-end development. Typically, if custom javascript action needs to be taken that is not navigating to a resource, it would make much more semantic sense to use a
<button type="button">element, which does not impose any semantic requirements on native user-agent behaviors.Furthermore, if javascript is used to take over navigating to a resource by cancelling the native event and replacing the behavior with custom logic, it's still almost certainly going to making the UX weird. History management, for example, is handled natively by browsers, and follows a very complex algorithm. I've never seen a non-native solution that follows the §7.4.2.3.3 Fragment navigations correctly.
TL;DR - please do not attempt to use javascript to do what browsers do natively.