This is rather interesting — stylistically, I can imagine an <a role="button"> looking good for collapsing or expanding content — in fact, I'm convinced there is at least one site that takes such an approach.
It's not a matter of looking good. With CSS you can make a link look like a button, and a button look like a link, and they both will stylistically look good. Nobody would be able to tell which is which. The problem in this case is that collapsing/expanding content is an action and not a redirection. Yes, a <a role="button"> styled to look like a button will work, as a <div> would do, or a <span> or any other HTML element, but they are not the correct semantic element.
The only time I've ever thought to use an a as a button was for a login button in navigation, where the ask was for it to open up a modal on the page. Sounds great, until we realize some people don't have Javascript, so the purpose of using an a tag was as a fallback to link to a login page.
Javascript adds role="button", and if javascript is disabled, well then the role remains a link.
@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>.
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 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.
@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 not using them instead ov buttons — but is it fine to use
as asbuttons?Here's an interesting case of using
<a>as Button from Bootstrap current docs.From : getbootstrap.com/docs/5.3/componen...
This is rather interesting — stylistically, I can imagine an
<a role="button">looking good for collapsing or expanding content — in fact, I'm convinced there is at least one site that takes such an approach.It's not a matter of looking good. With CSS you can make a link look like a button, and a button look like a link, and they both will stylistically look good. Nobody would be able to tell which is which. The problem in this case is that collapsing/expanding content is an action and not a redirection. Yes, a
<a role="button">styled to look like a button will work, as a<div>would do, or a<span>or any other HTML element, but they are not the correct semantic element.The only time I've ever thought to use an
aas a button was for a login button in navigation, where the ask was for it to open up a modal on the page. Sounds great, until we realize some people don't have Javascript, so the purpose of using anatag was as a fallback to link to a login page.Javascript adds
role="button", and if javascript is disabled, well then the role remains a link.It's very niche, and I guess I don't have much experience to talk, but that sounds like a really neat solution to an edge-case.
@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?