Menu
I have a pretty basic question regarding buttons on HTML pages.
As we know, there are several possibilities to create them. It is possible to set display: block; on an a, so one can assign a color, width and height to it. But there is also the HTML element button and the element submit.
When to use what? For example, when creating a form, I need a submit element if I remember right. But when I have a button outside of a form, I can use a normal a. But still, I don't know then to use button.
Could you please help me out with this?
836
Buttons help us to create user interaction and event processing. They are one of the widely used elements of web pages. During the form submission, to view or to get some information, we generally use buttons.
The <button> tag defines a clickable button. Inside a <button> element you can put text (and tags like <i> , <b> , <strong> , <br> , <img> , etc.).
From a high level, buttons are to be used for performing an in-page action and anchors/links are for navigating to a new page. You can read more about "why" on the Button and Anchor/Link documentation. Because a button's functionality is distinctly different from an anchor, we need to be deliberate in their use.
You should use <a> or <button> , not <div> . an anchor with an href attribute will trigger page reload. Without an href, it is not "tabable", and it still does not carry the button semantic.
Anchors (<a>) should be used when it's a link, and not a form submission.
Search engine crawlers cannot follow links which are submitted by input or button, only a. Therefore for SEO purposes, its best to use anchors for links.
If its a form, you should always use either a button or an input because these can submit the form on pressing the enter button (unlike links), and are generally better for accessibility.
I won't go into detail regarding whether to use button or input however, as there is already an indepth post regarding this:
<button> vs. <input type="button" />. Which to use?
97
<button>The button (<button>) HTML element represents a clickable button.
<a>The HTML Anchor Element (<a>) defines a hyperlink, the named target destination for a hyperlink, or both.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
