I had just started to learn coding two weeks ago, and I found that when I use div and button to create some buttons, they seem to have the same result.
However, I am sure there must be some difference between these two ways.
Can anyone tell me which way is correct or better?
Thank you.
One difference I can point out is that the div looks like a button because of the classes you used on it, but it still needs a click listener to act like a button, while a button already has an onclick property that you can set to do something when the button is clicked.
2 Likes
Hi alien200020,
I think the best way would be using the tag if you want to create a button, and the point is the onclick property that fortMaximus is talking about.
Let’s say that you want your page to return something after you click on it. You will need to link your html to your Javascript code in order to make the button do something (for instance selecting a random word from a list that you created, or anything else).
This is what the html would look like:
<button type= "button" onclick="generator()" id = “btn”>
here with the onclick property you are assigning a Javascript function called “generator()” to your button.
Hope this helped!
1 Like
div is a division in html document structure (its like stem cell in human body).
is a different thing in html, you can google it.a div as mentioned can have onclick applied to it while button already has onclick in it.
so what is difference between a stem cell which can turn into a kidney and kidney? 
Always try to use the tag that is most appropriate for the default behavior and the type of content first (the semantically correct element) and then layer styling and JavaScript behavior on top of that.
For instance, you can make almost any element look like a button or a link, but only certain elements naturally behave like a button or a link without additional code.
<!-- doesn't click and doesn't respond to keyboard by default -->
<span class="btn btn-default">Span</span>
<div class="btn btn-default">Div</div>
<!-- will click/navigate and responds to keyboard as is -->
<a href="https://go.somewhere.com">Anchor</a>
<!-- will submit a form/click and responds to keyboard as is -->
<button type="submit" class="btn btn-default">Button</button>
This can also be important for people who use assistive technologies like screen-readers where the CSS isn’t going to matter as much or at all to those users. There’s also the potential that CSS and JS get turned off by the user or is otherwise broken or disabled. Without one or both of those button and anchor still have default capabilities that you can leverage to provide context cues and help the user complete a task. Using the semantically correct tag can also help with search engine optimization by providing context for the search algorithms.
Use buttons to submit a form or do some ACTION.
Use anchors for NAVIGATION.
Style how you want.
2 Likes
I seem to recall that the button tag doesn’t work in some mobile devices…
this is more foolproof.
<a href="#gosomewhere" class="btn btn-primary">Click me</a>
Thanks for all the answers, you guys really helped!
I need to build correct concepts of these tags.
1 Like
Exactly, you can think of it this way: the button already comes with the built-in functionality you’d expect from it (i.e., do something when it is clicked).
For the div, it’s a bit trickier since you need to build that functionality yourself.
Cheers,
Hanna