HTML を独学していると、あちらこちらで、説明文の中に「グローバル属性」と言う用語を見ます。なんだこれと言う状態なので、調べて纏めましょう。

    標準仕様で未定義の要素を含む、全ての HTML 要素で共通する属性の事を、グローバル属性と言います。但し、全ての要素に使用できますが、要素によっては、効果が無い場合もあります。なにそれ？どういう事？と思いますよね、調べて見ると、ブラウザによってサポートしていないものもあるので、chrome など、全てサポートしているメジャーなブラウザを使っていれば、問題はないと思います。

    ブログテンプレートのカスタマイズ等を経験すると、沢山のタグの設定をします。それも全部 HTML の要素です。「共通性」に関連付けて、アイキャッチの画像を選びました。これらの動物にも共通性があります。それは、なんでしょうかw

基本的なグローバル属性


● accesskey
：半角の英数字か記号を1文字指定

    ALTキーと指定したアクセスキーを同時に押すと、（マウスの代わりに）クリックイベントを発生させる事が出来るようになります。小文字の区別はしません。

例1：



例2：


ご飯食べに行きますか？

● autocapitalize ～ ユーザーの入力テキストを自動的に大文字に変換するかを指定
：none ～自動大文字化機能を無効にする
：sentences ～ 文の先頭文字を自動的に大文字化
：words ～ 単語の先頭文字を自動的に大文字化
：characters ～ 全ての文字を自動的に大文字化
：on ～ iOSから非推奨で、必要無く使わないこと
：off ～ iOSから非推奨で、必要無く使わないこと

    注意して欲しいのは、文章作成補助としては優秀な機能ですが、ユーザーが入力するフォームでは、意図した文字が入力できず、ストレスを与えてしまいます。名前一つだって、国によっては英数字で表現できないものもあり、autocapitalize="none" で無効にした方がいいです。ネットネームだって、大文字小文字混在で作る人がいますからね。

● class ～ 要素にクラスを割り当てる属性
：値は英数字等の組み合わせで指定

    クラス分けする事によって、スタイルシートのセレクターとして使ったり、JavaScript で特定の要素を選択してアクセスしたり、出来るようになります。尚、CSSでそれぞれ設定したクラスは、htmlで、値は空白で区切られる文字リストによって、複数指定ができます。

● contenteditable ～ ユーザーによる編集が可能かどうかを指定
：ture ～ 編集可能
：false ～ 編集不可

    要素に「contenteditable="ture"」を設定すると、その要素はクリックする事で編集できるようになります。この属性を設定しない場合は、親要素の設定を継承します。

● data-* ～ 要素に独自データを格納する
：任意の文字列

    構文は data-*="値（データ）" で、「data-」の後ろに、1文字以上の属性名を指定します。格納したデータは Element.dataset プロパティや JavaScript で動的に使用できるようになります。

● dir ～ 要素内の文字方向を指定する
：ltr ～ 英語の様に左から右へ読むテキスト
：rtl ～ アラビア語の様に右から左へ読むテキスト
：auto ～ 自動判定

    自動判定の場合は、サーバ側が文字方向を決定する文法に従った文字を見つかるまでアルゴリズムを適用して解析します。

● draggable ～要素をドラッグする事が出来るようにするかを指定する
：true ～ ドラッグ可能
：false ～ ドラッグ不可
：auto（デフォルト） ～ ブラウザの設定に従う

    ブラウザに従う場合は、画像、リンク、選択テキスト等、ドラッグ可能なものが多いです。例えばアプロードする時に、わざわざメニューやコマンドを使わなくても、画像やアイルをドラッグすれば出来るようになっていますよね。

● dropzone ～ 要素をドロップした時のデータ処理方法と種類を指定する
処理方法：copy（デフォルト） ～ ドラッグデーターをコピー
            ：move ～ ドラッグデータを移動
            ：link ～ 元データへのリンク
種類：s ～ 文字列
      ：f ～ ファイル

    構文は dropzone="処理方法 種類" と言うように、並べて指定する事ができますし、単一に処理方法または種類だけを指定する事もできます。現在は非推奨で、機能は使えるが、使うべきではないとされています。

● hidden ～ 関連性がまだない、若しくは既にない要素を非表示に指定する

    HTML5 で新たに導入した属性です。逆に、正当に表示すべきコンテンツには使用してはいけない事になっています。

● id ～ 要素に固有の ID を割り当てる
：id名 ～ スペースを含まない文字列で指定する

    主にスタイルシートのセレクターとして使う事が多く、JavaScript で DOM 操作する時にも便利です。

● lang ～要素内の言語コードを指定する
：ja ～ 日本語
：en ～ 英語
：en-us ～ 米国英語
：en-gb ～ 英cn国英語
：en-au ～ 豪州英語
：en-nz ～ ニュージーランド英語
：pt-br ～ ブラジルのポルトガル語
：zh ～ 中国語
：zh-tw ～ 台湾の中国語
：zh-hk ～ 香港の中国語
：zh-sg ～ シンガポールの中国語
：zh-cn ～ 中華人民共和国の中国語
：ko ～ 韓国語

    一部の言語コード例ですが、<html>タグに使えば、ドキュメント全体の言語コードを指定する事ができ、要素内に異なる言語コードを指定する事も出来ます。

● spellcheck ～ 要素内のテキストのスペルチェックをするかしないかを指定する
：true ～ スペルチェックをする
：false ～ スペルチェックをしない

    英語で機能しますが、日本語等漢字文化ではまだ使えません。

● style ～ CSSを要素に直接指定する

    style タグで括ったスタイルシートや外部CSSファイルで指定したスタイルを上書きします。sytle 属性に指定したスタイルが優先されます。

● tabindex ～ 要素のタブインデックスを指定する
：正の整数 ～ タブ移動時、指定した数値の順にフォーカスする
：負の整数 ～ タブ移動時にフォーカスしない
：0 ～ タブ移動時、ドキュメントにおける相対的な順番でフォーカスする

    いずれにしても、クリックによるフォーカスは出来ます。

● title ～ 要素の補足情報を指定する
：テキスト

    サポートされるブラウザ上で、要素の上にマウスカーソルを合わせると、1秒くらいで、指定したテキストをツールチップ（小さなテキストボックス）で表示させられます。

補足情報

    上記グローバル属性以外には、実験中の API がまだ幾つかあり、知りたい方は下記リンク先で確認する事ができます。ただ、機械翻訳らしいので、日本語の理解が少々難しいかも知れません。


    グローバル属性に関し、追加情報がある場合は、本文を随時更新して行きたいと考えております。

    最後に、アイキャッチの画像にある動物たちの共通性は、「アフリカで生息している」事でしたwww