HTMLのグローバル属性：全ての要素に指定できる共通の属性

全てのHTML要素に指定できる共通の属性

グローバル属性は、全てのHTML要素に対して指定できる共通の属性です。HTMLのタグには、それぞれの役割りに応じて固有の属性が実装されている場合があります。それ以外の汎用的な機能が、グローバル属性としてまとめられています。

グローバル属性の中には、特定の条件を満たさなければ効果が得られないもの、逆に特定の条件下では効果が無効になるものが含まれます。全てのグローバル属性を暗記する必要はありません。実際にウェブページを制作する過程で、必要な物だけ個別に覚えていきましょう。

グローバル属性の一覧

属性	概要
accesskey	キーボードショートカットの文字を指定する。
autocapitalize	入力テキストの自動的な大文字化の方法を指定する。
autocorrect	入力テキストのスペルミスを自動的に修正するかどうかを指定する。
autofocus	要素が読み込まれたときのオートフォーカスを指定する。
class	要素に任意のクラス名を指定する。
contenteditable	ユーザーによる編集を可能にするかどうかを指定する。
data-*	要素に付与するカスタムデータを指定する。
dir	テキストの書字方向を指定する。
draggable	要素がドラッグ可能かどうかを指定する。
enterkeyhint	仮想キーボードの`Enter`にアクション・ラベルを指定する。
exportparts	シャドウツリー内に存在する要素をパーツ名でエクスポートする。
hidden	要素を非表示の扱いにする。
id	文章の中で一意の識別子を指定する。
inert	ユーザーの入力イベントを無視する。
inputmode	要素を編集する際に使用する仮想キーボードの種類を指定する。
is	標準の要素にカスタム要素のような振る舞いを指定する。
itemid	項目の中で一意の識別子を指定する。
itemprop	項目にプロパティを追加する。
itemref	`itemscope`属性を持つ要素に、関連付けの識別子を指定する。
itemscope	要素に関連付けられるメタデータのスコープを指定する。
itemtype	データ構造の中で`itemprop`属性で使用される語彙を指定する。
lang	要素の言語を指定する。
nonce	暗号化ノンス (number used once)に関する指定を行う。
part	要素の部品名の空白区切りのリストを指定する。
popover	要素をポップオーバー要素として指定する。
role	要素に含まれるコンテンツの役割りを指定する。
slot	シャドウDOMのシャドウツリー内にあるスロットを要素に割り当てる。
spellcheck	要素でスペルチェックを行うかどうかを指定する。
style	要素に適応するCSSを指定する。
tabindex	入力フォーカスを受け入れる要素の順序を指定する。
title	要素にアドバイザリー情報を指定する。
translate	要素の内容を翻訳可能にするかどうかを指定する。
writingsuggestions	ブラウザが指定した入力補完の有無を指定する。

`accesskey`属性の解説

accesskey属性は、その要素にアクセスするキーボードショートカットの文字を指定します。使用できる値は、キーボードで入力できる一文字、または空白区切りの文字候補のリストです。ブラウザは、提案された文字リストの中からコンピューターのキーボードに存在する最初の文字を採用します。

キーボードのショートカットは、OSやブラウザによって事前に指定されているものがあるため、競合する場合があります。重複したアクセスキーは、ほとんどの場合正しく機能しません。そのため、ユーザーの操作や利便性を考慮して指定する必要があります。

アクセスキーを有効にする方法は、OSやブラウザによって異なります。

ブラウザ	Windows	Mac
Chrome	`Alt` + `key`	`Control` + `Option` + `key`
Edge	`Alt` + `key`	`Control` + `Option` + `key`
Firefox	`Alt` + `Shift` + `key`	`Control` + `Option` + `key`
Safari	無し	`Control` + `Option` + `key`

値 / Value

キーボードで入力できる文字: 一般的には［a - z］の英字、または［0 - 9］の数字を使用します。

サンプル


<!-- アルファベットによる指定 -->
<ul>
	<li><a href="#" accesskey="p">[p]前のページ</a></li>
	<li><a href="#" accesskey="n">[n]次のページ</a></li>
</ul>

<!-- 数字による指定 -->
<div>
	<button accesskey="1">[1]Home</button>
	<button accesskey="2">[2]Setting</button>
</div>

`autocapitalize`属性の解説

autocapitalize属性は、ユーザーによって入力された文字に対して自動的に大文字化を行うか、どこを大文字化するかを制御します。

この属性は、<input>や<textarea>などの文字入力が可能な要素、またはcontenteditable属性を付与して編集可能にした要素に対して機能します。

値 / Value

off / none: 大文字化を行いません。全ての文字は小文字のままです。
on / sentences: 先頭の文字を大文字にします。それ以外の文字は小文字のままです。
words: 単語ごとに最初の文字を大文字にします。それ以外の文字は小文字のままです。
characters: 全ての文字を大文字にします。

サンプル


<!-- 入力要素に対する指定 -->
<input type="text" autocapitalize="off">
<input type="text" autocapitalize="on">

