5 ms·

A bit off-topic, and maybe it was just an example made without too much thought put into it, but I've noticed there seems to be a lot of people now who write bu

A bit off-topic, and maybe it was just an example made without too much thought put into it, but I've noticed there seems to be a lot of people now who write button/links like this: <button><a href="/blah.html">My Button</a></button> As far as I know that's technically invalid HTML. You can't have an <a> as a child of a <button> (or even the other way around.) I'm also ignoring the invalid type="submit" against the <a> tag in the example button component in the post. I think it stems from people who want their links to take on the default button styling, but I'm not 100% sure. Has anyone else noticed this trend at all?

idontknowifican 2y ago
yeah it is invalid html, and probably done for the ui only. now people are just copying it. would totally break if the button anchor was in a form
szundi 2y ago
Maybe this works on IE6 or something like that?
rkwz 2y ago
> As far as I know that's technically invalid HTML. You can't have an <a> as a child of a <button> (or even the other way around.) I'm also ignoring the invalid type="submit" against the <a> tag in the example button component in the post. It definitely feels weird to have anything other than text nodes inside <button>, didn't realize it's actually invalid HTML. I used this approach mainly to have the button component behave as a link button and a form submit button. Here's the actual code from my project - https://github.com/sheshbabu/mouji/blob/master/commons/components/button.html https://github.com/sheshbabu/mouji/blob/master/commons/compo... What are the drawbacks of this approach? I'm pretty sure I've used this before, can't recall any downsides.
- philo23 2y ago
  > I used this approach mainly to have the button component behave as a link button and a form submit button. Personally I think the "proper" way to do this would be use just <a> for links, and <button> for submitting forms, and then have the same CSS styles applied to both so that both <button>'s and <a>'s look the same visually if that's what you're going for. I'm not particularly familiar with Go, but I'd either make the wrapping tag name itself a template variable (maybe an enum between "Anchor" and "Button"? again not familiar with Go) or have two components one for forms and one for links. If I've understood the syntax, something like this? <{{.Tag}} class="button-container"></{{.Tag}}> But given both <button>'s and <a>'s have lots of different attributes to manage its behaviour and state (name/value/type/disabled vs href/rel/target etc) I'd personally split them into two separate components, even if it ends up doubling up some of the logic and styles. > What are the drawbacks of this approach? I'm pretty sure I've used this before, can't recall any downsides. As others have mentioned, while it's technically invalid browsers will still happily accept it so there's no real issue with it, personally I just find it a bit quirky to read. There's no harm in leaving it just as it is :)
- robertoandred 2y ago
  It breaks accessibility and semantics. Use a <button> for an action and an <a> for a link.
- zdragnar 2y ago
  A button with type "submit" will happily submit the form when you click on it. If you want it to look like a link, use CSS. Putting the submit on the anchor tag is pointless- the lack of a type on the button itself means the browser is inferring the intended behavior and defaulting to type "submit" rather than type "button". As others have mentioned, the main downside is likely accessibility.
tlb 2y ago
Once the major browser engines support it, it's de-facto legal. This also explains why there are so few alternative browsers. Writing a new browser that supports everything that happens to work in the major browsers is ridiculously hard.
- jitl 2y ago
  The big innovation of the html5 spec was to specify how to handle all the “invalid” html states; recovery from user error is now part of the spec instead of wholly implementation specific.
  - erik_seaberg 2y ago
    HTML 5's error recovery pseudocode replaced the formal grammar that HTML 4 had, and in authoring I find it harder to take guidance from.
    - smrq 2y ago
      Well, what's the point of having a formal grammar if nobody follows it and things outside the grammar have defined behavior?
- rkwz 2y ago
  Yes, html is one of the unique languages of our era. It's very forgiving and lenient. > This also explains why there are so few alternative browsers. Writing a new browser that supports everything that happens to work in the major browsers is ridiculously hard. IMO one of the reasons Chrome won was because they supported both Firefox and IE's interpretation of web standards.
