Menu
Is it incorrect to use the html <button> tag when designing a UI rather than using <div class="button">? In implementation I haven't noticed a difference between both approaches, and <button> seems more semantic, but I am not sure if it is only intended for usage within a form. The button would not be in a form. Using the <div> tag seems to be the most common way of making buttons (bootstrap) but I am not sure why. Are there any technical reasons for this?
567
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.
With the button , you will need to invoke javascript `onclick. use a <button> when you don't need to navigate for example loading a modal or submitting a form, always use <a> for navigation.
Links are contained within an HTML anchor tag with an href attribute containing the URL where the user will be directed. Buttons - A button is meant to submit information and will not necessarily redirect the user to an entirely new web page.
role=“button”ARIA (Accessible Rich Internet Applications) attributes provide the means to make a div appear as a button to a screen reader. Here is the intro to the button role page on MDN: Adding role=“button” will make an element appear as a button control to a screen reader.
It's better to use <button> rather than <div> or any other element to represent a button. The "type" attribute is important here and should be type="button", without it the default value is submit which doesn't make sense outside of a form.
And yeah by the way, having a <button> outside of a form is perfectly fine.
Often times while designing a UI, the <a> tag is the most appropriate element where it makes sense, but <button> is perfectly fine (and really, intended) for performing an action via javascript.
Using the
<div>tag seems to be the most common way of making buttons (bootstrap) but I am not sure why.
I really haven't seen evidence of this, and to be honest it doesn't matter what they do. The bootstrap framework tends to disregard semantics, for example though the use of empty elements just for presentational reasons like <li class="divider"></li>.
102
From a usability perspective, it's better to implement <button> over <div> or <a> due to the way browsers handle interactivity.
If your users are sloppy clickers and they click-and-drag by mistake, or on a touch-screen, they can end up selecting the <div> contents rather than triggering a click event. Using <button> will greatly reduce this problem.
But, non-button objects, like <div>'s, can be more flexible when applying CSS. Especially in older browsers.
25
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