<!-- 編集可能な属性を付与した要素に対する指定 -->
<p contenteditable="true" autocapitalize="on">

`autocorrect`属性の解説

autocorrect属性は、ユーザーの入力した文字に対してスペルミスを自動的に修正するかどうかを指定します。修正の対象となる内容や動作は、ユーザーエージェントと環境に依存しています。

この属性は、<input>、<textarea>、contenteditable属性が指定されている要素などの編集可能なテキストに対して機能します。ただし、<input>要素のtype属性がpassword、email、urlの場合は無効となります。

値 / Value

off: テキストの自動的な修正を無効にします。
on / ""（空の値）: 綴りや句読点の誤りを自動的に修正する機能を有効にします。

サンプル


<!-- 入力要素に対する指定 -->
<input type="text" autocorrect="off">
<input type="text" autocorrect="on">

<!-- 空白の値を指定 -->
<textarea name="memo" autocorrect="">

<!-- 編集可能な属性を付与した要素に対する指定 -->
<p contenteditable="true" autocorrect="on">

`autofocus`属性の解説

autofocus属性は、ページの読み込み時、または<dialog>に含まれる特定の要素に対して、自動的にフォーカスされるものを設定します。複数の要素に指定されている場合は、最初に見つかったものが対象となります。

値 / Value

なし: この属性は論理属性です。存在していればtrue、存在していなければfalseとなります。

サンプル


<!-- ダイアログの初期フォーカスを指定 -->
<dialog>
	<p>メッセージ</p>
	<button autofocus>閉じる</button>
</dialog>

`class`属性の解説

class属性は、要素に任意のクラス名を指定します。この値は空白区切りのリスト形式で、CSSやJavaScriptで参照する識別子として扱えます。

クラス名として指定できる値は、ホワイトスペースを除く任意のUnicode文字です。開発環境に合わせて自由な名称を与えることが可能です。ただし、CSSやJavaScriptで参照する識別子として使用する場合は、有効な形式でなければなりません。

値 / Value

a - z / A - Z: 英字の小文字・大文字の範囲に属するASCII文字です。
0 - 9: 半角入力の数字です。
-（ハイフン）: 半角入力のハイフンです。
_（アンダースコア）: 半角入力のアンダースコアです。

サンプル


<!-- 小文字と大文字は区別される -->
<div class="block"></div>
<div class="Block"></div>

<!-- 単語を区切って指定 -->
<div class="box-item"></div>
<div class="box_item"></div>

<!-- 数字を組み合わせた指定 -->
<div class="item001"></div>
<div class="item002"></div>

<!-- ハイフンを先頭に指定 -->
<div class="-name"></div>
<div class="--name"></div>

<!-- CSSでは無効となる形式 -->
<div class="123">先頭が数字</div>
<div class="-123">ハイフンの直後に数字</div>
<div class="abc.def">英字以外のASCII文字</div>

`contenteditable`属性の解説

contenteditable属性は、要素に含まれる内容がユーザーによる編集を可能にするかどうかを指定します。編集可能な場合、ブラウザはその要素を編集可能なものにします。

通常であれば、<div>や<p>などの要素は編集できませんが、この属性でtrueを指定した場合、ユーザーが内容のテキストを編集できる状態になります。この属性で指定した値は子要素にも継承します。

値 / Value

true / ""（空の値）: 要素の内容が編集可能であることを示します。
false: 要素の内容が編集不可であることを示します。
plaintext-only: 要素の内容のうち、プレーンテキストが編集可能であることを示し、リッチテキスト形式は無効とします。

サンプル


<!-- 要素の内容を編集可能にする -->
<div contenteditable="true"></div>
<div contenteditable></div>

<!-- プレーンテキストのみ編集可能にする -->
<p contenteditable="plaintext-only"></p>

<!-- 親要素の値は子要素にも継承する -->
<ul contenteditable="true">
	<li>編集項目１</li>
	<li>編集項目２</li>
	<li>編集項目３</li>
</ul>

`data-*`属性の解説

data-*属性は、カスタムデータを定義して、HTMLとDOMの間で固有の情報を交換できるようにします。data-以降に続く属性名は、開発環境に合わせて任意の文字列で定義します。

カスタムデータは、CSSの属性セレクタやJavaScriptの処理と連携するため、それらが認識できる形式で記述することが求められます。基本的にはユーザーが参照するものではなく、機械的な処理を補助する目的で命名します。

全てのカスタムデータは、その属性を設定した要素のHTMLElementインターフェイスを通して使用できます。JavaScriptを利用する場合は、HTMLElement.datasetプロパティでカスタムデータにアクセスできます。

値 / Value

a - z / A - Z: 英字の小文字・大文字の範囲に属するASCII文字です。
0 - 9: 半角入力の数字です。
-（ハイフン）: 半角入力のハイフンです。
_（アンダースコア）: 半角入力のアンダースコアです。

サンプル


<!-- 要素に固有のカスタムデータを与える -->
<div data-mode="block"></div>

