search

williamlmao / chimera-ui

A beautiful, accessible, and fully customizable Tailwind UI library for React. Maybe the easiest themeing experience ever? Free and open source.
https://www.chimera-ui.com/
125 stars 9 forks source link

Your website erroneously nests a <button> inside an <a> #14

Closed marcelhageman closed 1 year ago

marcelhageman commented 1 year ago

It's in clear violation of W3C HTML specifications. Nesting conflicting interactive elements is bad practice and makes you look bad.

<a href="/docs/install">
  <button class="inline-flex w-fit items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-line focus:ring-offset-2 bg-primary text-primary-content hover:bg-primary-focus h-10 py-2 px-4 mt-8">Get Started</button>
</a>

Honest question: Where does that come from? Who teaches this to people? It happens so very often that I'm afraid someone out there is training people to do the wrong thing.

I would recommend taking a good look at the W3C validator:

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.chimera-ui.com%2F

I understand that JSX isn't treated as HTML in your IDE, so it wouldn't point out errors such as these as you write your code, but understanding basic W3C rules for HTML shouldn't be too daunting. Especially with a SSR website, it would be very easy to validate with just a few clicks.