HTML5のグローバル属性（HTML）

勉強したはずなのにズッコケた、
Webデザイン技能検定の筆記試験復習シリーズ。
（令和元年度第３回）

☆：HTML5.1　～
★：HTML5　～

（１）ID・スタイル

　①id=""
　要素にIDを付ける。
　

　②class=""
　要素にクラス名を付ける。
　

　③style=""
　要素に直接スタイルシートを指定する。

（２）ユーザビリティ

　①title=""
　要素に補足情報を付ける。
　

　②accesskey=""
　要素にアクセスキーを割り当てる。
　

　③tabindex=""
　Tabキーによる移動順序を指定する。

（３）言語

　①lang=""
　要素内容の言語を指定する。

　②dir=""
　要素内容の書字方向を指定する。

　　ltr：左から右へ
　　rtl：右から左へ
　　auto：自動

（４）ドラッグ・ドロップ
　

　①draggable=""（☆）
　ドラッグが可能かどうかを指定する。
　True/Falseで指定する。

　省略時はブラウザのデフォルト動作となるが、
　一般的には「選択されたテキスト」、「img要素」、
　「href属性」が指定されたa要素はドラッグ可能、
　それ以外はドラッグ不可となることが多い様子。

　ドラッグしたときに画像や文字がくっついていくような動作になるか（True）、ならないか（False）という感じ。

　②dropzone=""（☆）
　ドロップしたアイテムの受け入れ方法を指定する。

　…なんかちょっと動作が怪しい感じ（個人調べ）。

　ドロップ可能な領域に対して、
　　copy（コピーを受け入れる／初期値）、
　　move（アイテム移動）、
　　link（アイテムへのリンクを作成）

　や、受け入れるアイテム種類
　　string: ～（文字列）
　　file: ～（ファイル名とバイナリデータ）

　を指定するみたい。

（５）編集・スペルチェック

　①contenteditable="" （★）
　要素内容が編集可能かどうかを指定する。

　true：編集可能
　false：編集不可
　空文字列：編集可能

　省略時はブラウザのデフォルト動作　or　親要素の設定。

　②spellcheck=""（★）
　要素内容のスペルチェックの有無を指定する。
　日本語は対象外らしい。

　true：チェックあり
　false：チェックなし
　空文字列：チェックあり

　省略時はブラウザのデフォルト動作　or　親要素の設定。

　スペルが間違っていると、wordでよく出てくる
　赤線ウェーブが表示される感じ。

　③translate=""（★）
　翻訳対象にするかどうかを指定する。
　…なんかちょっと動作が怪しい感じ（個人調べ）。

（６）その他

　①contextmenu=""（☆）
　 要素とコンテキストメニューを関連付ける。
　対応ブラウザがFireFoxのみ。

　contextmenu属性
　　＋
　（contextmenu属性で指定したidを持つ）menuタグ
　のセットで使う。

　右クリック（Winの場合）すると表示されるやつ。（語彙力）

（イメージ）

<p contextmenu="example">コンテキストメニュー</p>

<menu type="context" id="example">
<menuitem label="メニュー項目A" onclick="alert('メニュー項目Aのアラート');">
<menuitem label="メニュー項目B" onclick="alert('メニュー項目Bのアラート');">
<menuitem label="メニュー項目C" onclick="alert('メニュー項目Cのアラート');">
</menu>

　②hidden（★）
 　関連性がないことを表す。
　利用規約に同意すると出現するfieldset みたいな感じ。

【出典】

HTML5/グローバル属性/hidden属性 関連性がないことを表す - TAG index