See also our accessibility page.
Semantic elements are HTML tags that give semantic (rather than presentational) meaning to the data they contain. For example:
Prefer using semantic tags, but only if the intention is truly accurate with the semantic meaning of the tag itself. View the MDN documentation for a description on what each tag semantically means.
<!-- bad - could use semantic tags instead of div's. --> <div class="..."> <p> <!-- bad - this isn't what "strong" is meant for. --> Simply visit your <strong>Settings</strong> to say hello to the world. </p> <div class="...">...</div> </div> <!-- good - prefer semantic classes used accurately --> <section class="..."> <p> Simply visit your <span class="gl-font-weight-bold">Settings</span> to say hello to the world. </p> <footer class="...">...</footer> </section>
Button tags requires a
type attribute according to the W3C HTML specification.
// bad <button></button> // good <button type="button"></button>
Avoid forcing links to open in a new window as this reduces the control the user has over the link. However, it might be a good idea to use a blank target when replacing the current page with the link makes the user lose content or progress.
rel="noopener noreferrer" whenever your links open in a new window, i.e.
target="_blank". This prevents a security vulnerability documented by JitBit.
target="_blank" is sufficient as it automatically adds
rel="noopener noreferrer" to the link.
// bad <a href="url" target="_blank"></a> // good <a href="url" target="_blank" rel="noopener noreferrer"></a> // good <gl-link href="url" target="_blank"></gl-link>
// bad <a class="js-do-something" href="#"></a> // good <button class="js-do-something" type="button"></button>