グローバル属性

グローバル属性は、どのタグにも共通して指定できる属性（attribute）です。HTML4.01のグローバル属性に加えて新しい属性も定義されています。

accesskey="ショートカットキー"

アクティベート、フォーカスができる要素へのガイドとしてショートカットキーを指定します。大文字と小文字を区別します。半角スペースで区切って複数指定する場合は、より前の値が優先されます。 

<nav>
  <ul>
    <li><a href="/index" title="Index" accesskey="I">Index</a></li>
    <li><a href="/aboutus" title="About us" accesskey="A">About us</a></li>
    <li><a href="/contact" title="Contact" accesskey="C">Contact</a></li>
  </ul>
</nav>
参考：http://www.w3.org/TR/2014/REC-html5-20141028/editing.html#the-accesskey-attribute

class="CSSクラスなど分類上の名前"

これまでのHTML同様、分類上の名前を付けるための属性です。主にCSSのセレクタやDOM要素取得に使われます。複数のクラス名は半角スペースで区切って指定します。大文字と小文字は区別されます。 

<nav class="nav">
  <ul>
    <li><a href="/index" title="Index">Index</a></li>
    <li><a href="/aboutus" title="About us">About us</a></li>
    <li><a href="/contact" title="Contact">Contact</a></li>
  </ul>
</nav>
クラス名から要素の集合を得るJavascriptサンプル
(function (d, className) {
 varelements = d.getElementsByClassName(className);
  console.log(elements.length);
})(document, 'nav');
参考：http://www.w3.org/TR/2014/REC-html5-20141028/dom.html#classes

contenteditable[="contenteditable"]

対応しているブラウザで、要素の編集が可能かどうかを指定します。true または空文字で編集可能、false または no で編集不可にします。 

<p contenteditable>
このテキストを編集可能にします。
</p>
参考：http://www.w3.org/TR/2014/REC-html5-20141028/editing.html#attr-contenteditable

data-*="カスタム属性の値" HTML5で追加

data-*属性は、特に適切な属性や要素がない場合に、ページ独自のスクリプトに情報を渡すのを主な目的とするカスタムなデータ属性です。それまで面倒で猥雑になりがちだった、class 属性への値のセットなどをdata-*属性に置き換えることができます。 

<p data-count="1">1段落目</p>
<p data-count="2">2段落目</p>
<p data-count="3">3段落目</p>

ブラウザで data-*属性がサポートされていれば、JavaScriptのコードを短くしたり要素の取得や操作をシンプルにすることが期待できます。他の属性と同様、get/setAttribute メソッドも使用できます。 

for (variinelement.dataset ) {
  console.log( element.dataset[i] );
}
参考：http://www.w3.org/TR/2014/REC-html5-20141028/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

dir="文字の表記方向"

これまでのHTML同様、文字の表記の方向を ltr（左から右）または rtl（右から左）で指定します。HTML5では新たにauto（自動）が追加されています。autoは、内容の中の最初の強く型付けされた文字を見て表記の方向がどちらになるかを判断します。 

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8" />
<title>LefttoRight</title>
</head>
<body>
<h1>LefttoRight</h1>
<p>
文章は左から右方向へ表記されます。
<p>
</body>
</html>
参考：http://www.w3.org/TR/2014/REC-html5-20141028/dom.html#the-dir-attribute

hidden[="hidden"]

HTML5で追加

この属性がセットされた要素は、他と関連を持たず隠されていることを示します。対応するブラウザでは要素は表示されません。対応していないブラウザやCSS（display: blockなど）での指定によっては表示される可能性があるため注意が必要です。checkedやdisabledなどのように属性名のみで指定します。

テキスト表示を切り替えるサンプル

テキストを表示 非表示テキスト 

<p>
<a href="javascript:void(0)" id="button">テキストを表示</a>
<span id="hide" hidden>非表示テキスト</span>
</p>

