メインコンテンツへスキップ

HTMLの属性


1.属性

属性は、
その事物が持っている
性質です。

HTML要素属性は、要素を調整したり、さまざまな方法で振る舞いを調整したりする為の付加的な値です。

要素の属性は、要素の開始タグ内で表現されます。

すべてのHTML要素に共通であり、(HTML Living Standard で定義されていない要素も含め)指定できる、グローバル属性という括りがあります。
ただし、ブラウザなどのユーザーエージェント側が対応しているかは、別の問題です。個々の属性で改めて調べてから使用して下さい。


2.グローバル属性

class属性

  1. <div class="h-sample01">サンプル</div>

class属性 は、要素が属するさまざまなクラスを表す、スペースで区切られたトークンセットの値が必要です。

サンプル
  1. <div class="h-sample01">サンプル</div>
  1. .h-sample01 {
  2. color: red;
  3. }

この例では、CSSプロパティ値を適用するためにクラスセレクタを用いています。

id属性

  1. <div id="JDV24202">サンプル</div>

id属性の値は要素ツリー内のすべてのIDの中で一意でなければならず、少なくとも1文字を含める必要があります。値にはASCII空白文字を含めることはできません。

サンプル
  1. <div id="JDV24202">サンプル</div>
  2. <script>
  3. document.getElementById("JDV24202").style['border'] = "double 5px";
  4. </script>

この例では、スクリプトで要素を取得するためにIDを用いています。

slot属性

  1. <div slot="nsl24203">サンプル</div>

slot属性は、要素にスロットを割り当てるために使用されます。slot属性を持つ要素は、name属性の値がそのslot属性の値と一致する<slot>要素によって作成されたスロットに割り当てられます。ただし、その<slot>要素が、対応するslot属性値を持つルートホストを持つシャドウツリー内にある場合のみです。

サンプル
  1. <template id="JTP24203">
  2. <p>ひながた1</p>
  3. <slot name="nsl24203">スロット</slot>
  4. <p>ひながた2</p>
  5. </template >
  6. <script>
  7. document.addEventListener("DOMContentLoaded", function() {
  8. document.getElementById("JDV24203").attachShadow({mode:"open"}).appendChild(document.getElementById("JTP24203").content.cloneNode(true));
  9. });
  10. </script>
  1. <div id="JDV24203">
  2. <div slot="nsl24203">サンプル</div>
  3. </div>

この例では、slot要素で(コンテンツを受け取るための)スロットを定義して、slot属性で関連付けします。

title属性

  1. <div title="sample">サンプル</div>

title属性は、ツールチップにふさわしいような、要素に関する助言的な情報を表します。リンクの場合は、対象リソースタイトルや説明、画像の場合は画像のクレジットや説明、段落の場合はテキストの脚注や解説、引用の場合は出典に関する詳細情報、インタラクティブコンテンツの場合は要素のラベルや使用方法など、様々な情報が含まれます。値はテキストです。

この属性が要素から省略された場合、title属性が設定されている最も近い祖先HTML要素のtitle属性もこの要素に適用されるものとみなされます。この属性を設定すると、この属性はオーバーライドされ、祖先の助言情報はこの要素には適用されないことが明示的に示されます。この属性を空文字列に設定すると、この要素に助言情報が存在しないことを示します。

title属性の値にU+000A LINE FEED (LF)文字が含まれている場合、コンテンツは複数行に分割されます。各U+000A LINE FEED (LF)文字は改行を表します。

<link>要素, <abbr>要素, <input>要素などの一部の要素では、上記のセマンティクスに加えて、title属性の追加セマンティクスを定義します。

サンプル
  1. <div title="sample">サンプル</div>

この例では、div要素にツールチップで "sample" と出るようにしている、機能の例示です。

lang属性

  1. <div lang="en">This is an example of the lang attribute.</div>

lang属性(名前空間なし)は、要素の内容、およびテキストを含む要素の属性の主言語を指定します。値は、有効なBCP 47言語タグ、または空文字列でなければなりません。属性を空文字列に設定すると、主言語が不明であることを示します。

XML名前空間のlang属性は、XMLで定義されています。

This is an example of the lang attribute.
  1. <div lang="en">This is an example of the lang attribute.</div>

この例では、このdiv要素の内容などの主言語が英語であることを指定しています。

translate属性

  1. <div translate="no" lang="en">This is an example of the lang attribute.</div>

translate属性は、ページをローカライズする際に、要素の属性値とその子であるTextノードの値を翻訳するか、変更しないかを指定するために使用されます。これは、以下のキーワードと状態を持つ列挙属性です。

yes
要素が翻訳対応状態にある場合、ページがローカライズされるときに、その要素の翻訳可能な属性とその Text ノードの子の値が翻訳されます。
no
要素が非翻訳状態の場合、その要素の属性値とその Text ノードの子の値は、ページがローカライズされてもそのまま残されます。たとえば、要素に人名やコンピュータ プログラムの名前が含まれている場合などです。

属性の欠落値のデフォルトと無効値のデフォルトは、どちらも継承状態です。

