williamlmao / chimera-ui

A beautiful, accessible, and fully customizable Tailwind UI library for React. Maybe the easiest themeing experience ever? Free and open source.

Home Page:https://www.chimera-ui.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

marcelhageman opened this issue · comments

commented

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.