HTMLスタイルガイド

ボタン

ボタンタイプ

W3CのHTML仕様では、ボタンタグにはtype 属性が必要です。 

// bad
<button></button>

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

ボタンのロール

HTML要素にonClick ハンドラがあるが、ボタンでない場合は、role="button"。 この方がアクセスしやすいでしょう。 

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

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

ブランクターゲット

リンクが新しいウィンドウで開くときは、rel="noopener noreferrer" 、つまりtarget="_blank"を使用してください。 これは、JitBitによって文書化されたセキュリティの脆弱性を防ぐためです。 

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

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

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

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

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