各要素(HTML 以外の要素も含む)には翻訳モードがあり、翻訳可能状態または翻訳不可状態のいずれかになります。HTML 要素の translate 属性が Yes 状態の場合、その要素の翻訳モードは翻訳可能状態になります。そうでない場合、つまり要素の translate 属性が No 状態の場合、その要素の翻訳モードは翻訳不可状態になります。それ以外の場合、要素の translate 属性は継承状態であるか、要素が HTML 要素ではないため translate 属性がありません。いずれの場合も、要素の翻訳モードは、親要素が存在する場合はその親要素と同じ状態になり、親要素が null の場合は翻訳可能状態になります。

This is an example of the lang attribute.
  1. <div translate="no" lang="en">This is an example of the lang attribute.</div>

この例では、英文の例示なので翻訳してほしくないので、非翻訳状態と指定している例です。

dir属性

  1. <div dir="rtl">いろは</div>

dir属性は、次のキーワードと状態を持つ列挙属性です。

ltr
要素の内容は、明示的に方向が分離された左から右へのテキストです。
rtl
要素の内容は、明示的に方向が分離された右から左へのテキストです。
auto
要素の内容は、明示的に方向が分離されたテキストですが、方向は要素の内容を使用してプログラムによって決定されます。

属性の欠落値のデフォルトと無効値のデフォルトは、どちらも未定義状態です。

はろい
  1. <div dir="rtl">はろい</div>

この例では、日本語を右から左へのテキストで書いてみました。

style属性

  1. <div style="border: double 5px;">すたいる</div>

style属性は、CSSスタイル属性で定義されているスタイル属性です。

CSSをサポートするユーザーエージェントでは、属性が追加されたとき、または値が変更されたとき、スタイル属性のルールに従って属性値を解析する必要があります。

ただし、「コンテンツセキュリティポリシーによって要素のインライン動作をブロックするかどうか」アルゴリズムが、属性の要素、「スタイル属性」、および属性値に対して実行された際に「ブロック」を返す場合、属性値で定義されたスタイルルールをその要素に適用してはなりません。

いずれかの要素にスタイル属性を使用している文書は、それらの属性が削除された場合でも、理解可能で使用可能でなければなりません。

すたいる
  1. <div style="border: double 5px;">すたいる</div>

この例では、枠に二本線を引くスタイルシートを指定しています。

hidden属性

  1. <div hidden="hidden">非表示</div>

hidden属性は、以下のキーワードと状態を持つ列挙属性です。

hidden
レンダリングされません。
until-found
レンダリングされませんが、内部のコンテンツはページ内検索とフラグメントナビゲーションでアクセスできるようになります。

この属性の値が欠落している場合のデフォルトは「非非表示」状態、値が無効である場合のデフォルトは「非表示」状態です。

要素のhidden属性がHidden状態の場合、その要素はページの現在の状態とまだ直接関連していない、あるいはもはや直接関連していない、あるいはユーザーが直接アクセスするのではなく、ページの他の部分で再利用されるコンテンツを宣言するために使用されていることを示します。ユーザーエージェントは、Hidden状態にある要素をレンダリングすべきではありません。

HTMLのhidden属性とCSSの`display: none;`はどちらも要素を非表示にする機能がありますが、動作や用途に違いがあります。hidden属性は、要素をページから見えなくするだけでなく、アクセシビリティツリーからも削除されるため、検索エンジンやスクリーンリーダーなどが要素を認識しなくなります。一方、`display: none;`は要素を非表示にするだけで、レイアウトには影響を与えます

  1. <div hidden="hidden">非表示</div>

この例では、要素に非表示を指定しています。

inert属性

  1. <a inert href="#MH2INERT">不活性コンテンツ</a>

inert属性は、ブール型属性であり、その存在によって、要素と、そうでなければ不活性状態から逃れられないそのすべてのフラットツリーの子孫(モーダルダイアログなど)が、ユーザーエージェントによって不活性にされることを示します。

不活性サブツリーには、ページの理解や使用に不可欠なコンテンツやコントロール(不活性状態ではない)を含めるべきではありません。不活性サブツリー内のコンテンツは、すべてのユーザーが認識できず、インタラクティブにもなりません。作成者は、要素が表すコンテンツが何らかの形で視覚的に隠蔽されない限り、要素を不活性として指定すべきではありません。ほとんどの場合、作成者は個々のフォームコントロールに inert 属性を指定すべきではありません。このような場合は、disabled 属性の方が適切でしょう。

  1. <a inert href="#MH2INERT">不活性コンテンツ</a>

この例では、要素に不活性を指定しています。その結果、リンクの機能は無効になっています。

tabindex属性

  1. <a tabindex="-1" href="#MH2TABINDEX">フォーカス順序</a>

tabindex属性は、作成者は要素とその DOM アンカーを持つ領域をフォーカス可能領域に設定したり、それらの領域を順次フォーカス可能にするかどうかを指定したり、順次フォーカスナビゲーションにおける相対的な順序を指定したりできます。

