One of the most semantic concept which usually gets ignored is usage of buttons, anchors and inputs. In simple word all three does same things. But does it matter which one to use?

Visual Impact and Behavior

All three elements can behave and look similar using CSS and Javascript. Look into below codepen for reference.

Let’s find out which one to use when and why?

See the Pen Semantic HTML: button, anchor, input by Harshit Purwar (@harshitpurwar) on CodePen.

Semantics

Using right element in markup of web page has its own advantages and it is the best practice as well. It gives you advantages in SEO, borwser compatibility and accessibility.

Heads-up: Always use anchor when your desired action is to navigate from one page to another or download link is attached. Use button and input for form submission and other interactive actions.