<!-- 要素の処理を補助するカスタムデータを与える -->
<table data-columns="3">
	<tr>
		<td>A1</td>
		<td>B1</td>
		<td>C1</td>
	</tr>
</table>

<!-- 属性名のみをカスタムデータとして用いる -->
<div data-ymd-20451010></div>

<!-- 複数のカスタムデータを付与する -->
<div data-x="123" data-y="456" data-z="789"></div>

`dir`属性の解説

dir属性は、テキストの書字方向を指定します。文書の中に左下記の言語と右書きの言語が混在しているときなど、特定の範囲の書字方向を変えることができます。

この属性は、CSSのdirectionやunicode-bidiプロパティで上書きされます。文章の意味論的な機能を期待する場合は属性を使用し、装飾的に見た目を変えるだけの場合はCSSを使用してください。

値 / Value

ltr: 文字列を左から右へ（left to right）配置します。英語や日本語などの左書きの言語に対応します。
rtl: 文字列を右から左へ（right to left）配置します。アラビア語やヘブライ語などの右書きの言語に対応します。
auto: ユーザーエージェントの設定に従います。要素の文字列を読み込んで適切な書字方向を決定します。

サンプル


<!-- 左書きの書字方向を指定 -->
<p dir="ltr">英語や日本語などの左書きの言語</p>

<!-- 右書きの書字方向を指定 -->
<p dir="rtl">アラビア語やヘブライ語などの右書きの言語</p>

<!-- ユーザーエージェントに任せる -->
<p dir="auto">文字列を判別して自動的に書字方向を決定</p>

`draggable`属性の解説

draggable属性は、HTML Drag and Drop API を用いて要素をドラッグできるかどうかを指定します。指定できる要素は、HTML名前空間に属するもので、SVGやMathMLには適用できません。

要素をドラッグ＆ドロップできる状態にするには、JavaScriptでドラッグ開始、ドラッグ中、ドロップしたときの処理を定義しておく必要があります。

値 / Value

true: 要素がドラッグ可能であることを示します。
false: 要素がドラッグ不可であることを示します。

サンプル


<!-- 入れ替え可能なリスト -->
<ul>
	<li draggable="true">項目1</li>
	<li draggable="true">項目2</li>
	<li draggable="true">項目3</li>
</ul>

`enterkeyhint`属性の解説

enterkeyhint属性は、仮想キーボードのEnterキーに、どのようなアクションラベルまたはアイコンを表示するかを指定します。

<input>や<textarea>などの入力項目や、contenteditable属性が指定されている編集可能な要素は、inputmode属性を指定してどのような仮想キーボードを表示するかを制御できます。その際、Enterキーに表示するラベルを指定することによって、ユーザーの操作が何を意味するのかを明確にできます。

値 / Value

enter: 改行を表します。
done: 完了を表します。
go: ターゲットに移動を表します。
next: 次に移動を表します。
previous: 前に移動を表します。
search: 検索を表します。
send: 送信を表します。

サンプル


<!-- フォームの入力項目に指定 -->
<form>
	<input enterkeyhint="next">
	<input enterkeyhint="done">
</form>

`exportparts`属性の解説

exportparts属性は、シャドウツリーに含まれる要素のパーツ（part）名を指定して、外側からスタイルを適用できるようにエクスポートします。

シャドウツリーは、通常のDOMからは隔離された状態であるため、外部のCSSからアクセスしてスタイルを適用することができません。そこで、シャドウツリーに属する要素にpart属性で識別子を与え、exportparts属性を使って、シャドウツリーの一部をシャドウDOMの外部から見えるようにします。

値 / Value

part名: シャドウツリーに含まれる要素のpart値を参照します。

サンプル


<!-- シャドウツリーのパーツを指定 -->
<custom-tag exportparts="foo">
	<p part="foo">Shadow Parts</p>
	<p part="bar">Shadow Parts</p>
</custom-tag>

`hidden`属性の解説

hidden属性は、ブラウザがその要素を表示すべきではないことを示します。この属性が指定されている間、その要素は閲覧中のページとは関係がないものとみなされます。本来、表示されても問題のない正当な要素を隠す目的で使用してはいけません。

この属性が指定された要素は、ソースコード上には存在しますが画面には映し出されません。本来であれば要素が配置される場所も、存在しないものとして別の要素で埋められます。

CSSのdisplayプロパティは、この属性の状態を上書きします。例えば、hidden属性で隠されている要素にdisplay: block;を追加した場合は、画面に表示されます。

値 / Value

hidden: 要素を表示すべきでないものに指定します。ブラウザの「ページ内検索」機能やフラグメントナビゲーションからも除外します。
until-found: 要素を一時的に非表示である状態にします。ブラウザの「ページ内検索」機能やフラグメントナビゲーションからはアクセスできます。
値なし / 空文字列: 値を省略したり無効な値を付与した場合は、hidden状態に設定されます。

サンプル


<!-- 要素を非表示に指定 -->
<p hidden="hidden">非表示にする要素</p>

<!-- hiddenとみなされる値 -->
<p hidden>値の省略</p>
<p hidden="">空の値</p>
<p hidden="what">無効の値</p>