「タブインデックス」という名前は、フォーカス可能な要素間を移動するために Tab キーがよく使用されることに由来しています。「タブ移動」という用語は、順次フォーカス可能なフォーカス可能領域を前方に移動することを意味します。

tabindex 属性を指定する場合、有効な整数値を持たなければなりません。正の数値は、要素のフォーカス可能領域の順次フォーカスナビゲーション順序における相対的な位置を指定し、負の数値は、コントロールが順次フォーカス可能ではないことを示します。

開発者は、tabindex 属性に 0 または -1 以外の値を使用する場合は注意が必要です。正しく設定するのは複雑だからです。

-1
要素をフォーカス可能にし、作成者がクリックフォーカスは可能だがシーケンシャルフォーカスは不可能とすることを希望していることを示します。ユーザーエージェントは、プラットフォームの慣例に従った特定の要素タイプや、キーボードのみを使用するユーザーなど、クリックフォーカスとシーケンシャルフォーカスのこの設定を無視する場合があります。
0
要素をフォーカス可能にし、作成者がクリックフォーカスとシーケンシャルフォーカスの両方を希望していることを示します。ユーザーエージェントは、クリックフォーカスとシーケンシャルフォーカスの両方の希望を無視する場合があります。
省略時(または整数以外の値)
ユーザーエージェントは、要素がフォーカス可能かどうか、またフォーカス可能な場合は、シーケンシャルフォーカス可能かクリックフォーカス可能か(あるいはその両方)を判断します。
正の整数値
0 と同じように動作しますが、さらに、tabindex 属性値の高い要素が後に表示されるように、tabindex 順のフォーカスナビゲーションスコープ内で相対的な順序付けを作成します。
  1. <a tabindex="-1" href="#MH2TABINDEX">フォーカス順序</a>

この例では、シーケンシャルフォーカスで対象外と指定しています。

autofocus属性

  1. <a autofocus href="#MH2AUTOFOCUS">自動フォーカス</a>

autofocus属性は、ページが読み込まれた直後に要素にフォーカスを当てるように指定できます。これにより、ユーザーはメイン要素に手動でフォーカスを当てる必要がなくなり、すぐに入力を開始できます。

ダイアログ要素内、または popover 属性が設定されている HTML 要素内の要素に autofocus 属性が指定されている場合、ダイアログまたはポップオーバーが表示されたときにその要素にフォーカスが当てられます。

autofocus 属性はブール型属性です。

  1. <a autofocus href="#MH2AUTOFOCUS">自動フォーカス</a>

この例では、ページが読み込まれた直後に要素にフォーカスを当てるように指定しています。

accesskey属性

  1. <a accesskey="9" href="#MH2ACCESSKEY">アクティブ化</a>

accesskey属性は、アクティブ化またはフォーカス可能な各要素に用いてその要素をアクティブ化するための単一のキーの組み合わせを割り当てることができます。

正確なショートカットは、ユーザーのキーボード情報、プラットフォームに既に存在するキーボードショートカット、およびページで指定されている他のショートカットに基づいて、ユーザーエージェントによって決定されます。これらの情報は、accesskey 属性で提供される情報に基づいて使用されます。

適切なキーボードショートカットが様々な入力デバイスで利用できるようにするために、作成者は accesskey 属性で複数の代替ショートカットを提供することができます。

各代替ショートカットは、文字や数字などの単一の文字で構成されます。

ユーザーエージェントはユーザーにキーボードショートカットのリストを提供できますが、作成者も提供することが推奨されます。accessKeyLabel IDL 属性は、ユーザーエージェントによって割り当てられた実際のキーの組み合わせを表す文字列を返します。

アクティブ化
  1. <a accesskey="9" href="#MH2ACCESSKEY" id="JDV24213">アクティブ化</a>
  2. <script>
  3. document.addEventListener("DOMContentLoaded", function() {
  4. var _loJsElement13 = document.getElementById("JDV24213");
  5. var _lsJsAccessKey = _loJsElement13.accessKeyLabel || _loJsElement13.accessKey;
  6. _loJsElement13.appendChild(document.createTextNode('(' + _lsJsAccessKey + ')'));
  7. });
  8. </script>

この例では、ALT + 9 でアクティブ化するように指定しています。

contenteditable属性

  1. <div contenteditable="true">編集可能</div>

contenteditable属性は、次のキーワードと状態を持つ列挙属性です。

true
要素は編集可能です。
false
要素は編集できません。
plaintext-only
要素の生のテキストコンテンツのみが編集可能で、リッチフォーマットは無効です。

属性の欠損値のデフォルトと無効値のデフォルトはどちらも継承状態です。継承状態は、親要素の状態に基づいて要素が編集可能(または編集不可)であることを示します。

編集可能
  1. <div contenteditable="true" id="JDV24214">編集可能</div>

この例では、「編集可能」という文字を編集することができるように指定しています。

spellcheck属性

  1. <input spellcheck="true" value="spell check">

spellcheck属性は、次のキーワードと状態を持つ列挙属性です。

true
スペルと文法がチェックされます。
false
スペルと文法はチェックされません。

