目次
はじめに
HTMLには、それぞれの要素に固有の属性が存在しますが、すべての要素で共通して使える「グローバル属性」があるのをご存じですか？
代表的なのは id や class ですが、実は結構な数が定義されています。
これらを理解しておくことで、
- コードの管理がしやすくなる
- アクセシビリティやSEOの改善につながる
- JavaScriptとの連携がスムーズになる
といったメリットがあります。
この記事では、HTMLグローバル属性を一覧表と実例付きで徹底解説します。
初心者の方でもすぐに使える知識として、ぜひ参考にしてください！
HTMLグローバル属性一覧（26種類）
| 属性名 | 役割 | 指定できる値 |
|---|---|---|
| accesskey | ショートカットキーを割り当てる | 任意の文字 |
| autocapitalize | 入力時の大文字化制御 | none, sentences, words, characters |
| autofocus | ページ読み込み時に自動フォーカス | 真偽属性 |
| class | クラス名を指定 | 半角スペース区切り文字列 |
| contenteditable | 要素を編集可能にする | true, false |
| dir | テキストの方向 | ltr, rtl, auto |
| draggable | ドラッグ可能かどうか | true, false, auto |
| enterkeyhint | 仮想キーボードのEnterキー表示 | enter, done, searchなど |
| hidden | 要素を非表示にする | 真偽属性 |
| id | 要素を一意に識別 | 任意の文字列 |
| inert | 要素を操作不可にする | 真偽属性 |
| inputmode | 入力モードの指定 | numeric, email, urlなど |
| is | カスタム要素を拡張 | カスタム要素名 |
| itemid | Microdata：一意識別子 | URLなど |
| itemprop | Microdata：プロパティ名 | 任意の文字列 |
| itemref | Microdata：関連要素の参照 | 要素IDリスト |
| itemscope | Microdata：スコープ開始 | 真偽属性 |
| itemtype | Microdata：型のURL | URL |
| lang | 言語を指定 | ja, en など |
| nonce | CSP用の乱数 | サーバー生成文字列 |
| part | Shadow DOMのパーツ指定 | 識別子 |
| role | アクセシビリティ上の役割 | button, dialogなど |
| slot | Shadow DOMの差し込み先 | 任意の文字列 |
| spellcheck | スペルチェック有効化 | true, false |
| style | インラインCSS | CSS宣言列 |
| tabindex | フォーカス順序を指定 | 整数値 |
| title | 補足説明 | 任意の文字列 |
| translate | 翻訳対象かどうか | yes, no |
参照元：MDN
各属性の解説（実例付き）
1. accesskey（ショートカットキー）
<a href="/save" accesskey="s">保存</a>
要素にキーボードショートカットを割り当てます。OSやブラウザで挙動が異なるため、多用は控えましょう。
2. autocapitalize（入力時の大文字化制御）
<input autocapitalize="none" placeholder="メールアドレス">
スマホ入力時の自動大文字化を防止。メールやパスワード入力で便利です。
3. autofocus（自動フォーカス）
<input type="search" autofocus>
ページ読み込み時に自動でフォーカスが当たります。1ページにつき1要素のみ有効。
4. class（クラス名）
<button class="btn primary">送信</button>
CSSやJavaScriptで操作するための識別子。複数指定できます。
5. contenteditable（編集可能にする）
<div contenteditable="true">ここを書き換えられます</div>
要素の中身をユーザーが直接編集できます。WYSIWYGエディタで利用されます。
6. dir（テキストの方向）
<p dir="rtl">مرحبا</p>
右から左に書く言語（アラビア語、ヘブライ語など）に対応。
7. draggable（ドラッグ可否）
<li draggable="true">ドラッグ可能</li>
HTML要素をドラッグ可能にします。並べ替えUIやDnD機能に利用。
8. enterkeyhint（仮想キーボードEnter表示）
<input type="text" enterkeyhint="search">
スマホキーボードのEnterキーに「検索」「送信」などのラベルを表示。
9. hidden（非表示にする）
<div hidden>読み込み中…</div>
要素を非表示にします。スクリーンリーダーにも読み上げられません。
10. id（一意の識別子）
<h2 id="about">この見出しにリンクできます</h2>
文書内で一意に要素を特定します。リンク先やJavaScript操作に必須。
11. inert（操作不可にする）
<main inert>この部分は操作できません</main>
モーダルの背後を無効化するなどに利用されます。
12. inputmode（入力モード）
<input inputmode="numeric" placeholder="数字だけ">
スマホの入力キーボードを制御できます。電話番号や金額入力に便利。
13. is（カスタム要素拡張）
<button is="fancy-button">OK</button>
既存要素をカスタム要素として拡張。実務ではあまり使われません。
14〜18. Microdata関連（構造化データ）
<div itemscope itemtype="https://schema.org/Person">
<span itemprop="name">山田太郎</span>
</div>
- itemid：一意識別子（URLなど）
- itemprop：プロパティ名
- itemref：関連する要素の参照
- itemscope：スコープ開始
- itemtype：型をURLで指定
SEOでの構造化データ表現に利用されます。
19. lang（言語指定）
<p lang="en">Accessibility</p>
要素の言語を指定。スクリーンリーダーや翻訳サービスで正しく扱われます。
20. nonce（CSP用乱数）
<script nonce="abc123">alert("OK");</script>
セキュリティ対策として、特定のスクリプトのみ実行を許可します。
21. part（Shadow DOMパーツ指定）
<div part="label">ボタンラベル</div>
Shadow DOM内の要素に外部スタイルを当てたいときに使用。
22. role（要素の役割）
<div role="navigation">ナビゲーション</div>
スクリーンリーダーに「この要素はナビゲーションです」と伝えます。
23. slot（差し込み先）
<slot name="title"></slot>
Web Componentsの中で、コンテンツを差し込む場所を指定します。
24. spellcheck（スペルチェック）
<textarea spellcheck="false"></textarea>
入力欄でスペルチェックを有効／無効にできます。
25. style（インラインCSS）
<p style="color:red;">赤文字</p>
直接スタイルを当てます。保守性の観点から多用は避けましょう。
26. tabindex（フォーカス順序）
<div tabindex="0">ここにフォーカス可能</div>
キーボード操作でのフォーカス順序を制御します。アクセシビリティ向上に重要。
27. title（補足説明）
<abbr title="HyperText Markup Language">HTML</abbr>
要素に補足説明をつけます。マウスオーバーで表示されます。
28. translate（翻訳対象かどうか）
<span translate="no">Aggressive Noise Design</span>
自動翻訳時に対象とするか指定。固有名詞やブランド名で有効です。
まとめ
今回は HTMLグローバル属性の一覧とサンプルコード付きで解説しました。
初心者がまず押さえるべきは
- id / class / title / lang / tabindex（基礎）
- hidden / autofocus / inputmode（便利）
- role / translate（アクセシビリティ・国際化）
のあたりです。
理解が進んできたら、次のステップとして data- 属性* や ARIA属性 にもチャレンジすると、さらに実践的なコーディング力が身につきますよ。
最近はHTML＆CSSで書いてからWordpressに乗っける形で納品しているので、スクールで習うなら両方教えているところを選ぶ方が良いですよ。
