使用<a> tags or any tags for javascript links?</a>

Question

使用其中一种优先方式或优势是否有优势？

即

1. 您可以拥有一个超链接a，其中href指向#或class的{​​{1}}，然后是查找该id的javascript元素on-click事件。

2. 您可以拥有一个包含class或id的简单div或span，并将javascript on-click绑定到该元素。

我已经看过两件事。

对于使用javascript实现某些功能的rails应用程序，上下文是非常重要的。

Answer 1

我认为使用<a>标记的主要优点是默认行为（包括href时）是浏览器光标表示链接。虽然两者都可以完成，但使用<a>标签也更具语义性。

Answer 2

构建语义标记是良好设计的主要内容。通过使用锚点来表示导航，您坚持使用specification。如果您需要偏离，那么优化的方式将是规范概述，我将确保您的更改是合理的。

偏好锚标签的一个好处是是盲人的屏幕阅读器软件将解析DOM以获得锚点以帮助用户在页面上导航。通过使用div或span，将忽略导航链接。

Answer 3

这是一个HTML问题，而不是javascript。

1. 元素很简单，可以在每个浏览器中使用，无论脚本是否可用，都非常可靠。
2. 浏览器通过上下文菜单功能支持A元素，以在新窗口或选项卡中打开它们
3. 元素在浏览器中具有默认演示文稿，用户可以在不需要任何其他脚本或样式支持的情况下知道它们是链接
4. 不同的浏览器可能会略微不同地呈现链接，因此用户习惯于看到它们以浏览器呈现它们的特定方式运行。脚本和样式化的其他元素可能会以不熟悉的方式呈现给至少一些用户。
5. 浏览器提供支持A元素链接的功能，例如链接之间的标签导航和页面中单独的链接列表。
6. 可访问性的屏幕阅读器和其他支持机制了解A元素链接并可将其呈现给用户
7. 浏览器通常会向用户显示A元素链接的目的地，以便他们决定是否关注该链接
8. 无需关注链接即可轻松复制和共享元素网址
9. 可以使用元素创建书签，而无需关注链接

脚本和样式链接没有上述任何功能，或至少需要大量额外工作才能支持其中任何一项功能。

Answer 4

我喜欢编写实际意味着什么的代码。我通常通过使用最合适的（语义上的）元素来实现这一点。

• 我的目的是在应用程序中导航时使用a元素。引用spec：

  

链接是一个概念性构造，代表两个资源之间的连接

• 对于其他情况，取决于。但我通常使用button元素

根据定义，

• div毫无意义，你应该为了这种目的而避免使用它们。引用spec：

  

强烈建议作者将div元素视为最后的元素，因为当没有其他元素适合时。

Answer 5

如果它是一个仅限JavaScript的链接，那么附加它的元素并不重要，但使用<a>会为您提供内置的链接/悬停/访问样式，同时语义正确。但是，使用实际链接的最大原因是能够在没有启用JS的情况下对浏览器进行回退。

例如，如果链接被跟踪，你可以通过ajax加载接下来10个结果的链接（如果可能的话，服务器端）。

<a id="nextByAjax" href="?next=10">Next 10</a>