属性の欠損値のデフォルトと無効値のデフォルトはどちらもデフォルト状態です。デフォルト状態は、要素がデフォルトの動作(親要素のスペルチェック状態に基づく場合もあり)に従って動作することを示します。

  1. <input spellcheck="true" value="spell check">

この例では、スペルと文法をチェックするように指定しています。

writingsuggestions属性

  1. <input writingsuggestions="true" value="writing">

writingsuggestions属性は、次のキーワードと状態を持つ列挙属性です。

true
この要素については、ライティングの提案を提供する必要があります。
false
この要素についてはライティングの提案は提供されません。

この属性の値が欠落している場合のデフォルトは Default 状態です。Default 状態は、要素がデフォルトの動作(親要素の writingsuggestions 状態に基づく場合もあります)に従って動作することを示します。

この属性の値が無効である場合のデフォルトは True 状態です。

  1. <input writingsuggestions="true" value="writing">

この例では、ライティングの提案を提供するように指定しています。

autocapitalize属性

  1. <input autocapitalize="on" value="auto capitalize">

autocapitalize属性は、列挙型属性であり、その状態は可能な自動大文字化ヒントです。属性の状態で指定された自動大文字化ヒントは、他の考慮事項と組み合わされて、使用される自動大文字化ヒントを形成し、ユーザーエージェントの動作を決定します。この属性のキーワードとそれらの状態マッピングは次のとおりです。

off, none
自動大文字化は適用されません(すべての文字はデフォルトで小文字になります)。
on, sentences
各文の最初の文字はデフォルトで大文字になり、その他の文字はすべてデフォルトで小文字になります。
words
各単語の最初の文字はデフォルトで大文字になり、その他の文字はすべてデフォルトで小文字になります。
characters
すべての文字はデフォルトで大文字になります。

属性の欠落値のデフォルトはデフォルトの状態であり、無効値のデフォルトは文の状態です。

デフォルトの状態は、ユーザーエージェントと入力メソッドは、自動大文字化を有効にするかどうかを独自に決定する必要があります。

autocapitalize 属性は、通常実装されているように、物理キーボードでの入力時の動作には影響しません。

autocapitalize 属性は、type 属性が URL、Email、または Password のいずれかの状態である input 要素に対して自動大文字化を有効にすることはありません。

モバイル端末の仮想キーボードや音声入力など、テキスト入力方法の中には、文頭の文字を自動的に大文字にすることでユーザーを支援するものがあります(この規則を持つ言語でテキストを入力する場合)。自動大文字化を実装した仮想キーボードでは、自動大文字化されるべき文字を入力しようとした際に、自動的に大文字表示に切り替わる場合があります(ただし、ユーザーは小文字に戻すことができます)。音声入力など、他の種類の入力方法では、ユーザーが最初に介入する選択肢がない方法で自動大文字化が行われる場合があります。autocapitalize 属性を使用すると、作成者はこのような動作を制御できます。

  1. <input autocapitalize="on" value="auto capitalize">

この例では、各文の最初の文字はデフォルトで大文字になり、その他の文字はすべてデフォルトで小文字になるように指定しています。

物理キーボードでの入力時の動作には影響しません。 仮想キーボードや音声入力などへの入力支援なので、動作確認にはご注意下さい。

autocorrect属性

  1. <input autocorrect="on" value="auto correct">

autocorrect属性は、以下のキーワードと状態を持つ列挙属性です。

on
ユーザーエージェントは、ユーザーの入力中にスペルミスを自動的に修正することが許可されています。左入力中にスペルミスを自動的に修正するかどうかはユーザーエージェントが決定し、要素やユーザーの設定に依存する場合があります。
off
ユーザーエージェントは、ユーザーの入力中にスペルミスを自動的に修正することは許可されていません。

属性の無効値と欠損値のデフォルトはどちらもオン状態です。

autocorrect の取得手順は、要素で使用されている自動修正状態がオンの場合は true を返し、オフの場合は false を返します。設定手順は、指定された値が true の場合、要素の autocorrect 属性は「オン」に設定されなければなりません。それ以外の場合は、「オフ」に設定されなければなりません。

autocorrect属性は、編集ホスト上でホストされている編集可能領域のオートコレクト動作を制御するために、input要素またはtextarea要素上でその要素にテキストを挿入する際の動作を制御するために、またはform要素上で、そのform要素に関連付けられたすべてのオートキャピタライズおよびオートコレクト継承要素のデフォルトの動作を制御するために使用できます。

autocorrect 属性は、type 属性が URL、Email、または Password のいずれかの状態にある入力要素に対しては、自動修正を有効にすることはありません。

テキスト入力方法の中には、入力中にスペルミスを自動的に修正することでユーザーを支援するものがあります。この処理はオートコレクトとも呼ばれます。ユーザーエージェントは、フォームコントロール(textarea要素の値など)または編集ホスト内の要素(contenteditableなど)のいずれかで、編集可能なテキストのオートコレクトをサポートできます。オートコレクトは、テキストがオートコレクトされようとしている、またはオートコレクトされたことを示すユーザーインターフェースを伴う場合があり、スペルミスのある単語の後に句読点、スペース、または新しい段落を挿入するときによく実行されます。autocorrect属性を使用すると、作成者はこのような動作を制御できます。

  1. <input autocorrect="on" value="auto correct">