<!-- 一時的な非表示に指定 -->
<div hidden="until-found">一時的な非表示</div>

`id`属性の解説

id属性は、ドキュメントの中で一意となる識別子を指定します。リンクのジャンプ先として指定するURLフラグメント、CSSやJavaScriptで参照する識別子として扱えます。

ID名として指定できる値は、ホワイトスペースを除く任意のUnicode文字です。開発環境に合わせて自由な名称を与えることが可能です。ただし、CSSやJavaScriptで参照する識別子として使用する場合は、有効な形式でなければなりません。

値 / Value

a - z / A - Z: 英字の小文字・大文字の範囲に属するASCII文字です。
0 - 9: 半角入力の数字です。
-（ハイフン）: 半角入力のハイフンです。
_（アンダースコア）: 半角入力のアンダースコアです。

サンプル


<!-- 小文字と大文字は区別される -->
<div id="name"></div>
<div id="Name"></div>

<!-- 単語を区切って指定 -->
<div id="item-name"></div>
<div id="item_name"></div>

<!-- 数字を組み合わせた指定 -->
<div id="item001"></div>
<div id="item002"></div>

<!-- ハイフンを先頭に指定 -->
<div id="-name"></div>
<div id="--name"></div>

<!-- CSSでは無効となる形式 -->
<div id="123">先頭が数字</div>
<div id="-123">ハイフンの直後に数字</div>
<div id="abc.def">英字以外のASCII文字</div>

`inert`属性の解説

inert属性は、要素を不活性の状態にしてユーザーの操作やイベントを無効にします。この属性が指定された要素は、以下の状態になります。

要素にフォーカスが当たらないようになる。
ブラウザの「ページ内検索」の対象にならない。
ユーザーがクリックしても、clickイベントが発行されなくなる。
ユーザーが要素の中のテキストを選択できないようになる。
編集可能な要素であっても、ユーザーが要素の中のテキストを編集できないようになる。
アクセシビリティーのツリーから除外される。

値 / Value

なし: この属性は論理属性です。存在していればtrue、存在していなければfalseとなります。

サンプル


<!-- 特定の要素を不活性に指定 -->
<div inert>不活性にしたコンテンツ</div>

`inputmode`属性の解説

inputmode属性は、ユーザーが要素の内容を編集しようとした時に、ブラウザが立ち上げる仮想キーボードの種類や構成に関するヒントを与えます。この属性は、<input>や<textarea>などの入力項目や、contenteditable属性が指定されている編集可能な要素で使用します。

値 / Value

text: 現在のユーザー環境における標準的な入力キーボードを提案します。これが既定値です。
decimal: 数字を入力するキーボードを提案します。[0 - 9]の数字のほかに、ユーザーのロケール上で適切な区切り文字（,または.）を含みます。負号キーを表示するかは端末によります。
numeric: 数字を入力するキーボードを提案します。[0 - 9]の数字のみを入力する項目で使用します。負号キーを表示するかは端末によります。
tel: 電話番号を入力するテンキーを提案します。[0 - 9]の数字のほかに、アスタリスク（*）とナンバー（#）を含みます。この機能を使用する場合、<input type="tel">を優先的に採用してください。
email: メールアドレスの入力に最適化された仮想入力キーボードを提案します。この機能を使用する場合は、<input type="email">を優先的に採用してください。
search: 検索キーワードの入力に最適化された仮想キーボードを提案します。この機能を使用する場合は、<input type="search">を優先的に採用してください。
url: URLの入力に最適化された仮想入力キーボードを提案します。この機能を使用する場合は、<input type="url">を優先的に採用してください。
none: 仮想キーボードなしを提案します。ドキュメント側で独自のキーボード入力を実装している場合に使用します。

サンプル


<!-- 仮想キーボードのヒントを提案 -->
<p contenteditable="true" inputmode="tel">編集可能な要素</p>

<!-- より適切な記法 -->
<input inputmode="tel">		⇒ <input type="tel">
<input inputmode="email">	⇒ <input type="email">
<input inputmode="search">	⇒ <input type="search">
<input inputmode="url">		⇒ <input type="url">

`is`属性の解説

is属性は、カスタマイズされた組み込み要素の名前を指定して、通常のHTML要素とカスタム要素を関連付けます。この属性を使用する場合、指定されたカスタム要素が現在の文書で正常に定義されている必要があります。

値 / Value

カスタム要素名: 現在の文書で正常に定義されているカスタム要素の中から、関連付けたい名前を指定します。

サンプル


<!-- 特定の要素を不活性に指定 -->
<script>
	class CustomButton extends HTMLButtonElement {
		constructor() {
			super();
			this.addEventListener("click", () => {
				// 処理内容
			});
		}
	}
	customElements.define("sample-button", CustomButton, { extends: "button" });
</script>
<button is="sample-button">カスタムボタン</button>

`itemid`属性の解説

itemid属性は、マイクロデータで使用する固有のグローバル識別子を与えます。この属性は、itemscope属性とitemtype属性を持つ要素に対して有効となります。

