HTML Living Standard/グローバル属性

グローバル属性（Global attributes）

グローバル属性は、HTMLの要素全てに対して指定可能な共通の属性群です。これらの属性は、HTML名前空間の要素に対してのみ定義され、他の名前空間の要素には適用されません。グローバル属性を使用することで、要素のスタイリング、識別、動作、アクセシビリティなどを制御できます。

グローバル属性一覧

識別とスタイリング

class：要素に1つ以上のクラス名を付与します。CSSでのスタイリングやJavaScriptでの要素選択に使用されます。複数のクラスはスペースで区切って指定できます。
id：要素に一意な識別子を付与します。ページ内で重複してはいけません。CSSセレクタ、JavaScriptでの要素参照、ページ内リンクのアンカーとして使用されます。
style：要素にインラインCSSスタイルを定義します。element.style プロパティを通じてJavaScriptからアクセス可能です。優先度は通常のCSSルールより高くなります。
part：シャドウDOMのスタイリングのためのパーツ名を指定します。CSSの::part()疑似要素からスタイリング可能になります。
exportparts：シャドウDOMの内部パーツを外部に公開します。カンマ区切りでパーツ名のマッピングを指定します。

カスタム要素とスロット

is：カスタム要素の動作を定義します。組み込み要素をカスタム要素として拡張する際に使用します。
slot：シャドウDOMにおいて、要素を特定のスロットに割り当てます。名前付きスロットとの対応付けに使用されます。

一般的な制御属性

accesskey：要素にキーボードショートカットを割り当てます。ブラウザやOSによって起動方法が異なる場合があります。
anchor：実験的な属性です。アンカー配置の基準点を指定します。（非標準）
autofocus：ページ読み込み時に自動的にフォーカスを受け取るべき要素を指定します。文書内で1つの要素にのみ指定すべきです。
contenteditable：要素をユーザーが編集可能にするかどうかを指定します。"true"、"false"、"inherit"のいずれかの値を取ります。
dir：テキストの方向性を制御します。"ltr"（左から右）、"rtl"（右から左）、"auto"の値を指定できます。
draggable：要素をドラッグ可能にするかどうかを指定します。ドラッグ＆ドロップAPIと組み合わせて使用します。
hidden：要素を非表示にします。display: none; と同様の効果がありますが、セマンティックな意味を持ちます。
inert：要素とその子孫要素を操作不能にします。フォーカスの受け取りやユーザー入力を無効化します。
lang：要素の言語を指定します。スクリーンリーダーの発音や翻訳ツールの動作に影響します。
spellcheck：スペルチェック機能を有効にするかどうかを指定します。テキスト入力が可能な要素で使用されます。
tabindex：タブキーによるフォーカス順序を指定します。負の値は順序から除外、0は自然な順序、正の値は指定した順序でフォーカスされます。
title：要素に関する追加情報を提供します。通常はツールチップとして表示されます。
translate：要素を翻訳すべきかどうかを指定します。"yes"または"no"の値を取ります。

データと拡張機能

data-*：要素にカスタムデータを付与します。JavaScriptから dataset プロパティを通じてアクセス可能です。
nonce：スクリプトの実行を制御するための一度限りのトークンを指定します。Content Security Policy (CSP)との連携に使用されます。

入力関連の属性

autocapitalize：テキスト入力時の自動大文字化の動作を制御します。"off"、"none"、"on"、"sentences"、"words"、"characters"の値を取ります。
autocorrect：テキスト入力時の自動修正機能を制御します。実験的な属性です。
enterkeyhint：仮想キーボードのEnterキーの表示を制御します。"enter"、"done"、"go"、"next"、"previous"、"search"、"send"の値を指定できます。
inputmode：仮想キーボードの種類を指定します。"none"、"text"、"decimal"、"numeric"、"tel"、"search"、"email"、"url"の値を取ります。
virtualkeyboardpolicy：実験的な属性です。仮想キーボードの表示ポリシーを制御します。
writingsuggestions：テキスト入力時の文章提案機能を制御します。

Microdata関連の属性

itemid：アイテムの一意な識別子を指定します。URLまたはその他のグローバルな識別子を指定できます。
itemprop：アイテムのプロパティを指定します。メタデータのプロパティ名を定義します。
itemref：文書内の他の場所にある関連プロパティを参照します。IDのリストをスペース区切りで指定します。
itemscope：新しいアイテムを定義します。値を持たないブール属性です。
itemtype：アイテムの種類を指定します。スキーマのURLを指定します。

詳細は「HTML Living Standard/マイクロデータ」を参照

UI関連の属性

popover：ポップオーバー要素の動作を制御します。"auto"、"manual"の値を取ります。

使用例

<!-- 基本的な属性の使用例 -->
<div id="container" 
     class="content-area primary"
     style="margin: 1em; padding: 1em;"
     lang="ja" 
     dir="ltr">
  コンテンツ
</div>

<!-- データ属性とMicrodataの使用例 -->
<article itemscope 
         itemtype="http://schema.org/Article"
         data-category="tech"
         data-author="山田太郎">
  <h1 itemprop="name">記事タイトル</h1>
  <div itemprop="articleBody">本文</div>
</article>

<!-- 入力要素の制御例 -->
<input type="text"
       id="editor"
       class="text-input"
       autocapitalize="sentences"
       autocorrect="on"
       enterkeyhint="send"
       inputmode="text"
       spellcheck="true">

<!-- カスタム要素とスロットの例 -->
<my-element is="custom-element">
  <span slot="header">ヘッダー</span>
  <div slot="content">コンテンツ</div>
</my-element>

<!-- ポップオーバーとイナート属性の例 -->
<div popover="auto" 
     class="popup"
     inert>
  ポップアップコンテンツ
</div>

注意事項

これらの属性は、HTML名前空間の要素に対してのみ定義されています。
他の名前空間（SVGやMathMLなど）の要素に対しては、これらの属性は定義されていません。
実装状況は、ブラウザによって異なる場合があります。
実験的な属性（anchor、autocorrect、virtualkeyboardpolicy）は、将来的に変更または削除される可能性があります。
class、id、style 属性は最も頻繁に使用される重要な属性ですが、過度な使用は保守性を低下させる可能性があります。
id 属性値は文書内で一意でなければならず、重複した場合の動作は未定義です。
インライン style の使用は、管理性の観点から可能な限り避け、外部スタイルシートを使用することが推奨されます。
data-* 属性は、独自の接頭辞を付けることで名前の衝突を避けることが推奨されます。
Microdataの属性（itemscope、itemtypeなど）は、検索エンジン最適化（SEO）に影響を与える可能性があります。

参考文献