この例では、入力中にスペルミスを自動的に修正するように指定しています。

inputmode属性

  1. <input inputmode="text" value="input mode">

inputmode属性は、ユーザーがコンテンツを入力する際に最も役立つ入力メカニズムの種類を指定する列挙型属性です。以下はそのキーワードです。

none
ユーザーエージェントは仮想キーボードを表示すべきではありません。このキーワードは、独自のキーボードコントロールを表示するコンテンツで役立ちます。
text
ユーザーエージェントは、ユーザーのロケールでテキスト入力が可能な仮想キーボードを表示すべきです。
tel
ユーザーエージェントは、電話番号入力が可能な仮想キーボードを表示すべきです。これには、0~9の数字、"#" 文字、および "*" 文字のキーが含まれます。ロケールによっては、アルファベットのニーモニックラベルも含まれる場合があります(例:米国では、"2" というラベルのキーは、歴史的に A、B、C の文字も含まれています)。
url
ユーザーエージェントは、ユーザーのロケールでテキスト入力が可能な仮想キーボードを表示すべきです。これには、URLの入力を支援するキー("/" や "." 文字など)や、ドメイン名でよく見られる文字列("www." や ".com" など)のクイック入力を支援するキーが含まれます。
email
ユーザーエージェントは、ユーザーのロケールでテキスト入力が可能な仮想キーボードを表示する必要があります。これには、「@」文字や「.」文字などのメールアドレス入力を支援するキーが含まれます。
numeric
ユーザーエージェントは、数値入力が可能な仮想キーボードを表示する必要があります。このキーワードはPIN入力に便利です。
decimal
ユーザーエージェントは、小数点以下の数値入力が可能な仮想キーボードを表示する必要があります。数値キーとロケールの書式区切り記号が表示される必要があります。
search
ユーザーエージェントは、検索に最適化された仮想キーボードを表示する必要があります。

inputmodeが指定されていない場合(またはユーザーエージェントがサポートしていない状態の場合)、ユーザーエージェントは表示するデフォルトの仮想キーボードを決定する必要があります。入力タイプやパターン属性などのコンテキスト情報を使用して、ユーザーに表示する仮想キーボードの種類を決定する必要があります。

  1. <input inputmode="text" value="input mode">

この例では、ユーザーのロケールでテキスト入力が可能な仮想キーボードを表示すべきと指定しています。

enterkeyhint属性

  1. <input enterkeyhint="enter" value="enterkey hint">

enterkeyhint属性は、仮想キーボードの Enter キーに表示するアクションラベル(またはアイコン)を指定する列挙型属性です。これにより、作成者は Enter キーの表示をカスタマイズし、ユーザーにとってより使いやすいものにすることができます。以下はそのキーワードです。

Enter
ユーザーエージェントは、操作「Enter」のキューを提示する必要があります。これは通常、改行を挿入することを意味します。
done
ユーザーエージェントは、操作「done」のキューを提示する必要があります。これは通常、入力する内容がなくなり、入力方式エディタ(IME)が閉じられることを意味します。
go
ユーザーエージェントは、操作「go」のキューを提示する必要があります。これは通常、ユーザーが入力したテキストのターゲットにユーザーを誘導することを意味します。
next
ユーザーエージェントは、操作「next」のキューを提示する必要があります。これは通常、ユーザーをテキストを受け付ける次のフィールドに誘導することを意味します。
previous
ユーザーエージェントは、操作「previous」のキューを提示する必要があります。これは通常、ユーザーをテキストを受け付ける前のフィールドに誘導することを意味します。
search
ユーザーエージェントは、操作「search」のキューを提示する必要があります。これは通常、ユーザーが入力したテキストの検索結果にユーザーを誘導することを意味します。
送信
ユーザーエージェントは、「送信」操作のキューを提示し、通常はテキストをターゲットに送信します。

enterkeyhintが指定されていない場合(またはユーザーエージェントがサポートしていない状態の場合)、ユーザーエージェントは表示するデフォルトのアクションラベル(またはアイコン)を決定する必要があります。inputmode、type、pattern属性などのコンテキスト情報を使用して、仮想キーボードに表示するアクションラベル(またはアイコン)を決定する必要があります。

  1. <input enterkeyhint="enter" value="enterkey hint">

この例では、操作「Enter」のキューを提示すると指定しています。

draggable属性

  1. <div draggable="true">draggable</div>

draggable属性は、以下のキーワードと状態を持つ列挙属性です。

true
要素はドラッグ可能になります。
false
要素はドラッグ可能になりません。

属性の値が欠落している場合のデフォルトと、値が無効である場合のデフォルトはどちらも自動状態です。自動状態は、ユーザーエージェントのデフォルトの動作を使用します。

