HTMLスタイルガイド

アクセシビリティのページもご覧ください。

セマンティック要素

セマンティック要素はHTMLタグで、コンテナに含まれるデータに（体裁を整えるのではなく）意味を与えます。例えば

セマンティック・タグを使うことを好みますが、タグの意味そのものが本当に正確である場合に限ります。各タグが意味的に何を意味するかについては、MDNドキュメントをご覧ください。

<!-- 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>

ボタン

ボタンの種類

ボタンタグは、W3C HTML仕様に従って、type 属性を必要とします。

// bad
<button></button>

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

ブランクターゲット

リンクにtarget="_blank" を追加する場合は、パジャマのリンクに関するガイドラインを参照してください。

a タグでtarget="_blank" を使用する場合は、rel="noopener noreferrer" 属性も追加する必要があります。これは、JitBitによって文書化されたセキュリティの脆弱性を防ぐためです。

gl-link を使用する場合は、target="_blank" を使用することで自動的にリンクにrel="noopener noreferrer" が追加されるので十分です。

// 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>

偽リンクは使わないでください。リンクがJavaScriptのクリックイベントハンドラを呼び出すだけなら、buttonタグを使いましょう。

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

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