- philo23 2y ago
  Yep, the HTML5 spec has an agreed on way to parse and interpret invalid HTML, so all modern browsers should handle it pretty consistently. I was more interested in finding out where this style had come from really, because I've seen a lot of devs doing something similar and semantically it's just always struck me as a bit odd looking!

idontknowifican 2y ago

yeah it is invalid html, and probably done for the ui only. now people are just copying it. would totally break if the button anchor was in a form

szundi 2y ago

Maybe this works on IE6 or something like that?

rkwz 2y ago

> As far as I know that's technically invalid HTML. You can't have an <a> as a child of a <button> (or even the other way around.) I'm also ignoring the invalid type="submit" against the <a> tag in the example button component in the post. It definitely feels weird to have anything other than text nodes inside <button>, didn't realize it's actually invalid HTML. I used this approach mainly to have the button component behave as a link button and a form submit button. Here's the actual code from my project - https://github.com/sheshbabu/mouji/blob/master/commons/components/button.html https://github.com/sheshbabu/mouji/blob/master/commons/compo... What are the drawbacks of this approach? I'm pretty sure I've used this before, can't recall any downsides.

philo23 2y ago
> I used this approach mainly to have the button component behave as a link button and a form submit button. Personally I think the "proper" way to do this would be use just <a> for links, and <button> for submitting forms, and then have the same CSS styles applied to both so that both <button>'s and <a>'s look the same visually if that's what you're going for. I'm not particularly familiar with Go, but I'd either make the wrapping tag name itself a template variable (maybe an enum between "Anchor" and "Button"? again not familiar with Go) or have two components one for forms and one for links. If I've understood the syntax, something like this? <{{.Tag}} class="button-container"></{{.Tag}}> But given both <button>'s and <a>'s have lots of different attributes to manage its behaviour and state (name/value/type/disabled vs href/rel/target etc) I'd personally split them into two separate components, even if it ends up doubling up some of the logic and styles. > What are the drawbacks of this approach? I'm pretty sure I've used this before, can't recall any downsides. As others have mentioned, while it's technically invalid browsers will still happily accept it so there's no real issue with it, personally I just find it a bit quirky to read. There's no harm in leaving it just as it is :)
robertoandred 2y ago
It breaks accessibility and semantics. Use a <button> for an action and an <a> for a link.
zdragnar 2y ago
A button with type "submit" will happily submit the form when you click on it. If you want it to look like a link, use CSS. Putting the submit on the anchor tag is pointless- the lack of a type on the button itself means the browser is inferring the intended behavior and defaulting to type "submit" rather than type "button". As others have mentioned, the main downside is likely accessibility.

tlb 2y ago

Once the major browser engines support it, it's de-facto legal. This also explains why there are so few alternative browsers. Writing a new browser that supports everything that happens to work in the major browsers is ridiculously hard.

jitl 2y ago
The big innovation of the html5 spec was to specify how to handle all the “invalid” html states; recovery from user error is now part of the spec instead of wholly implementation specific.
- erik_seaberg 2y ago
  HTML 5's error recovery pseudocode replaced the formal grammar that HTML 4 had, and in authoring I find it harder to take guidance from.
  - smrq 2y ago
    Well, what's the point of having a formal grammar if nobody follows it and things outside the grammar have defined behavior?
rkwz 2y ago
Yes, html is one of the unique languages of our era. It's very forgiving and lenient. > This also explains why there are so few alternative browsers. Writing a new browser that supports everything that happens to work in the major browsers is ridiculously hard. IMO one of the reasons Chrome won was because they supported both Firefox and IE's interpretation of web standards.
philo23 2y ago
Yep, the HTML5 spec has an agreed on way to parse and interpret invalid HTML, so all modern browsers should handle it pretty consistently. I was more interested in finding out where this style had come from really, because I've seen a lot of devs doing something similar and semantically it's just always struck me as a bit odd looking!