グローバル属性（3/3）

spellcheckコンテンツ属性（スペル・文法チェック）

spellcheckコンテンツ属性は、テキストエリアなど、ユーザが文字を入力するようはフォーム・コントロールにおいて、スペル・チェックを有効にしたり、無効にするために使います。
input要素、textarea要素、編集可能となっている要素（contexteditableコンテンツ属性がtrue）のテキストに対して、スペルチェックができます。

■利用例

  <input type="text" spellcheck="true" size="50" />
    

■ブラウザでのレンダリング結果（Chromeの場合）

利用例のようにspellcheckコンテンツ属性を有効にすることで、ユーザが入力したスペルミスを指摘してくれます。このspellcheckコンテンツ属性をサポートされているブラウザでは、spellcheckコンテンツ属性が指定されていなくてもデフォルトで有効になっています。
なお、このコンテンツ属性で指定された状態は、その子要素にも引き継がれます。

styleコンテンツ属性（スタイルシート）

styleコンテンツ属性は、要素にCSS宣言をセットするために使います。複数の宣言を指定する場合はセミコロンで区切ります。

■利用例

  <p style="font-weight:bolde;color="green">太字と緑の文字色の段落です。</p>
    

tabindexコンテンツ属性（タブ・インデックス）

tabindexコンテンツ属性は、タビングの順番を指定します。タビングとは、Tabキーを使ってフォーカス可能な要素を移動することを表します。ただしフォーカスの移動手段としてTabキーを使うかどうかは、ユーザの環境に依存します。
HTML5では、Tabキーなどを使ってフォーカス可能な要素を移動するメカニズムのことを、シーケンシャル・フォーカス・ナビゲーションと呼んでいます。

このコンテンツ属性にセットできる値は、整数を表す数値のみです。通常は1以上の整数を指定し、正の整数がセットされた要素を優先して、その値の小さい順にフォーカスを移動することになります。

■利用例

  <p contenteditable="true" tabindex="1">編集可能なテキスト</p>
  <p tabindex="2">編集不可なテキスト</p>
    

■ブラウザでのレンダリング結果（Firefoxの場合）

利用例では、最初の段落は編集可能を指定しています。Tabキーでフォーカスを当てると、カーソルが点滅しますが、2つ目の段落にTabキーでフォーカスを当ててもカーソルは入りません。
フォーカスはアクセシビリティにおいては非常に重要で、支援テクノロジーにも対応する上で、ハイパーリンクのようなアクションを伴う要素だけではなく、通常の要素においても、なくてはならない存在です。
tabindexコンテンツ属性には、マイナスの値をセットすることもできますが、その場合は、該当の要素をフォーカス可能にはしますが、シーケンシャル・フォーカス・ナビゲーションの対象にはなりません。つまり、Tabキーを何度押しても該当する要素にはフォーカスが移動しませんが、マウスでクリックするとフォーカスが当たります。
また、tabindexコンテンツ属性に0をセットした場合は、該当の要素をフォーカス可能にして、シーケンシャル・フォーカス・ナビゲーションの対象になります。しかし、1以上の整数の値がセットされている要素より優先順が後になります。

titleコンテンツ属性（タイトル）

titleコンテンツ属性を使って、該当の要素のコンテンツを簡単に説明するタイトルや補足情報をマークアップすることができます。多くの要素では、マウス・ポインターを当てると、titleコンテンツ属性の内容がツールチップとして表示されます。

■利用例

  <p>現在、
  <a href="http://www.html5.jp" title="HyperText Markup Language Version5">
  HTML5</a>の学習を行っています。</p>
    

■ブラウザでのレンダリング結果（Chromeの場合）

どのブラウザでも、titleコンテンツ属性のマークアップがあれば、マウス・ポインターを当てると、titleコンテンツ属性で指定されたテキストがツールチップに表示されます。
もし、titleコンテンツ属性に空文字列が指定された時は、明示的にその要素にはタイトルがないことを表すことになります。

data-*コンテンツ属性（独自データ）

HTML5では、ユーザ独自のコンテンツ属性をマークアップできるようになりました。独自コンテンツ属性の名前の先頭は、data-でなければいけません。そして、その後ろに付ける名前は、最低でも1文字、小文字アルファベット、ハイフン、アンダースコアなど、XMLの属性名として許された文字を使うことができます。しかし、大文字のアルファベットとコロンを使うことはできません。

■利用例

  <p>
  <a href="http://sample.com" id="about" data-preview="1" data-preview-size="2">
  About</a></p>
    

利用例では、プレビューとプレビューのサイズを独自のコンテンツ属性で定義して、それをJavaScriptに渡す値としています。