ドラッグ可能な属性を持つ要素には、視覚的ではないインタラクションのために要素名を表す title 属性も必要です。

draggable
  1. <div draggable="true">draggable</div>

この例では、ドラッグ可能と指定しています。

popover属性

  1. <div popover="auto">popover</div>

popover属性は、次のキーワードと状態を持つ列挙属性です。

auto
開いたときに他のポップオーバーを閉じます。ライトクリア機能があり、閉じるリクエストに応答します。
manual
他のポップオーバーを閉じません。ライトクリア機能がなく、閉じるリクエストにも応答しません。
hint
開いたときに他のヒントポップオーバーを閉じますが、他の自動ポップオーバーは閉じません。ライトクリア機能があり、閉じるリクエストに応答します。

この属性の値が欠落している場合のデフォルトは「No Popover」状態、無効値の場合のデフォルトは「Manual」状態です。

この属性が指定されると、要素は表示されるまでレンダリングされず、表示される時点で他のページコンテンツの上にレンダリングされます。

div 要素など、アクセシビリティ セマンティクスのない要素でポップオーバーを使用する場合、作成者は適切な ARIA 属性を使用してポップオーバーがアクセス可能であることを確認する必要があります。

すべての HTML 要素には、ポップオーバーの表示状態 (初期値は「hidden」) があり、以下の値を取ります。
- hidden
- showing


- すべての Document には、ポップオーバーのポインタダウン ターゲット (HTML 要素または null) があり、初期値は null です。
- すべての HTML 要素には、ポップオーバーの呼び出し元 (HTML 要素または null) があり、初期値は null です。
- すべての HTML 要素には、ポップオーバーの表示または非表示 (ブール値) があり、初期値は false です。
- すべての HTML 要素には、ポップオーバーのトグル タスク トラッカー (トグル タスク トラッカーまたは null) があり、初期値は null です。
- すべての HTML 要素には、ポップオーバーのクローズ ウォッチャー (クローズ ウォッチャーまたは null) があり、初期値は null です。
- すべての HTML 要素には、ポップオーバーで開かれたモード (文字列または null) があり、初期値は null です。

popover
  1. <div popover="auto" id="JDV24222">popover</div>
  2. <button type="button" popovertarget="JDV24222">ボタン</button>

この例では、ポップオーバーを自動と指定しています。

itemscope属性

  1. <div itemscope>
  2. <p>My name is <span itemprop="name">Elizabeth</span>.</p>
  3. </div>

itemscope属性は、ブール型属性です。itemscope属性が指定された要素は、名前と値のペアの集合である新しいアイテムを作成します。

itemscope 属性を持つ要素には、アイテムのアイテム タイプを指定するために itemtype 属性を指定できます。

My name is Elizabeth .

  1. <div itemscope>
  2. <p>My name is <span itemprop="name">Elizabeth</span>.</p>
  3. </div>

この例示は、「HTML Standard」 の 「5 Microdata」 の 「5.1.2 The basic syntax」 にある例示をそのまま引用したものです。

この例では、name というプロパティに、値が "Elizabeth" です。


{ name: "Elizabeth" }

itemtype属性

  1. <dl itemscope itemtype="https://vocab.example.net/book" itemid="urn:isbn:0-330-34032-8">
  2. <dt>Title</dt>
  3. <dd itemprop="title">The Reality Dysfunction</dd>
  4. <dt>Author</dt>
  5. <dd itemprop="author">Peter F. Hamilton</dd>
  6. <dt>Publication date</dt>
  7. <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time></dd>
  8. </dl>

itemtype属性は、itemscope 属性を持つ要素に指定して、そのアイテムのアイテム型を指定できます。

itemtype 属性を指定する場合、その値は、順序なしのスペース区切りの一意なトークン集合でなければなりません。トークンは互いに重複せず、それぞれが絶対 URL である有効な URL 文字列であり、かつ、すべてが同じ語彙を使用するように定義されていなければなりません。属性の値は少なくとも 1 つのトークンを持たなければなりません。

アイテムのアイテム型は、要素の itemtype 属性の値を ASCII 空白文字で分割することによって得られるトークンです。itemtype 属性が欠落しているか、この方法で解析してもトークンが見つからない場合、そのアイテムにはアイテム型がないとされます。

アイテム型はすべて、適用可能な仕様で定義されている型でなければならず、すべて同じ語彙を使用するように定義されていなければなりません。

当該仕様で別途規定されている場合を除き、アイテム型として指定された URL は自動的に参照解除されるべきではありません。

Title
The Reality Dysfunction
Author
Publication date
  1. <dl itemscope itemtype="https://vocab.example.net/book" itemid="urn:isbn:0-330-34032-8">
  2. <dt>Title</dt>
  3. <dd itemprop="title">The Reality Dysfunction</dd>
  4. <dt>Author</dt>
  5. <dd itemprop="author">Peter F. Hamilton</dd>
  6. <dt>Publication date</dt>
  7. <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time></dd>
  8. </dl>

