Rules Hub
Coding Rules Library
Prefer anchor tags for navigation over buttons
Use <a> tags for navigation instead of buttons with onClick handlers to ensure accessibility, SEO, and native browser behavior.
Bad example
| 1 | const DownloadLink = () => ( |
| 2 | <button |
| 3 | className="btn-primary" |
| 4 | onClick={() => window.open('https://example.com/app', '_blank')} |
| 5 | > |
| 6 | Download App |
| 7 | </button> |
| 8 | ); |
Explanation (EN)
Using a button with an imperative `onClick` handler (like `window.open`) breaks native browser features such as 'Open in new tab', status bar URL preview, and SEO crawling. It also confuses screen readers by announcing an action rather than navigation.
Objašnjenje (HR)
Korištenje gumba s imperativnim `onClick` rukovateljem (poput `window.open`) narušava nativne funkcionalnosti preglednika kao što su 'Otvori u novoj kartici', pregled URL-a u statusnoj traci i SEO indeksiranje. Također zbunjuje čitače ekrana najavljujući akciju umjesto navigacije.
Good example
| 1 | const DownloadLink = () => ( |
| 2 | <a |
| 3 | href="https://example.com/app" |
| 4 | target="_blank" |
| 5 | rel="noopener noreferrer" |
| 6 | className="btn-primary" |
| 7 | > |
| 8 | Download App |
| 9 | </a> |
| 10 | ); |
Explanation (EN)
Using a semantic `<a>` tag ensures full accessibility and standard browser behavior. Users can middle-click or right-click the link, and search engines can follow it. Adding `rel="noopener noreferrer"` is essential for security when using `target="_blank"`.
Objašnjenje (HR)
Korištenje semantičke oznake `<a>` osigurava potpunu pristupačnost i standardno ponašanje preglednika. Korisnici mogu koristiti srednji klik ili desni klik na poveznicu, a tražilice je mogu pratiti. Dodavanje `rel="noopener noreferrer"` ključno je za sigurnost pri korištenju `target="_blank"`.