マイクロデータは、ウェブページ上のコンテンツに検索エンジンやウェブクローラー向けのメタデータを埋め込むための仕組みです。要素に付加した属性の値を組み合わせて、コンテンツ同士の関連性やユーザーの利便性を向上させる情報を提供するために使用します。

値 / Value

有効なURI: WHATWGの仕様では、itemidの属性の値はURLでなければならないと定義されています。しかし、先行の事例ではURNの利用も見受けられます。

サンプル


<!-- 書籍情報のマイクロデータを作成 -->
<div 
	itemscope
	itemtype="https://schema.org/Book"
	itemid="urn:isbn:XXX-XXXXXXXXXX">
	<h2 itemprop="name">Title</h2>
	<p itemprop="author">Author</p>
	<p itemporp="genre">Genre</p>
	<p itemprop="datePublished">Publication date</p>
</div>

`itemprop`属性の解説

itemprop属性は、マイクロデータで使用するアイテムにプロパティ名を追加します。この属性は、itemscope属性とitemtype属性を持つ要素の子要素に対して使用します。

ひとつのプロパティは、プロパティ名とプロパティ値のペアで構成されます。プロパティ名に使用できる値は、itemtype属性によって指定したアイテムの型（語彙）によって異なります。

値 / Value

有効な文字列またはURI: itemtype属性で指定した語彙空間で有効な文字列またはURI。主に使用されているのは、schema.orgの構造です。

サンプル


<!-- 複数のプロパティを持つアイテム -->
<div itemscope itemtype="URL" itemid="URI">
	<span itemprop="XXXXXX">Prop 1</span>
	<span itemprop="XXXXXX">Prop 2</span>
	<span itemprop="XXXXXX">Prop 3</span>
</div>

`itemref`属性の解説

itemref属性は、マイクロデータで使用するアイテムの範囲外にあるプロパティとの関連付けを行います。この属性は、itemscope属性とitemtype属性を持つ要素の子に属さない要素のid属性の値を参照します。

itemref属性は、マイクロデータのデータモデルの一部ではなく、ツリー構造になっていない情報を関連付ける構文構造です。

値 / Value

参照する要素のID値: itemref属性で参照する値は、参照先の要素に付加されたid属性の値です。複数の値を参照する場合は、空白区切りのリスト形式で指定します。

サンプル


<!-- 参照元のアイテム -->
<div itemscope itemtype="URL" itemid="URI" itemref="author">
	<span itemprop="XXXXXX">Prop 1</span>
	<span itemprop="XXXXXX">Prop 2</span>
	<span itemprop="XXXXXX">Prop 3</span>
</div>

<!-- 参照先の要素 -->
<p id="author"><small itemprop="author">Author Name</small> is a writer who specializes in science fiction.</p>

`itemscope`属性の解説

itemscope属性は、マイクロデータとして使用するメタデータのスコープを定義します。ある要素にitemscope属性を追加すると、新しいアイテムが作成されます。アイテムは名前と値の組で構成された情報のまとまりです。

itemscope属性を持つ要素は、合わせてitemtype属性またはitemref属性を指定する必要があります。それらの属性を持つ要素には、id属性を指定することができます。id属性で指定した値は、グローバルな識別子として他のアイテムから参照する際などに使用できます。

値 / Value

なし: この属性は論理属性です。存在していればtrue、存在していなければfalseとなります。

サンプル


<!-- アイテムのスコープを定義する -->
<div itemscope>
	<span>スコープの範囲内</span>
</div>

<!-- アイテムに必要な属性 -->
<div itemscope itemtype="URL">
	<span itemprop="XXXXXX">Prop</span>
</div>

<!-- アイテムの範囲外にあるプロパティを参照 -->
<div itemscope itemref="example"></div>
<p id="example" itemprop="name">Prop</p>

`itemtype`属性の解説

itemtype属性は、マイクロデータで使用するアイテムの型（語彙）を定義します。この属性は、itemscope属性を与えられた要素に対して使用します。

itemtypeで指定した値は、itemscopeを付加した要素の範囲内で有効となります。アイテムの型はURLを参照する形で指定します。一般的には、schema.orgが採用されます。半角スペース区切りで複数指定することも可能です。

itemtype属性で指定した語彙は、アイテムの範囲内に含まれるitemprop属性の値に影響します。アイテムのプロパティは名前と値の組で構成されており、スキーマの形式に従って指定する必要があります。

値 / Value

有効なURL: URLを絶対パスで指定します。一般的には、schema.orgが採用されます。

サンプル


<!-- Webページのスキーマ -->
<div itemscope itemtype="https://schema.org/WebPage">
	<ul itemprop="breadcrumb">
		<li><a href="category/">Category</a></li>
		<li><a href="category/theme/">Theme</a></li>
		<li><a href="category/theme/topics/">Topics</a></li>
	</ul>
	<h1 itemprop="name">Heading</h1>
	<p itemprop="description">Learn about global HTML attributes.</p>
	<img itemprop="image" src="eyecatch.jpg" alt="Eyecatch: Entry Image">
