为什么不鼓励按钮导航?

时间：2022-04-04 20:59:33

This may be an opinionated question, but I was looking around the web and it seems like web developers like to style <a> tags to look like buttons, rather than use a specific <button> tag. I've noticeably seen this when looking at navigations

这可能是一个有主见的问题，但我在浏览网页时，似乎web开发人员喜欢将“>”标签设计成类似于按钮，而不是使用特定的 <按钮> 标签。我在浏览导航时看到了这一点。

After a bit of research, I found this:

经过一番研究，我发现:

  • Buttons are not search friendly, since the text within is invisible to search engines.
  • 按钮是不友好的搜索，因为文本是无形的搜索引擎。
  • Buttons are harder to update than links, requiring Photoshop and a new image for every update.
  • 按钮比链接更难更新，每次更新都需要Photoshop和新图片。
  • Buttons load more slowly that links, making them especially bad for mobile visitors.
  • 按钮加载速度比链接慢，这对移动用户来说尤其糟糕。
  • Buttons are less accessible to the visually impaired.
  • 视觉受损的人很难使用按钮。
  • Buttons are unnecessary, even if you want to use non-standard fonts, thanks to tools like TypeKit. ~ quoted from here
  • 由于诸如TypeKit之类的工具，即使你想使用非标准字体，按钮也是不必要的。~从这里引用

However, most of these 'reasons' seems quite flimsy and answers like 'you need photoshop' seem... well... invalid?

然而，这些“理由”似乎都很站不住脚，像“你需要photoshop”这样的回答似乎也很站不住脚。嗯…无效的?

So I was wondering:

所以我在想:

Is there an actual reason why the <button> tags aren't used when creating navigation menus, and instead style <a> tags to look like buttons? Why aren't buttons the norm? Is this not what they're made for?

为什么在创建导航菜单时不使用

* I do not wish for your opinion here, nor viewpoint. Only factual information as to why this is the case

我不希望你在这里发表意见，也不希望你发表观点。只有事实信息才能解释为什么会这样

1 个解决方案

#1

5  

After reading up on multiple documents posted in the comments, it seems that there is actually a clear factual reason buttons are not used in navigation bars.

在阅读了发表在评论中的多个文档之后，似乎有一个明确的事实原因按钮不在导航栏中使用。

Anchor tags

These are used when there is a page redirect or taking a user elsewhere on the website.

当有页面重定向或将用户带到网站的其他位置时，可以使用这些工具。

  • If it navigates, it is a link. Use link markup with a valid hypertext reference
  • 如果它导航，它就是一个链接。使用链接标记与有效的超文本引用

~Links are not buttons

~没有按钮的链接

Button elements

These are used when you want to doSomething() that is not redirecting the user. I.e. submitting a form / etc.

当您想要执行不重定向用户的操作时，可以使用它们。即递交表格等。

The question you need to ask yourself is:

你需要问自己的问题是:

Will this control be used to initiate an immediate action or Is the action to navigate to another page?

这个控件是用于启动一个立即的操作，还是用于导航到另一个页面?

if the answer to your question is the first part, than you should be using a button element. Whereas if it is the latter that you are wishing to do, then you should be using an a element.

如果您的问题的答案是第一部分，那么您应该使用按钮元素。然而，如果你想做的是后者，那么你应该使用a元素。

further Reading:

进一步阅读:

#1

5  

After reading up on multiple documents posted in the comments, it seems that there is actually a clear factual reason buttons are not used in navigation bars.

在阅读了发表在评论中的多个文档之后，似乎有一个明确的事实原因按钮不在导航栏中使用。

Anchor tags

These are used when there is a page redirect or taking a user elsewhere on the website.

当有页面重定向或将用户带到网站的其他位置时，可以使用这些工具。

  • If it navigates, it is a link. Use link markup with a valid hypertext reference
  • 如果它导航，它就是一个链接。使用链接标记与有效的超文本引用

~Links are not buttons

~没有按钮的链接

Button elements

These are used when you want to doSomething() that is not redirecting the user. I.e. submitting a form / etc.

当您想要执行不重定向用户的操作时，可以使用它们。即递交表格等。

The question you need to ask yourself is:

你需要问自己的问题是:

Will this control be used to initiate an immediate action or Is the action to navigate to another page?

这个控件是用于启动一个立即的操作，还是用于导航到另一个页面?

if the answer to your question is the first part, than you should be using a button element. Whereas if it is the latter that you are wishing to do, then you should be using an a element.

如果您的问题的答案是第一部分，那么您应该使用按钮元素。然而，如果你想做的是后者，那么你应该使用a元素。

further Reading:

进一步阅读:

标签：

相关文章