HTML

この記事では、id・class・langなど、多くのHTML要素で共通して使えるグローバル属性の役割と基本を初心者向けに説明します。

この記事でわかること

グローバル属性が多くの要素で共通して使える属性であること
id・class・langなどの代表的な用途
グローバル属性と要素固有の属性を使い分ける方法

HTML global attributes, such as id and lang, are a handy set of attributes that can be applied to any element, letting you collectively control identification, language, and display behavior.

Global Attributes（グローバル属性）

グローバル属性とは？

HTML 要素を問わず指定できる属性: 標準仕様にない独自要素でも効く。; UI/アクセシビリティ/国際化/Shadow DOM/セキュリティなど横断機能を司る。; HTML Living Standard および WHATWG が更新を続ける動的領域。

グローバル属性ミニマップ

識別・装飾: id class style part; CSS/JS 掛け口・Shadow DOM スタイリング
国際化: lang dir translate; 言語・文字方向・機械翻訳のヒント
入力/編集: contenteditable inputmode enterkeyhint autocapitalize; エディタ化・ソフトキーボード最適化
アクセシビリティ: role aria-*各種; 意図を支援技術へ伝える
表示制御: hidden inert popover anchor; レンダリング/フォーカス/ポップオーバー
データ拡張: data-* item* 系; DOM⇄アプリ間メタデータ受け渡し
セキュリティ: nonce virtualkeyboardpolicy; CSP / キーロガー対策
操作性: tabindex accesskey draggable autofocus; キーボード操作・ドラッグ等

class

最も頻繁に使われるグローバル属性の一つが class 属性です。CSSやJavaScriptで要素を選択する際に用いられます。

使い方

HTML

<p class="highlight">これはハイライトされる文章です。</p>

上記の例では、CSSで .highlight を指定すると、このクラスを持つ要素全体に対してスタイルを適用できます。またJavaScriptのDOM操作でも、同じクラスを持つ要素をまとめて操作できます。

複数クラスの指定

HTML

<p class="highlight large-text">複数クラスを指定した例</p>

クラス名をスペース区切りで複数指定でき、柔軟にスタイリングやスクリプトでの操作が可能になります。

id

id 属性は、文書全体で一意（ユニーク）である必要がある特別な識別子を付与するために使用されます。要素を一意に識別したり、アンカーリンク（ページ内リンク）のターゲットに利用したり、JavaScriptで特定要素を直接取得・操作する際に便利です。

使い方

HTML

<h2 id="about-us">About Us</h2>

CSSでの指定例: #about-us { font-weight: bold; }
ページ内リンク: <a href="#about-us">About Usセクションへ移動</a>

注意点

id 属性の値は、ページ内で重複してはいけないというルールがあります。
重複すると、JavaScriptなどで要素を取得するときに誤動作の原因になります。

style

インラインでCSSを直接記述したい場合に使用します。ただし、外部スタイルシートや内部スタイルシートを使うのが原則的に望ましいです。メンテナンス性を考慮すると、インラインスタイルの多用は避けるのが一般的です。

使い方

HTML

<p style="color: red; font-size: 20px;">このテキストは赤色かつ20pxで表示されます。</p>

注意点

スタイルが増えるほどHTMLの可読性・保守性が下がる傾向があるので、外部CSSファイルへの切り出しを検討しましょう。

title

要素の追加情報や説明を短い文言で示すときに使います。マウスカーソルを上に乗せるとブラウザがツールチップとして表示する場合が多いです。また、支援技術(スクリーンリーダーなど)での読み上げ方法やSEOにも影響を及ぼす可能性があります。

使い方

HTML

<a href="https://example.com" title="公式サイトへのリンク">
	Example社公式サイト
</a>

アクセシビリティについて

title 属性のツールチップは、マウス操作が前提となるため、キーボードユーザーや一部の支援技術では十分に伝わらないことがあります。重要な情報は別の方法（テキストコンテンツやARIA属性など）でも提供するのが望ましいです。

lang

要素内部の言語を指定するために使用します。支援技術や検索エンジン、ブラウザが言語を正しく判別する指標になります。ページ全体のHTMLタグに設定することが多いですが、特定の要素内だけ言語が異なる場合にも役立ちます。

使い方（ページ全体）

HTML

<html lang="ja">
	<head> ... </head>
	<body> ... </body>
</html>

使い方（部分的）

HTML

<p>この部分は日本語です。</p>
<p lang="en">This part is in English.</p>

注意点

アクセシビリティ上、正しく言語タグを指定することが重要です。スクリーンリーダーの読み上げ精度が向上します。

translate

要素を翻訳ツールにかけるかどうかを指定します。yes または no を指定でき、たとえば自動翻訳をさせたくないブランド名や特殊な用語が含まれる箇所に translate="no" を設定しておくと、誤訳を防ぐ効果が期待できます。

使い方

HTML

<span translate="no">MyBrand</span> は弊社の登録商標です。