</div>

`lang`属性の解説

lang属性は、要素で使われる言語を指定します。編集不可能な要素であればマークアップされている言語、編集可能な要素であればユーザーが入力する言語となります。この属性の値は、「IETF language tag」で定義された「言語タグ」の形式に基づいて与えます。

この属性の既定値は空文字列であり、言語が不明であることを意味します。そのため、利用される環境を想定した適切な値を指定することが推奨されます。lang属性に指定した値は、子要素にも継承されます。

値 / Value

IETF language tag: IETFの言語タグは、インターネット上で人間の言語を識別するために使用される標準化されたコードです。英語は「en」、日本語は「ja」のように、各言語の頭文字を元にしたタグが定義されています。

サンプル


<!-- 要素に特定の言語を指定する -->
<div lang="en">English</div>
<div lang="ja">日本語</div>
<div lang="ko">한국어</div>
<div lang="zh">中文</div>

`nonce`属性の解説

nonce属性は、暗号化ノンス（number used once）を定義して、コンテンツセキュリティポリシー（CSP）が指定された要素に対して読み取りを許可するかどうかを指定します。

nonce値は、一度きりの使い捨ての値として発行されるもので、XSS攻撃などの不正なスクリプトが実行されることを防ぐために利用されます。

値 / Value

nonce値: HTTPヘッダーの「Content-Security-Policy」に指定されたnonce値と一致させることで、安全なスクリプトであることを示します。

サンプル


<!-- HTTPレスポンスヘッダーに与えられたCSP -->
Content-Security-Policy: script-src 'nonce-XXXXX'

<!-- インラインで実行を許可するスクリプト -->
<script nonce="nonce-XXXXX">
  ...
</script>

`part`属性の解説

part属性は、シャドウツリー内の要素にパート名を与えて、CSSの::part擬似要素からスタイルを適用できるようにします。パート名はclass属性やid属性と同様に、空白区切りのリスト形式で指定します。

パート名として指定できる値は、ホワイトスペースを除く任意のUnicode文字です。ただし、CSSで参照するための有効な識別子の形式でなければなりません。

値 / Value

a - z / A - Z: 英字の小文字・大文字の範囲に属するASCII文字です。
0 - 9: 半角入力の数字です。
-（ハイフン）: 半角入力のハイフンです。
_（アンダースコア）: 半角入力のアンダースコアです。

サンプル


<!-- 用意されたスタイル -->
<style>
	custom-block::part(s1) {
		color: #0066ff;
	}
	custom-block::part(s2) {
		font-weight: bold;
	}
</style>

<!-- カスタム要素 -->
<template id="custom-block">
	<div part="s1">Part s1</div>
	<div part="s2">Part s2</div>
	<div part="s1 s2">Part s1+s2</div>
</template>
<custom-block></custom-block>

<!-- シャドウDOMの登録 -->
<script>
const template = document.querySelector("#custom-block");
globalThis.customElements.define(
	template.id,
	class extends HTMLElement {
		constructor() {
			super().attachShadow({ mode: "open" }).append(template.content);
		}
	},
);
</script>

`popover`属性の解説

popover属性は、指定された要素をポップオーバー要素として扱います。popoverを与えられた要素は、既定値で非表示となり、ポップオーバーAPIを通じて表示・非表示を切り替え可能となります。

ポップオーバー要素は、id属性で指定した名前を<button>または<input type="button">のpopovertarget属性で参照するか、JavaScriptのHTMLElement.showPopover()メソッドを使用して制御できます。

値 / Value

なし: この属性は論理属性です。存在していればtrue、存在していなければfalseとなります。

サンプル


<!-- ポップオーバーで表示する要素 -->
<div popover id="my-popover">ポップオーバー要素</div>

<!-- ポップオーバーを制御するボタン -->
<button popovertarget="my-popover">ポップオーバーを開く</button>

<!-- JavaScriptでキーイベントに関連付けた場合 -->
<script>
const popover = document.getElementById("my-popover");
document.addEventListener("keydown", (event) => {
	if (event.key === "p") {
		popover.showPopover();
	}
});
</script>

`role`属性の解説

role属性は、要素にページ上での役割りを表すロール名を与えます。この機能を利用すると、明確な意味づけがされていない要素に役割り名を与え、それをスクリーンリーダーなどの支援ツールに伝える際に役立ちます。

role属性で使用できる値は、Webページのユーザーインターフェイスのアクセシビリティを向上させるための規格である「WAI-ARIA」によって定義されたものです。これをARIAロールと呼びます。ARIAロールには、６つのカテゴリーに分類された複数の名前が用意されています。

HTMLの標準仕様であらかじめ明確な役割りが設定されている要素であれば、role属性を指定する必要はありません。例えば<main>要素は暗黙でmainのARIAロールを持っています。しかし、<div>や<span>などの汎用的な要素はnullを返すため、必要に応じて指定すべき状況が発生する場合があります。

値 / Value

