Why are button’s discouraged from navigation?

by

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, then 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.

further Reading:

More Related Contents:

  1. Bootstrap 3 collapsed menu doesn’t close on click
  2. How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container
  3. Make headings (h1, h2, …) inherit style from body
  4. Bootstrap 4 Carousel “Half of previous”
  5. How can I vertically align elements in a div?
  6. Image inside div has extra space below the image
  7. Does UL have default margin or padding [duplicate]
  8. Why doesn’t the height of a container element increase if it contains floated elements?
  9. How do I make a placeholder for a ‘select’ box?
  10. Text in Border CSS HTML
  11. Equal width flex items even after they wrap
  12. How can I “disable” zoom on a mobile web page?
  13. How can I scale an entire web page with CSS?
  14. CSS margin adds space outside parent element [duplicate]
  15. Place text after dots inline with the second line of text overflow ellipsis
  16. Absolute position is not working
  17. using text-align center in colgroup
  18. Pure css Chessboard with div & no classes or ids, is it possible?
  19. 100% width minus margin and padding [duplicate]
  20. How to include all css kept in a directory?
  21. display:inline with margin, padding, width, height
  22. Insert HTML from CSS
  23. How to show an animation that is hidden behind a colored div using a “reveal” div on the surface
  24. How to get rid of extra space below svg in div element
  25. How to align footer (div) to the bottom of the page? [duplicate]
  26. CSS: display:block; vs display:table;
  27. Img’s max-height not respecting parent’s dimensions
  28. backdrop-filter not working for nested elements in Chrome
  29. display: flex not working on Internet Explorer [duplicate]
  30. Fitting child into parent

Leave a Comment