gitlab-org--gitlab-foss/doc/development/new_fe_guide/style/html.md
Marcel Amirault 347a879909 Update redirected links to final destination
Updating redirected links in the development, install, policy
raketasks and university dirs. Should now link to final
URL to avoid redirect hops
2019-07-09 00:20:40 +00:00

1.3 KiB

HTML style guide

Buttons

Button type

Button tags requires a type attribute according to the W3C HTML specification.

// bad
<button></button>

// good
<button type="button"></button>

Button role

If an HTML element has an onClick handler but is not a button, it should have role="button". This is more accessible.

// bad
<div onClick="doSomething"></div>

// good
<div role="button" onClick="doSomething"></div>

Blank target

Use rel="noopener noreferrer" whenever your links open in a new window, i.e. target="_blank". This prevents a security vulnerability documented by JitBit.

// bad
<a href="url" target="_blank"></a>

// good
<a href="url" target="_blank" rel="noopener noreferrer"></a>

Do not use fake links. Use a button tag if a link only invokes JavaScript click event handlers, which is more semantic.

// bad
<a class="js-do-something" href="#"></a>

// good
<button class="js-do-something" type="button"></button>