The Difference Between Anchors, Inputs and Buttons

By  on  
HTML5 Buttons

One of the things I love about CSS is how easy it is to make one element look like another. In the example above, the first element is an anchor, the second is a button and the third is an input. I've overridden the click behavior of all three so they do the same thing.

If all three elements look and behave the same, does it matter which one you use? In this article, I'll explain the difference between anchors, inputs and buttons, and I'll show you when to use each one.


The question of which element to use boils down to semantics, which is using markup that reflects the meaning of the content. Using semantic HTML makes your content explicit, which gives you better browser compatibility, accessibility and SEO.


Anchors (the <a> element) represent hyperlinks. What's a hyperlink? A hyperlink is a resource a person can navigate to or download in a browser. If you want to allow your user to move to a new page or download a file, then use an anchor.


An input (<input>) represents a data field. The type attribute tells the browser which type of data the input controls. There are five input types related to buttons.

  • <input type="submit">: This is the most common button input. It's a button that, when clicked, submits a form.
  • <input type="image">: Like an <input type="submit">, this input submits a form. However, it also takes a src attribute and is displayed as an image.
  • <input type="file">: This control is used to upload files and is shown as a label and a button. There's no good cross-browser way to style file inputs, so you'll usually set its display to hidden and use a second button to trigger it.
  • <input type="reset">: This is a button that resets a form.
  • <input type="button">: This is a button with no default behavior. You can use to it add non-standard behavior to a form using JavaScript.


The <button> element represents a button! Buttons do the same things as the inputs mentioned above. Buttons were introduced into HTML as an alternative to inputs that are much easier to style. Unlike inputs, a button's label is determined by its content. This means you can nest elements within a button, such as images, paragraphs, or headers. Buttons can also contain ::before and ::after pseudo-elements.

Like an input, a button has a type attribute. This attribute can be set to submit, reset or button and does the same thing as the input's type. By default, the type is submit. If you place a button in a form and don't set its type, when it's clicked it will submit that form! If you don't want this behavior, set the type to button.

One nifty feature of inputs and buttons is they support the disabled attribute. This makes it easy to turn them on and off. Sadly, anchors don't have this capability.

Which one?

So should you use an anchor, input or button? When you're navigating the user to a page or resource, use an anchor. Otherwise, both inputs and buttons are valid. Personally, I prefer to use inputs for submitting and resetting forms and buttons for custom behavior because I think it makes the intent clearer. However, the element you use is entirely up to you. Go nuts!

Landon Schropp

About Landon Schropp

Landon is a developer, designer and entrepreneur based in Kansas. He's the author of the Free No Bullshit Git Intro CourseNo Bullshit Git and Unraveling Flexbox. He's passionate about building simple apps people love to use.

Recent Features

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    MooTools Star Ratings with MooStarRating

    I've said it over and over but I'll say it again:  JavaScript's main role in web applications is to enhance otherwise boring, static functionality provided by the browser.  One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the...

  • By
    Xbox Live Gamer API

    My sharpshooter status aside, I've always been surprised upset that Microsoft has never provided an API for the vast amount of information about users, the games they play, and statistics within the games. Namely, I'd like to publicly shame every n00b I've baptized with my...


  1. To me it feels like a missed opportunity to not use the button to refer to, you know, an actual button! We already have a submit button.

  2. MaxArt

    So, what’s the best use for inputs of type “submit”, “reset” and “button”, if they are completely be superseded by buttons of the same type? I guess none, isn’t it?

  3. yes, concerns should be separated!

    1. It is weird to be able to middle-click on a “button” and be navigated to other tab/window.

    2. In case of bootstrap it is confusing to have “disabled button” created from , and also have additional JS logic to prevent it from actually being clicked.

  4. Nice David,

    Therefore, we must use the “button” for open the “hidden modal”. Sure? ;)

  5. Naveen

    I expected a little more on use cases of these three types like whether a link/page could be crawled via input/button or not? What are the SEO implications of all the three options? And many more details which I am not aware of!

  6. Paul Ferguson

    I may be wrong, but I heard there is also a distinction that a < button will fire on space bar while an < input type=submit can be called on enter.

  7. Steve

    It’s also worth noting that although the button element is likely the best element for a button we couldn’t use it widespread until IE8 (running in Standards Mode) was the minimum IE version we needed to support due to a long running IE bug where IE would submit the innerHTML when you clicked a button vs. the value attribute: In addition they also rendered horribly on Windows XP due to an OS bug: beyond that, button element is my choice for an actual button. ;-)

  8. i have a button that is acting as an anchor, but it will only work the first time the page is loaded. Any thoughts?

  9. Shweta Gupta

    I’m a beginner in learning HTML and I was really confused among the working of anchor, input and button tags. Now my doubts have cleared up. Great post!!!

  10. Aleks

    Thank you for good and concise explanation!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!