注意点

すべてを翻訳対象外にしてしまうと、利用者がページを翻訳したい場合に正しく翻訳されません。限定的に使用するのが望ましいです。

dir

テキストの方向を指定します。通常は ltr（左から右）や rtl（右から左）を指定するのに用います。アラビア語やヘブライ語など、右から左に読む言語を表示する場合に利用します。

使い方

HTML

<p dir="rtl">右から左へ表示される文章</p>

注意点

lang 属性と組み合わせて使用し、適切な言語と方向性を明示することで、アクセシビリティや表示の正確さが向上します。

tabindex

要素がフォーカスを受け取る順番（タブ順）を指定します。キーボード操作のしやすさを向上させるのに役立ちます。0、正の数、負の数で挙動が変わるため、使い方には注意が必要です。

値の意味

tabindex="0": 文書の通常のタブ順序に従いながら、要素をフォーカス可能にする
tabindex="-1": 通常のタブ順序から除外するが、JavaScriptなどからフォーカスをプログラム的に与えることはできる
tabindex="1" 以上の正数: タブ順序を早めることができるが、非推奨。タブの順序が複雑化し、アクセシビリティが低下する可能性がある

実際の例

HTML

<div tabindex="0">
	ここにタブでフォーカスを移動できます
</div>

アクセシビリティの観点

tabindex は誤用すると、キーボード操作の順番を混乱させる原因になるため、慎重に扱うべき属性です。

accesskey

要素に対して、キーボードショートカット（アクセラレータキー）を割り当てます。これにより、ユーザーが特定のキー操作で要素にフォーカスを移したりすることができます。

使い方

HTML

<button accesskey="s">[S] 検索</button>

OSやブラウザによってショートカットキーの組み合わせ（Alt + S など）は異なるため、ユーザー側で統一感がないのが実情です。

注意点

使う際は、ブラウザ・OS依存の衝突を避けるため、ショートカットキーを選ぶことが推奨されます。
ウェブアプリケーション全体でのショートカットキーの設計が必要。

contenteditable

要素の内容をユーザーが直接編集できるようにする属性です。

使い方

HTML

<div contenteditable="true">
	ここをクリックすると、テキストを編集できます。
</div>

主な用途

簡易的なWYSIWYGエディタの実装
入力フォーム以外でのテキスト編集機能

注意点

編集結果をサーバーに送信するには、JavaScriptで取得して送信する必要があります。
ブラウザごとに若干挙動が異なるため、十分なテストが必要です。

draggable

要素をドラッグ可能にするかを指定する属性です。true、false、auto を指定できます。draggable="true" で要素がドラッグ可能となり、ドラッグ&ドロップの機能をJavaScriptで実装できるようになります。

使い方

HTML

<img src="sample.png" draggable="true" alt="ドラッグ可能な画像" />

Drag and Drop API

ブラウザ提供のドラッグ&ドロップイベント（dragstart, dragover, drop など）を用いることで、画像やテキスト要素を自由にレイアウト変更したり、ファイルアップロードのUIを作成したりできるようになります。

spellcheck

要素内のテキストに対してスペルチェックを行うかどうかをブラウザに指示します。true または false を指定します。

使い方

HTML

<p contenteditable="true" spellcheck="true">
	ここでテキストのスペルチェックが行われる
</p>

注意点

どの言語でチェックするかは、通常 lang 属性の値やOS/ブラウザ設定に依存します。

hidden

要素が非表示であることを示します。CSSでの display: none; に近い振る舞いをし、スクリーンリーダーなどにも要素がないかのように振る舞うのが基本仕様です。ただしブラウザや支援技術によっては取り扱いが異なる場合もあるため注意が必要です。

使い方

HTML

<p hidden>この文章は非表示です。</p>

注意点

アクセシビリティ用途で「視覚的には非表示だが支援技術には読み上げてほしい」という場合には、別の手段（aria-hidden="false" などのARIA属性）を用いることがあります。

enterkeyhint

モバイル端末の画面キーボードに表示される「エンターキー」のラベルを指定します。ユーザーエージェントによっては無視される場合がありますが、特にモバイルにおける入力フィールドでユーザー体験を向上させるために活用できます。

値の例

enterkeyhint="search"
enterkeyhint="send"
enterkeyhint="done"
enterkeyhint="go"
など

使い方

HTML

<input type="text" enterkeyhint="search" />

注意点

対応していないブラウザでは無視されますが、対応している場合はソフトウェアキーボードのボタン表示が変わり、ユーザーにとって分かりやすくなります。

inputmode

モバイルデバイスなどで表示されるキーボードの種類を指定する属性です。たとえばメールアドレス入力用に記号を多く含むキーボードを表示したり、数字用キーボードを表示したりする場合に利用します。

値の例

none
text
tel
url
email
numeric
decimal
search

使い方

HTML

<input type="text" inputmode="email" />