<script>
(function (d) {
 if(!window.addEventListener) return;
 varhide = d.getElementById('hide');
  d.getElementById('button').addEventListener('click',function() {
    this.innerText = (hide.hidden = !hide.hidden) ? 'テキストを表示': 'テキストを非表示';
  });
})(document);
</script>
参考：http://www.w3.org/TR/2014/REC-html5-20141028/editing.html#the-hidden-attribute (function (d) { if(!window.addEventListener) return; varhide = d.getElementById('hide'); d.getElementById('button').addEventListener('click',function() { this.innerText = (hide.hidden = !hide.hidden) ? 'テキストを表示': 'テキストを非表示'; }); })(document);

id="ユニークな識別子（ID）"

これまでのHTML同様、ユニーク（固有）な名前を指定します。少なくとも1文字以上を指定し、スペースを含んではいけません。 

<div id="wrapper">
<h1>Title</h1>
<p>
Samplecontent
</p>
</div>
参考：http://www.w3.org/TR/2014/REC-html5-20141028/dom.html#the-id-attribute

lang="言語コード"

これまでのHTML同様、要素の主言語を指定します。BCP47に準拠した言語コード（日本語 = ja、英語 =enなど）か空欄にしなければいけません。空欄の場合は言語が不明であることを明示します。 

<span lang="ja">日本語</span>
<span lang="en">English</span>
参考：http://www.w3.org/TR/2014/REC-html5-20141028/dom.html#the-lang-and-xml:lang-attributes

spellcheck="文法をチェックするかどうか"

対応しているブラウザで、要素のスペルチェックを行うかどうかを指定します。true または空文字でスペルチェック、falseでスペルチェックしません。サポートされるのは、textareaなどのフォームコントロールやcontenteditable 属性で編集が可能な要素になります。

スペルチェック：Love seans 

<p>
スペルチェック：<span spellcheck="true"contenteditablestyle="line-height: 1; padding: .2em; border: #ccc 1px solid; display: inline-block">Love seans</span>
</p>
参考：http://www.w3.org/TR/2014/REC-html5-20141028/editing.html#spelling-and-grammar-checking

style="スタイルシート"

これまでのHTML同様、要素へスタイルシートを指定します。 

<p style="color: black; font-weight: bold">太くて黒いテキスト</p>
参考：http://www.w3.org/TR/2014/REC-html5-20141028/dom.html#the-style-attribute

tabindex="フォーカス順"

フォーカス可能な要素に対して、タブでの移動順を整数で指定します（環境によってタブではない場合があります）。負の数を指定した場合はタブで移動できなくなります。 

<input type="text" name="tabindex" value="順序1" tabindex="1" style="width: 15%" /> 
<input type="text" name="tabindex" value="順序5" tabindex="5" style="width: 15%" /> 
<input type="text" name="tabindex" value="順序4" tabindex="4" style="width: 15%" /> 
<input type="text" name="tabindex" value="順序3" tabindex="3" style="width: 15%" /> 
<input type="text" name="tabindex" value="順序2" tabindex="2" style="width: 15%" />
参考：http://www.w3.org/TR/2014/REC-html5-20141028/editing.html#sequential-focus-navigation-and-the-tabindex-attribute

title="捕捉的な情報"

これまでのHTML同様、ツールチップに適した要素の補足情報を指定します。 

<p title="名前の例">Lorem Ipsum</p>
参考：http://www.w3.org/TR/2014/REC-html5-20141028/dom.html#the-title-attribute

translate="翻訳するかどうか"

ページがローカライズされている場合、要素の属性や内容が翻訳されるかどうか、またはそのままにするかどうかの翻訳モード（translation mode）を指定します。yes または空文字で翻訳を有効、no で翻訳を無効にします。 

<p title="名前の例">Lorem Ipsum</p>
参考：http://www.w3.org/TR/2014/REC-html5-20141028/dom.html#the-translate-attribute