WAI-ARIA ロール値: WAI-ARIAであらかじめ定義されているロールの中から、目的に応じた名称を指定します。ARIAロールには、文書構造、ウィジェット、ランドマーク、ライブリージョン、ウィンドウ、抽象などのカテゴリーに分類された複数のロール群があります。

サンプル


<!-- メニューを表すリスト -->
<ul role="menu" class="main-menu">
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
</ul>

<!-- スイッチを表すボタン -->
<button type="button" role="switch" class="tcs-box" id="themeColor">
	<span>Light</span>
	<span>dark</span>
</button>
<label class="tcs-box" for="themeColor">テーマカラー選択</label>

`slot`属性の解説

slot属性は、シャドウDOMのシャドウツリー内にあるスロットを要素に関連付けます。この属性に指定する値は、ウェブコンポーネントのテンプレートとして作成した<slot>要素のname属性の値です。

値 / Value

対象のスロットを識別する名前: 関連付けたい<slot>要素のname属性の値を参照します。

サンプル


<!-- 要素をスロットに関連付けて内容を格納する -->
<template id="custom-block">
	<p>
		<slot name="my-text">既定のテキスト</slot>
	</p>
</template>

<my-p>
	<span slot="my-text">スロットに格納するテキスト</span>
</my-p>

`spellcheck`属性の解説

spellcheck属性は、要素に含まれる単語のスペルチェックを有効にするかどうかを指定します。この属性は、単にブラウザのスペルチェック機能にヒントを与えるものです。対応していない環境や編集が無効な要素では無視されます。

スペルチェック機能が有効な環境であれば、綴を間違えた単語の下に目印が表示されます。一般的には、赤い点線もしくは波線が表示されます。

値 / Value

true: 可能であればスペルチェックを行うことを示します。
false: スペルチェックを行なわないことを示します。

サンプル


<!-- スペルチェックを行う -->
<textarea spellcheck="true">
Input "exanplu" typo text.
</textarea>

<!-- スペルチェックを行わない -->
<textarea spellcheck="false">
Input "exanplu" typo text.
</textarea>

`style`属性の解説

style属性は、要素に適用するCSSを指定します。特定の要素のスタイルを直接変更したい場合に使用することがありますが、基本的にスタイルは外部ファイルやヘッダーにまとめて記述することが推奨されます。

style属性で指定したスタイルは、詳細度が高くなるため外部ファイルやヘッダーで定義されたスタイルを上書きします。そのため、ページのレイアウトや汎用的なパーツのために用意したスタイルと競合しないように注意してください。

値 / Value

CSSの宣言: CSSで有効なプロパティと値を組み合わせた構文を指定します。複数のプロパティを装飾する場合は、空白区切りのリスト形式で指定します。

サンプル


<!-- 要素に直接スタイルを指定する -->
<div style="color: red;">Text.</div>

<!-- 複数のスタイルを指定する -->
<div style="color: red; font-style: italic;">Text.</div>

`tabindex`属性の解説

tabindex属性は、要素をフォーカスの対象にするか除外するかを指定します。フォーカスを許可した場合、ナビゲーションの順序を相対的な数値で指定することもできます。

tabindex属性が有効な整数値である場合、その要素はTabキー、マウスクリック、JavaScriptのfocus()メソッドなどによってフォーカスできるようになります。<form>に含まれる入力項目などは既定値でフォーカスの対象となっていますが、それ以外の要素もフォーカスの対象にしたい場合に有効です。

値 / Value

整数: 正の数（0より大きい数）を指定した要素はフォーカスの対象となります。負の数（-1以下の数）を指定した要素はフォーカスの対象となりません。正の数はキーボードの順次ナビゲーションでフォーカスが当たる順番を相対的に指定できますが、原則としてソースコード上の順番を乱すことは非推奨であるため、基本的には0か-1のみを使用します。

サンプル


<!-- 要素をフォーカスの対象に追加する -->
<ul>
	<li tabindex="0">Item</li>
	<li tabindex="0">Item</li>
	<li tabindex="0">Item</li>
</ul>

<!-- 要素をフォーカスの対象から除外する -->
<input type="text" tabindex="-1">

<!-- ナビゲーションの順序を指定（非推奨） -->
<input type="text">
<div tabindex="1">優先項目</div>
<input type="text">
<div tabindex="2">優先項目</div>
<input type="text">

`title`属性の解説

title属性は、要素に補足情報を追加します。title属性によって示された補足情報は、要素にマウスカーソルを合わせた際にツールチップで表示されます。主な用途は機械的な処理を支援するラベル付けです。

スマートフォンやタブレットなどマウスオーバーができない環境ではツールチップが表示されないため、ユーザーに補足情報を伝えるための機能としては十分ではありません。またスクリーンリーダーなどの支援ツールを使用しているユーザーに配慮する必要もあります。

値 / Value

プレーンテキスト: 任意のプレーンテキストを指定できます。改行（U+000A LINE FEED）を含む複数行のタイトルを指定することもできます。

サンプル


<!-- リンク先の補足情報を指定する -->
<a href="#" title="Source site">Link Text.</a>