このように指定することで、モバイル端末でメールアドレス入力に適したキーボードレイアウトが表示される可能性が高まります。

is

カスタム要素(カスタムタグ)や、または拡張された組み込み要素を使うために使用する属性です。HTMLのカスタム要素（Web Components）の仕組みと組み合わせて利用されますが、ややマニアックな領域です。

使い方例 (カスタム要素)

HTML

<button is="my-special-button">カスタムボタン</button>

JavaScriptでカスタム要素（my-special-button）として定義しておくと、標準の <button> を拡張した機能を使うことができます。

マイクロデータ関連属性 (itemscope, itemtype, itemprop など)

厳密には “Global Attributes” として一部扱われるマイクロデータ用の属性（itemprop, itemtype, itemscope, itemid, itemref）があります。構造化データをマークアップする際に使用します。検索エンジンやSNSなどでリッチスニペットを表示させる際に活躍します。

例: レシピ情報のマイクロデータ

HTML

<div itemscope itemtype="https://schema.org/Recipe">
	<h1 itemprop="name">フレンチトースト</h1>
	<p itemprop="description">
		卵と牛乳を使ったシンプルな朝食メニューです。
	</p>
</div>

このようにマイクロデータ属性を付与することで、検索エンジンに対してデータの構造を明示できます。

part

Shadow DOM内にある要素を、Shadow DOM外からスタイルを当てるために使う属性です。Web Componentsを使った高度なコンポーネント開発で役立ちますが、まだ実装状況にばらつきがあります。

使い方例

HTML

<!-- Shadow DOM内 -->
<div part="title">タイトル部分</div>

<!-- Shadow DOM外のCSS -->
:host ::part(title) {
	font-weight: bold;
	color: blue;
}

ユーザー定義のWeb Componentで、Shadow DOMのカプセル化を維持しながら外部から特定の部分にだけCSSを当てたいときに利用します。

nonce

コンテンツセキュリティポリシー（CSP）の設定時に用いられる属性で、インラインスクリプトやスタイルの安全性を担保するために使われます。適切に生成された nonce (number used once) を設定することで、CSPの制限下でも特定のスクリプトを許可することができます。

使い方

HTML

<script nonce="ランダム文字列">
	// 安全とみなされるインラインスクリプト
</script>

セキュリティ上の注意

nonce はリクエストごとに生成され、外部に漏れないようにする必要があります。
コンテンツセキュリティポリシーを正しく設定することで、XSS (クロスサイトスクリプティング) 攻撃をより厳格に防ぐ手段になります。

その他の考慮・補足情報

ARIA属性との関係: role や aria-* 属性はHTMLの標準仕様では「グローバル属性」に含まれないものの、多くの要素で利用可能であり、アクセシビリティ改善に密接に関わります。
使わない場合: 開発者が意識して使用しなければならないものもあれば、デフォルト動作を変えない場合には触れなくてもよい属性もあります。
対応状況: 一部のグローバル属性（autocapitalize, enterkeyhint, part など）はモバイル環境や特定ブラウザで限定的にサポートされていることがあります。常に最新のブラウザ対応状況を確認しましょう。

まとめ

HTMLのグローバル属性は、要素を問わず付与可能なため、その汎用性と重要性は非常に高いです。単に見た目や機能を追加するだけでなく、アクセシビリティや国際化、多言語サポート、セキュリティなど多岐にわたる役割を担っています。特に、アクセシビリティや入力支援などの分野で正しく理解・設定することで、ユーザー体験を大きく向上させられます。

初心者の方は、まずは class, id, style, title といったよく使う基本的な属性から習得すると良いでしょう。
中級者以上の方は、dir, translate, autocapitalize, inputmode などの少しマニアックな属性や、マイクロデータ属性、CSPに関わる nonce などに着目してみると、より高度な実装やアクセシビリティ向上が期待できます。
実際のプロジェクトでは、チーム内でのコーディング規約に合わせて、属性の利用を統一したり、目的に応じて正しく組み合わせることが大切です。

グローバル属性を正しく使いこなせば、HTML文書の品質が向上し、保守性やユーザーに対する利便性も高まります。ぜひ開発の中で積極的に活用してみてください。

HTML

この記事でわかること

Global Attributes（グローバル属性）

グローバル属性とは？

グローバル属性ミニマップ

最新リスト（2025-04 時点）

使い方

複数クラスの指定

使い方

注意点

使い方

注意点

使い方

アクセシビリティについて

使い方（ページ全体）

使い方（部分的）

注意点

使い方

注意点

使い方

注意点

値の意味

実際の例

アクセシビリティの観点

使い方

注意点

使い方

主な用途

注意点

使い方

使い方

注意点

使い方

注意点

enterkeyhint

値の例

使い方

注意点

inputmode

値の例

使い方

is

マイクロデータ関連属性 (itemscope, itemtype, itemprop など)

part

nonce

使い方

セキュリティ上の注意

その他の考慮・補足情報

まとめ