この例示は、「HTML Standard」 の 「5 Microdata」 の 「5.1.4 Global identifiers for items」 にある例示をそのまま引用したものです。

この例の「https://vocab.example.net/book」ボキャブラリは、itemid 属性が本の ISBN を指す urn: URL を取ることを定義します。


{
  title: "The Reality Dysfunction",
  author: "Peter F. Hamilton",
  pubdate: "1996-01-26",
}

itemid属性

  1. <dl itemscope itemtype="https://vocab.example.net/book" itemid="urn:isbn:0-330-34032-8">
  2. <dt>Title</dt>
  3. <dd itemprop="title">The Reality Dysfunction</dd>
  4. <dt>Author</dt>
  5. <dd itemprop="author">Peter F. Hamilton</dd>
  6. <dt>Publication date</dt>
  7. <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time></dd>
  8. </dl>

itemid属性は、itemscope 属性と itemtype 属性を持つ要素に指定できます。itemid 属性は、アイテムのグローバル識別子を付与し、Web 上の他のページにある他のアイテムと関連付けることができます。

itemid 属性を指定する場合、その値は有効な URL でなければならず、スペースで囲まれていても構いません。

アイテムのグローバル識別子とは、その要素に itemid 属性がある場合、その属性が指定されている要素のノード文書を基準として解析された値のことです。itemid 属性がない場合、または解析が失敗した場合は、グローバル識別子がないとみなされます。

itemid 属性は、itemscope 属性と itemtype 属性の両方が指定されていない要素には指定してはなりません。また、itemscope 属性を持つ要素で、itemtype 属性にそのボキャブラリの仕様で定義されているようにアイテムのグローバル識別子をサポートしないボキャブラリが指定されている場合にも指定してはなりません。

グローバル識別子の正確な意味は、語彙の仕様によって決定されます。同じグローバル識別子を持つ複数のアイテム(同一ページ上または異なるページ上)の存在が許容されるかどうか、また、同じIDを持つ複数のアイテムが存在する場合の処理規則は、当該語彙の仕様によって定義されます。

Title
The Reality Dysfunction
Author
Publication date
  1. <dl itemscope itemtype="https://vocab.example.net/book" itemid="urn:isbn:0-330-34032-8">
  2. <dt>Title</dt>
  3. <dd itemprop="title">The Reality Dysfunction</dd>
  4. <dt>Author</dt>
  5. <dd itemprop="author">Peter F. Hamilton</dd>
  6. <dt>Publication date</dt>
  7. <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time></dd>
  8. </dl>

この例示は、「HTML Standard」 の 「5 Microdata」 の 「5.1.4 Global identifiers for items」 にある例示をそのまま引用したものです。

この例の「https://vocab.example.net/book」ボキャブラリは、itemid 属性が本の ISBN を指す urn: URL を取ることを定義します。


{
  title: "The Reality Dysfunction",
  author: "Peter F. Hamilton",
  pubdate: "1996-01-26",
}

itemref属性

  1. <div itemscope id="amanda" itemref="a b"></div>
  2. <p id="a">Name: <span itemprop="name">Amanda</span></p>
  3. <div id="b" itemprop="band" itemscope itemref="c"></div>
  4. <div id="c">
  5. <p>Band: <span itemprop="name">Jazz Band</span></p>
  6. <p>Size: <span itemprop="size">12</span> players</p>
  7. </div>

itemref属性は、itemscope 属性を持つ要素に指定できます。これは、アイテムの名前と値のペアを見つけるためにクロールする追加要素のリストを提供します。

itemref 属性を指定する場合、その値は、他のトークンと重複しない、スペースで区切られた一意のトークンの順序なし集合でなければなりません。また、同じツリー内の要素の ID で構成されます。

itemscope 属性が指定されていない要素には、itemref 属性を指定しないでください。

Name: Amanda

Band: Jazz Band

Size: 12 players

  1. <div itemscope id="amanda" itemref="a b"></div>
  2. <p id="a">Name: <span itemprop="name">Amanda</span></p>
  3. <div id="b" itemprop="band" itemscope itemref="c"></div>
  4. <div id="c">
  5. <p>Band: <span itemprop="name">Jazz Band</span></p>
  6. <p>Size: <span itemprop="size">12</span> players</p>
  7. </div>

この例示は、「HTML Standard」 の 「5 Microdata」 の 「5.1.2 The basic syntax」 にある例示をそのまま引用したものです。

この例は、最初のアイテムには2つのプロパティがあり、「name」は「Amanda」に設定され、「band」は別のアイテムに設定されています。2つ目のアイテムにはさらに2つのプロパティがあり、「name」は「Jazz Band」に設定され、「size」は「12」に設定されています。


{
  name: "Amanda",
  band: {
    name: "Jazz Band",
    size: "12",
  }
}

itemprop属性

  1. <div itemscope>
  2. <p>My name is <span itemprop="name">Elizabeth</span>.</p>
  3. </div>

itemprop属性は、1つ以上のアイテム(以下に定義)に1つ以上のプロパティが追加されることを意味します。