<!-- フレームに表示するページの情報 -->
<iframe title="Additional information" src="URL"></iframe>

`translate`属性の解説

translate属性は、ページを翻訳する祭に要素の内容を翻訳対象に含めるか、除外するかを指定します。ブラウザやWebサービスが提供しているローカライズ機能が有効な場合に、特定の箇所を翻訳の対象から外す目的などで使用します。

Google翻訳のような自動翻訳システムをページ全体に適応した場合に、固有名詞やスラングなども一般的な単語に置き換えてしまうことがあり、執筆者の意図からかけ離れた文章になってしまうことがあります。主に企業名やブランド名といった元の言語のまま固定しておきたい単語であれば、インライン要素でその範囲を指定してローカライズの対象から外すことができます。

値 / Value

yesまたは空文字列: ページを翻訳する際に要素に含まれる内容を翻訳すべきであることを示します。
no: ページを翻訳する際に要素に含まれる内容を翻訳すべきでないことを示します。

サンプル


<!-- 自動翻訳の対象となる要素 -->
<p>Example text.</p>
<p translate="yes">Example text.</p>
<p translate="">Example text.</p>

<!-- 翻訳すべきではない要素の指定 -->
<small>©2045 <span translate="no">Brand Name</span></small>

`writingsuggestions`属性の解説

writingsuggestions属性は、ユーザーが編集可能な要素を操作する際に、ブラウザの入力補完機能を有効にするかどうかを指定します。英語では「サジェスチョン」と呼ばれる機能です。既定値では有効となっているため、基本的には無効にする場合に使用するものとなります。

入力補完機能は、入力された内容に基づいて候補となる単語やヒントを表示させるものです。対応しているブラウザであれば、英単語を途中まで入力すると、残りの綴りが灰色のテキストで表示されます。

値 / Value

trueまたは省略: ブラウザの入力補完機能を有効にします。
false: ブラウザの入力補完機能を有効にします。

サンプル


<!-- 入力補完が有効な要素 -->
<input type="text">
<input type="text" writingsuggestions>
<input type="text" writingsuggestions="true">

<!-- 入力補完が無効な要素 -->
<input type="text" writingsuggestions="false">

HTML入門の基礎知識

HTMLの書き方をわかりやすく解説

HTMLファイルの作り方

最初に覚えるべきHTMLタグ

ヘッダー情報の詳しい解説

ハイパーリンクについて理解する

改行や半角スペースを連続で表示させる方法

グローバル属性の一覧

コンテンツ・モデルとコンテンツ・カテゴリー

文書のアウトライン

ディレクトリの意味と使い方を詳しく解説

HTMLとXHTMLの違い

ガラケー専用モバイルサイトの作り方

全てのHTML要素に指定できる共通の属性

グローバル属性の一覧

accesskey属性の解説

値 / Value

サンプル

autocapitalize属性の解説

値 / Value

サンプル

autocorrect属性の解説

値 / Value

サンプル

autofocus属性の解説

値 / Value

サンプル

class属性の解説

値 / Value

サンプル

contenteditable属性の解説

値 / Value

サンプル

data-*属性の解説

値 / Value

サンプル

dir属性の解説

値 / Value

サンプル

draggable属性の解説

値 / Value

サンプル

enterkeyhint属性の解説

値 / Value

サンプル

exportparts属性の解説

値 / Value

サンプル

hidden属性の解説

値 / Value

サンプル

id属性の解説

値 / Value

サンプル

inert属性の解説

値 / Value

サンプル

inputmode属性の解説

値 / Value

サンプル

is属性の解説

値 / Value

サンプル

itemid属性の解説

値 / Value

サンプル

itemprop属性の解説

値 / Value

サンプル

itemref属性の解説

値 / Value

サンプル

itemscope属性の解説

値 / Value

サンプル

itemtype属性の解説

値 / Value

サンプル

lang属性の解説

値 / Value

サンプル

nonce属性の解説

値 / Value

サンプル

part属性の解説

値 / Value

サンプル

popover属性の解説

値 / Value

サンプル

role属性の解説

値 / Value

サンプル

`accesskey`属性の解説

`autocapitalize`属性の解説

`autocorrect`属性の解説

`autofocus`属性の解説

`class`属性の解説

`contenteditable`属性の解説

`data-*`属性の解説

`dir`属性の解説

`draggable`属性の解説

`enterkeyhint`属性の解説

`exportparts`属性の解説

`hidden`属性の解説

`id`属性の解説

`inert`属性の解説

`inputmode`属性の解説

`is`属性の解説

`itemid`属性の解説

`itemprop`属性の解説

`itemref`属性の解説

`itemscope`属性の解説

`itemtype`属性の解説

`lang`属性の解説

`nonce`属性の解説

`part`属性の解説

`popover`属性の解説

`role`属性の解説

`slot`属性の解説

`spellcheck`属性の解説

`style`属性の解説

`tabindex`属性の解説

`title`属性の解説

`translate`属性の解説

`writingsuggestions`属性の解説