"vscode:/vscode.git/clone" did not exist on "724d3be198eb41f26076c8f29a8904c16cdf73c9"

HTML style guide

See also our accessibility page.

Semantic elements

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>

Buttons

Button type

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

// bad
<button></button>

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

Links

Blank target

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.

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

When using gl-link, using 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>

Fake links

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>