itemprop属性を指定する場合、その値は、追加する名前と値のペアの名前を表す、順序なしかつスペースで区切られた一意のトークン(他のトークンと重複しないもの)の集合である必要があります。属性の値には、少なくとも1つのトークンが必要です。

定義されたプロパティ名を導入する仕様では、そのようなすべてのプロパティ名に、U+002E ピリオド文字 (.)、U+003A コロン文字 (:)、および ASCII 空白が含まれていないことを保証する必要があります。

アイテムが型付きアイテムの場合:アイテムの関連型を定義する仕様に従って、この状況で許可されている定義済みのプロパティ名、または 語彙仕様によってこの状況で許可されているアイテムプロパティ名として定義されている絶対URLである有効なURL文字列、または 独自のアイテムとして使用される絶対URLである有効なURL文字列。itemprop属性を持つ要素が複数のアイテムにプロパティを追加する場合、上記のトークンに関する要件は各アイテムに個別に適用されます。

要素のプロパティ名は、要素のitemprop属性の値がASCII空白で分割されたときに含まれるトークンです。順序は保持されますが、重複は削除されます(各名前の最初の出現のみを残します)。

アイテム内では、プロパティは互いに順序付けされていません。ただし、同じ名前のプロパティは、アイテムのプロパティを定義するアルゴリズムによって指定された順序で順序付けされます。

itemprop 属性を持つ要素によって追加された名前と値のペアのプロパティ値は、以下のリストで最初に一致するケースと同じです。

要素が itemscope 属性も持つ場合
値は、要素によって作成されたアイテムです。
要素が meta 要素の場合
値は、要素の content 属性が存在する場合はその値、存在しない場合は空文字列です。
要素が audio、embed、iframe、img、source、track、または video 要素の場合
値は、要素の src 属性の値に基づいて、属性が設定された時点の要素のノード文書を基準とした URL をエンコード、解析、シリアル化した結果です。存在する場合、または結果が失敗した場合は空文字列です。
要素が a 要素、area 要素、または link 要素の場合
値は、要素の href 属性の値に基づいて、要素のノード文書を基準として、属性が設定された時点の URL をエンコード、解析、シリアル化した結果です。そのような属性が存在しないか、結果が失敗した場合は空文字列になります。
要素が object 要素の場合
値は、要素の data 属性の値に基づいて、要素のノード文書を基準として、属性が設定された時点の URL をエンコード、解析、シリアル化した結果です。そのような属性が存在しないか、結果が失敗した場合は空文字列になります。
要素が data 要素の場合
値は、要素の value 属性がある場合はその値、ない場合は空文字列になります。
要素が meter 要素の場合
値は、要素の value 属性がある場合はその値、ない場合は空文字列になります。
要素が time 要素の場合
値は、要素の datetime 値です。
それ以外の場合
値は要素の子孫テキストコンテンツです。

URLプロパティ要素は、a、area、audio、embed、iframe、img、link、object、source、track、videoの各要素です。

プロパティの定義で定義されたプロパティの値が絶対URLである場合、そのプロパティはURLプロパティ要素を使用して指定する必要があります。

My name is Elizabeth .

  1. <div itemscope>
  2. <p>My name is <span itemprop="name">Elizabeth</span>.</p>
  3. </div>

この例示は、「HTML Standard」 の 「5 Microdata」 の 「5.1.2 The basic syntax」 にある例示をそのまま引用したものです。

この例は、最初のアイテムには2つのプロパティがあり、「name」は「Amanda」に設定され、「band」は別のアイテムに設定されています。2つ目のアイテムにはさらに2つのプロパティがあり、「name」は「Jazz Band」に設定され、「size」は「12」に設定されています。


{
  name: "Amanda",
  band: {
    name: "Jazz Band",
    size: "12",
  }
}

3.イベントハンドラーコンテンツ属性

イベントハンドラーコンテンツ属性は、
任意のHTML要素に指定できます。

イベントハンドラコンテンツ属性は、特定のイベントハンドラのコンテンツ属性です。コンテンツ属性の名前は、イベントハンドラの名前と同じです。

イベントハンドラコンテンツ属性を指定する場合、有効なJavaScriptコードを含める必要があります。このコードは、解析時にセミコロンの自動挿入後のFunctionBody生成規則と一致する必要があります。


4.ARIAロールとaria-*属性

ARIAロールと
aria-*属性を
指定することができます。

支援技術製品がHTML要素や属性では不可能な、よりきめ細かなインターフェースを公開できるようにするため、支援技術製品用の注釈セット(ARIAロールとaria-*属性)を指定することができます。

HTML要素にアクセシビリティAPIのセマンティクスを実装するためのユーザーエージェント要件は、HTMLアクセシビリティAPIマッピングで定義されています。この規則に加えて、カスタム要素の場合、デフォルトのARIAロールセマンティクスは以下のように決定されます。


5.カスタムデータ属性

カスタムデータ属性を
任意のHTML要素に
指定することができます。

カスタムデータ属性を任意の HTML要素に指定して、ページに固有のカスタム データ、状態、注釈などを保存できます。