@baenencalin In my opinion, you should use <button> for a button, and not <a>. But the answer to your question is a "maybe?" as there could be exceptions.
There are some situations (e.g. when a service like login or payment methods are handled by an external site) when it's a gray area what element should be used: semantically, it makes sense to style an <a> to look like a button because, although they are punctual actions (login, payment, etc.), they redirect the website to somewhere else (the external service) and will eventually come back. It's not a one-size-fits-all type of thing. Once that's said, most of the cases I've found a <div>/<a> to behave like a <button> didn't fall on those categories, and they should have definitely been a <button>.
software engineer 👩💻, technical writer, i posts contents relating to Linux, C programming language, software tools, JavaScript, React e.t.c. 🟢Volunteer Mod and Challenge Judge here on DEV🟢
If it is meant to be a button, it should be in the <button> tag. If the button is meant to be a hyperlink to another page, place the <a> tag inside the <button> tag.
@sarahokolo I wouldn't recommend that, as it will most likely end up being invalid HTML. An interactive element (<a> with an href attribute) cannot be inside of another interactive element (<button>). (Reference)
I'm Calin Baenen – AKA KattyTheEnby – a programmer born October 30th, 2006.
I love programming, it has been my passion since I was a kid, and will forever be my passion.
I'm not using the ain the button — I am using the aas the button.
I'm doing this for navigation-buttons specifically; the as are styled to resemble normal buttons (and less-so with the ones on the navigation-bar).
My website is an example ov what I am talking about.
I'm Calin Baenen – AKA KattyTheEnby – a programmer born October 30th, 2006.
I love programming, it has been my passion since I was a kid, and will forever be my passion.
I'm Calin Baenen – AKA KattyTheEnby – a programmer born October 30th, 2006.
I love programming, it has been my passion since I was a kid, and will forever be my passion.
@baenencalin the comment about <a> inside of <button> was for Sarah. I tagged the comments to avoid confusions. Sorry for the misunderstanding.
In the case of a navigation, it seems like a case for a link that may look like a button (although it is not, and won't have the role="button") but it is still a link. Sorry, I couldn't see your page because it returns a 404.
I'm Calin Baenen – AKA KattyTheEnby – a programmer born October 30th, 2006.
I love programming, it has been my passion since I was a kid, and will forever be my passion.
@baenencalin In my opinion, you should use
<button>for a button, and not<a>. But the answer to your question is a "maybe?" as there could be exceptions.There are some situations (e.g. when a service like login or payment methods are handled by an external site) when it's a gray area what element should be used: semantically, it makes sense to style an
<a>to look like a button because, although they are punctual actions (login, payment, etc.), they redirect the website to somewhere else (the external service) and will eventually come back. It's not a one-size-fits-all type of thing. Once that's said, most of the cases I've found a<div>/<a>to behave like a<button>didn't fall on those categories, and they should have definitely been a<button>.Sorry for the long answer :$
If it is meant to be a button, it should be in the
<button>tag. If the button is meant to be a hyperlink to another page, place the<a>tag inside the<button>tag.@sarahokolo I wouldn't recommend that, as it will most likely end up being invalid HTML. An interactive element (
<a>with anhrefattribute) cannot be inside of another interactive element (<button>). (Reference)I'm not using the
ain thebutton— I am using theaas the button.I'm doing this for navigation-buttons specifically; the
as are styled to resemble normal buttons (and less-so with the ones on the navigation-bar).My website is an example ov what I am talking about.
What about in the case ov page-navigation?
Data isn't being handled, it's a static site — but I believe I chose correctly.
It's fine — and appreciated.
@baenencalin the comment about
<a>inside of<button>was for Sarah. I tagged the comments to avoid confusions. Sorry for the misunderstanding.In the case of a navigation, it seems like a case for a link that may look like a button (although it is not, and won't have the
role="button") but it is still a link. Sorry, I couldn't see your page because it returns a 404.Weird.
Why would my DEV profile return a 404 when my account exists?