1.属性
属性は、
その事物が持っている
性質です。
HTMLの要素の属性は、要素を調整したり、さまざまな方法で振る舞いを調整したりする為の付加的な値です。
要素の属性は、要素の開始タグ内で表現されます。
すべてのHTML
ただし、ブラウザなどのユーザーエージェント側が対応しているかは、別の問題です。個々の属性で改めて調べてから使用して下さい。
2.グローバル属性
- class
属性 : クラスを表す - id
属性 : IDを表す - slot
属性 : スロットを割り当てる - title
属性 : 要素に関する助言的な情報を表す - lang
属性 : 主言語を表す - translate
属性 : 翻訳状態を表す - dir
属性 : テキストの方向を表す - style
属性 : スタイルを表す - 非表示, 不活性
- フォーカス等(Focus)
- tabindex
属性 : フォーカス順序を表す - autofocus
属性 : 自動フォーカスを表す - accesskey
属性 : アクティブ化するためのキーを表す
- tabindex
- 編集(Editing)
- contenteditable
属性 : 編集可否を表す - spellcheck
属性 : スペルと文法のチェックを表す - writingsuggestions
属性 : ライティングの提案を提供を表す - autocapitalize
属性 : 自動大文字化を表す - autocorrect
属性 : オートコレクト動作を表す - inputmode
属性 : 入力メカニズムの種類を表す - enterkeyhint
属性 : アクションラベル(またはアイコン)を表す - draggable
属性 : ドラッグ可否を表す - popover
属性 : 要素をポップオーバーとして扱うを表す
- contenteditable
- マイクロデータ(Microdata)
- itemscope
属性 : スコープの定義を表す - itemtype
属性 : アイテム種別を表す - itemid
属性 : アイテム識別子を表す - itemref
属性 : アイテム参照を表す - itemprop
属性 : アイテム属性を表す
- itemscope
- is
属性 : カスタマイズドビルトイン要素名を表す - nonce
属性 : コンテンツセキュリティポリシーを表す
class属性
<div class=
"h-sample01"> サンプル</div>
class
<div class=
"h-sample01"> サンプル</div>
.h-sample01 {
color: red;
}
この例では、CSSプロパティ値を適用するためにクラスセレクタを用いています。
id属性
<div id=
"JDV24202"> サンプル</div>
id
<div id=
"JDV24202"> サンプル</div> <script>
document
.getElementById( "JDV24202") .style['border'] = "double 5px"; </script>
この例では、スクリプトで要素を取得するためにIDを用いています。
slot属性
<div slot=
"nsl24203"> サンプル</div>
slot
ひながた1
ひながた2
<template id=
"JTP24203"> <p>
ひながた1</p> <slot name=
"nsl24203"> スロット</slot> <p>
ひながた2</p> </template >
<script>
document
.addEventListener( "DOMContentLoaded", function() { document
.getElementById( "JDV24203") .attachShadow( {mode:"open"}) .appendChild( document .getElementById( "JTP24203") .content .cloneNode( true)); });
</script>
<div id=
"JDV24203"> <div slot=
"nsl24203"> サンプル</div> </div>
この例では、slot要素で(コンテンツを受け取るための)スロットを定義して、slot属性で関連付けします。
title属性
<div title=
"sample"> サンプル</div>
title
この属性が要素から省略された場合、title
titleU+000A
LINE FEED (LF)文字が含まれている場合、コンテンツは複数行に分割されます。各U+000A
LINE FEED (LF)文字は改行を表します。
<link>
<div title=
"sample"> サンプル</div>
この例では、div要素にツールチップで "sample" と出るようにしている、機能の例示です。
lang属性
<div lang=
"en"> This is an example of the lang attribute.</div>
lang
XML名前空間のlang
<div lang=
"en"> This is an example of the lang attribute.</div>
この例では、このdiv要素の内容などの主言語が英語であることを指定しています。
translate属性
<div translate=
"no" lang= "en"> This is an example of the lang attribute.</div>
translate
- yes
- 要素が翻訳対応状態にある場合、ページがローカライズされるときに、その要素の翻訳可能な属性とその Text ノードの子の値が翻訳されます。
- no
- 要素が非翻訳状態の場合、その要素の属性値とその Text ノードの子の値は、ページがローカライズされてもそのまま残されます。たとえば、要素に人名やコンピュータ プログラムの名前が含まれている場合などです。
属性の欠落値のデフォルトと無効値のデフォルトは、どちらも継承状態です。
各要素(HTML 以外の要素も含む)には翻訳モードがあり、翻訳可能状態または翻訳不可状態のいずれかになります。HTML 要素の translate 属性が Yes 状態の場合、その要素の翻訳モードは翻訳可能状態になります。そうでない場合、つまり要素の translate 属性が No 状態の場合、その要素の翻訳モードは翻訳不可状態になります。それ以外の場合、要素の translate 属性は継承状態であるか、要素が HTML 要素ではないため translate 属性がありません。いずれの場合も、要素の翻訳モードは、親要素が存在する場合はその親要素と同じ状態になり、親要素が null の場合は翻訳可能状態になります。
<div translate=
"no" lang= "en"> This is an example of the lang attribute.</div>
この例では、英文の例示なので翻訳してほしくないので、非翻訳状態と指定している例です。
dir属性
<div dir=
"rtl"> いろは</div>
dir
- ltr
- 要素の内容は、明示的に方向が分離された左から右へのテキストです。
- rtl
- 要素の内容は、明示的に方向が分離された右から左へのテキストです。
- auto
- 要素の内容は、明示的に方向が分離されたテキストですが、方向は要素の内容を使用してプログラムによって決定されます。
属性の欠落値のデフォルトと無効値のデフォルトは、どちらも未定義状態です。
<div dir=
"rtl"> はろい</div>
この例では、日本語を右から左へのテキストで書いてみました。
style属性
<div style=
"border: double 5px;"> すたいる</div>
style
CSSをサポートするユーザーエージェントでは、属性が追加されたとき、または値が変更されたとき、スタイル属性のルールに従って属性値を解析する必要があります。
ただし、「コンテンツセキュリティポリシーによって要素のインライン動作をブロックするかどうか」アルゴリズムが、属性の要素、「スタイル属性」、および属性値に対して実行された際に「ブロック」を返す場合、属性値で定義されたスタイルルールをその要素に適用してはなりません。
いずれかの要素にスタイル属性を使用している文書は、それらの属性が削除された場合でも、理解可能で使用可能でなければなりません。
<div style=
"border: double 5px;"> すたいる</div>
この例では、枠に二本線を引くスタイルシートを指定しています。
hidden属性
<div hidden=
"hidden"> 非表示</div>
hidden
- hidden
- レンダリングされません。
- until-found
- レンダリングされませんが、内部のコンテンツはページ内検索とフラグメントナビゲーションでアクセスできるようになります。
この属性の値が欠落している場合のデフォルトは「非非表示」状態、値が無効である場合のデフォルトは「非表示」状態です。
要素のhidden属性がHidden状態の場合、その要素はページの現在の状態とまだ直接関連していない、あるいはもはや直接関連していない、あるいはユーザーが直接アクセスするのではなく、ページの他の部分で再利用されるコンテンツを宣言するために使用されていることを示します。ユーザーエージェントは、Hidden状態にある要素をレンダリングすべきではありません。
HTMLのhidden属性とCSSの`display: none;`はどちらも要素を非表示にする機能がありますが、動作や用途に違いがあります。hidden属性は、要素をページから見えなくするだけでなく、アクセシビリティツリーからも削除されるため、検索エンジンやスクリーンリーダーなどが要素を認識しなくなります。一方、`display: none;`は要素を非表示にするだけで、レイアウトには影響を与えます
<div hidden=
"hidden"> 非表示</div>
この例では、要素に非表示を指定しています。
inert属性
<a inert href=
"#MH2INERT"> 不活性コンテンツ</a>
inert
不活性サブツリーには、ページの理解や使用に不可欠なコンテンツやコントロール(不活性状態ではない)を含めるべきではありません。不活性サブツリー内のコンテンツは、すべてのユーザーが認識できず、インタラクティブにもなりません。作成者は、要素が表すコンテンツが何らかの形で視覚的に隠蔽されない限り、要素を不活性として指定すべきではありません。ほとんどの場合、作成者は個々のフォームコントロールに inert 属性を指定すべきではありません。このような場合は、disabled 属性の方が適切でしょう。
<a inert href=
"#MH2INERT"> 不活性コンテンツ</a>
この例では、要素に不活性を指定しています。その結果、リンクの機能は無効になっています。
tabindex属性
<a tabindex=
"-1" href= "#MH2TABINDEX"> フォーカス順序</a>
tabindex
「タブインデックス」という名前は、フォーカス可能な要素間を移動するために Tab キーがよく使用されることに由来しています。「タブ移動」という用語は、順次フォーカス可能なフォーカス可能領域を前方に移動することを意味します。
tabindex 属性を指定する場合、有効な整数値を持たなければなりません。正の数値は、要素のフォーカス可能領域の順次フォーカスナビゲーション順序における相対的な位置を指定し、負の数値は、コントロールが順次フォーカス可能ではないことを示します。
開発者は、tabindex 属性に 0 または -1 以外の値を使用する場合は注意が必要です。正しく設定するのは複雑だからです。
- -1
- 要素をフォーカス可能にし、作成者がクリックフォーカスは可能だがシーケンシャルフォーカスは不可能とすることを希望していることを示します。ユーザーエージェントは、プラットフォームの慣例に従った特定の要素タイプや、キーボードのみを使用するユーザーなど、クリックフォーカスとシーケンシャルフォーカスのこの設定を無視する場合があります。
- 0
- 要素をフォーカス可能にし、作成者がクリックフォーカスとシーケンシャルフォーカスの両方を希望していることを示します。ユーザーエージェントは、クリックフォーカスとシーケンシャルフォーカスの両方の希望を無視する場合があります。
- 省略時(または整数以外の値)
- ユーザーエージェントは、要素がフォーカス可能かどうか、またフォーカス可能な場合は、シーケンシャルフォーカス可能かクリックフォーカス可能か(あるいはその両方)を判断します。
- 正の整数値
- 0 と同じように動作しますが、さらに、tabindex 属性値の高い要素が後に表示されるように、tabindex 順のフォーカスナビゲーションスコープ内で相対的な順序付けを作成します。
<a tabindex=
"-1" href= "#MH2TABINDEX"> フォーカス順序</a>
この例では、シーケンシャルフォーカスで対象外と指定しています。
autofocus属性
<a autofocus href=
"#MH2AUTOFOCUS"> 自動フォーカス</a>
autofocus
ダイアログ要素内、または popover 属性が設定されている HTML 要素内の要素に autofocus 属性が指定されている場合、ダイアログまたはポップオーバーが表示されたときにその要素にフォーカスが当てられます。
autofocus 属性はブール型属性です。
<a autofocus href=
"#MH2AUTOFOCUS"> 自動フォーカス</a>
この例では、ページが読み込まれた直後に要素にフォーカスを当てるように指定しています。
accesskey属性
<a accesskey=
"9" href= "#MH2ACCESSKEY"> アクティブ化</a>
accesskey
正確なショートカットは、ユーザーのキーボード情報、プラットフォームに既に存在するキーボードショートカット、およびページで指定されている他のショートカットに基づいて、ユーザーエージェントによって決定されます。これらの情報は、accesskey 属性で提供される情報に基づいて使用されます。
適切なキーボードショートカットが様々な入力デバイスで利用できるようにするために、作成者は accesskey 属性で複数の代替ショートカットを提供することができます。
各代替ショートカットは、文字や数字などの単一の文字で構成されます。
ユーザーエージェントはユーザーにキーボードショートカットのリストを提供できますが、作成者も提供することが推奨されます。accessKeyLabel IDL 属性は、ユーザーエージェントによって割り当てられた実際のキーの組み合わせを表す文字列を返します。
<a accesskey=
"9" href= "#MH2ACCESSKEY" id= "JDV24213"> アクティブ化</a> <script>
document
.addEventListener( "DOMContentLoaded", function() { var _loJsElement13 = document
.getElementById( "JDV24213"); var _lsJsAccessKey = _loJsElement13
.accessKeyLabel || _loJsElement13 .accessKey; _loJsElement13
.appendChild( document .createTextNode( '(' + _lsJsAccessKey + ')')); });
</script>
この例では、ALT + 9 でアクティブ化するように指定しています。
contenteditable属性
<div contenteditable=
"true"> 編集可能</div>
contenteditable
- true
- 要素は編集可能です。
- false
- 要素は編集できません。
- plaintext-only
- 要素の生のテキストコンテンツのみが編集可能で、リッチフォーマットは無効です。
属性の欠損値のデフォルトと無効値のデフォルトはどちらも継承状態です。継承状態は、親要素の状態に基づいて要素が編集可能(または編集不可)であることを示します。
<div contenteditable=
"true" id= "JDV24214"> 編集可能</div>
この例では、「編集可能」という文字を編集することができるように指定しています。
spellcheck属性
<input spellcheck=
"true" value= "spell check">
spellcheck
- true
- スペルと文法がチェックされます。
- false
- スペルと文法はチェックされません。
属性の欠損値のデフォルトと無効値のデフォルトはどちらもデフォルト状態です。デフォルト状態は、要素がデフォルトの動作(親要素のスペルチェック状態に基づく場合もあり)に従って動作することを示します。
<input spellcheck=
"true" value= "spell check">
この例では、スペルと文法をチェックするように指定しています。
writingsuggestions属性
<input writingsuggestions=
"true" value= "writing">
writingsuggestions
- true
- この要素については、ライティングの提案を提供する必要があります。
- false
- この要素についてはライティングの提案は提供されません。
この属性の値が欠落している場合のデフォルトは Default 状態です。Default 状態は、要素がデフォルトの動作(親要素の writingsuggestions 状態に基づく場合もあります)に従って動作することを示します。
この属性の値が無効である場合のデフォルトは True 状態です。
<input writingsuggestions=
"true" value= "writing">
この例では、ライティングの提案を提供するように指定しています。
autocapitalize属性
<input autocapitalize=
"on" value= "auto capitalize">
autocapitalize
- off, none
- 自動大文字化は適用されません(すべての文字はデフォルトで小文字になります)。
- on, sentences
- 各文の最初の文字はデフォルトで大文字になり、その他の文字はすべてデフォルトで小文字になります。
- words
- 各単語の最初の文字はデフォルトで大文字になり、その他の文字はすべてデフォルトで小文字になります。
- characters
- すべての文字はデフォルトで大文字になります。
属性の欠落値のデフォルトはデフォルトの状態であり、無効値のデフォルトは文の状態です。
デフォルトの状態は、ユーザーエージェントと入力メソッドは、自動大文字化を有効にするかどうかを独自に決定する必要があります。
autocapitalize 属性は、通常実装されているように、物理キーボードでの入力時の動作には影響しません。
autocapitalize 属性は、type 属性が URL、Email、または Password のいずれかの状態である input 要素に対して自動大文字化を有効にすることはありません。
モバイル端末の仮想キーボードや音声入力など、テキスト入力方法の中には、文頭の文字を自動的に大文字にすることでユーザーを支援するものがあります(この規則を持つ言語でテキストを入力する場合)。自動大文字化を実装した仮想キーボードでは、自動大文字化されるべき文字を入力しようとした際に、自動的に大文字表示に切り替わる場合があります(ただし、ユーザーは小文字に戻すことができます)。音声入力など、他の種類の入力方法では、ユーザーが最初に介入する選択肢がない方法で自動大文字化が行われる場合があります。autocapitalize 属性を使用すると、作成者はこのような動作を制御できます。
<input autocapitalize=
"on" value= "auto capitalize">
この例では、各文の最初の文字はデフォルトで大文字になり、その他の文字はすべてデフォルトで小文字になるように指定しています。
物理キーボードでの入力時の動作には影響しません。 仮想キーボードや音声入力などへの入力支援なので、動作確認にはご注意下さい。
autocorrect属性
<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属性を使用すると、作成者はこのような動作を制御できます。
<input autocorrect=
"on" value= "auto correct">
この例では、入力中にスペルミスを自動的に修正するように指定しています。
inputmode属性
<input inputmode=
"text" value= "input mode">
inputmode
- none
- ユーザーエージェントは仮想キーボードを表示すべきではありません。このキーワードは、独自のキーボードコントロールを表示するコンテンツで役立ちます。
- text
- ユーザーエージェントは、ユーザーのロケールでテキスト入力が可能な仮想キーボードを表示すべきです。
- tel
- ユーザーエージェントは、電話番号入力が可能な仮想キーボードを表示すべきです。これには、0~9の数字、"#" 文字、および "*" 文字のキーが含まれます。ロケールによっては、アルファベットのニーモニックラベルも含まれる場合があります(例:米国では、"2" というラベルのキーは、歴史的に A、B、C の文字も含まれています)。
- url
- ユーザーエージェントは、ユーザーのロケールでテキスト入力が可能な仮想キーボードを表示すべきです。これには、URLの入力を支援するキー("/" や "." 文字など)や、ドメイン名でよく見られる文字列("www." や ".com" など)のクイック入力を支援するキーが含まれます。
- ユーザーエージェントは、ユーザーのロケールでテキスト入力が可能な仮想キーボードを表示する必要があります。これには、「@」文字や「.」文字などのメールアドレス入力を支援するキーが含まれます。
- numeric
- ユーザーエージェントは、数値入力が可能な仮想キーボードを表示する必要があります。このキーワードはPIN入力に便利です。
- decimal
- ユーザーエージェントは、小数点以下の数値入力が可能な仮想キーボードを表示する必要があります。数値キーとロケールの書式区切り記号が表示される必要があります。
- search
- ユーザーエージェントは、検索に最適化された仮想キーボードを表示する必要があります。
inputmodeが指定されていない場合(またはユーザーエージェントがサポートしていない状態の場合)、ユーザーエージェントは表示するデフォルトの仮想キーボードを決定する必要があります。入力タイプやパターン属性などのコンテキスト情報を使用して、ユーザーに表示する仮想キーボードの種類を決定する必要があります。
<input inputmode=
"text" value= "input mode">
この例では、ユーザーのロケールでテキスト入力が可能な仮想キーボードを表示すべきと指定しています。
enterkeyhint属性
<input enterkeyhint=
"enter" value= "enterkey hint">
enterkeyhint
- Enter
- ユーザーエージェントは、操作「Enter」のキューを提示する必要があります。これは通常、改行を挿入することを意味します。
- done
- ユーザーエージェントは、操作「done」のキューを提示する必要があります。これは通常、入力する内容がなくなり、入力方式エディタ(IME)が閉じられることを意味します。
- go
- ユーザーエージェントは、操作「go」のキューを提示する必要があります。これは通常、ユーザーが入力したテキストのターゲットにユーザーを誘導することを意味します。
- next
- ユーザーエージェントは、操作「next」のキューを提示する必要があります。これは通常、ユーザーをテキストを受け付ける次のフィールドに誘導することを意味します。
- previous
- ユーザーエージェントは、操作「previous」のキューを提示する必要があります。これは通常、ユーザーをテキストを受け付ける前のフィールドに誘導することを意味します。
- search
- ユーザーエージェントは、操作「search」のキューを提示する必要があります。これは通常、ユーザーが入力したテキストの検索結果にユーザーを誘導することを意味します。
- 送信
- ユーザーエージェントは、「送信」操作のキューを提示し、通常はテキストをターゲットに送信します。
enterkeyhintが指定されていない場合(またはユーザーエージェントがサポートしていない状態の場合)、ユーザーエージェントは表示するデフォルトのアクションラベル(またはアイコン)を決定する必要があります。inputmode、type、pattern属性などのコンテキスト情報を使用して、仮想キーボードに表示するアクションラベル(またはアイコン)を決定する必要があります。
<input enterkeyhint=
"enter" value= "enterkey hint">
この例では、操作「Enter」のキューを提示すると指定しています。
draggable属性
<div draggable=
"true"> draggable</div>
draggable
- true
- 要素はドラッグ可能になります。
- false
- 要素はドラッグ可能になりません。
属性の値が欠落している場合のデフォルトと、値が無効である場合のデフォルトはどちらも自動状態です。自動状態は、ユーザーエージェントのデフォルトの動作を使用します。
ドラッグ可能な属性を持つ要素には、視覚的ではないインタラクションのために要素名を表す title 属性も必要です。
<div draggable=
"true"> draggable</div>
この例では、ドラッグ可能と指定しています。
popover属性
<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 です。
<div popover=
"auto" id= "JDV24222"> popover</div> <button type=
"button" popovertarget= "JDV24222"> ボタン</button>
この例では、ポップオーバーを自動と指定しています。
itemscope属性
<div itemscope>
<p>
My name is <span itemprop= "name"> Elizabeth</span>.</p> </div>
itemscope
itemscope 属性を持つ要素には、アイテムのアイテム タイプを指定するために itemtype 属性を指定できます。
My name is Elizabeth .
<div itemscope>
<p>
My name is <span itemprop= "name"> Elizabeth</span>.</p> </div>
この例示は、「HTML Standard」 の 「5 Microdata」 の 「5.1.2 The basic syntax」 にある例示をそのまま引用したものです。
この例では、name というプロパティに、値が "Elizabeth" です。
{ name: "Elizabeth" }
itemtype属性
<dl itemscope itemtype=
"https://vocab.example.net/book" itemid= "urn:isbn:0-330-34032-8"> <dt>
Title</dt> <dd itemprop=
"title"> The Reality Dysfunction</dd> <dt>
Author</dt> <dd itemprop=
"author"> Peter F. Hamilton</dd> <dt>
Publication date</dt> <dd>
<time itemprop= "pubdate" datetime= "1996-01-26"> 26 January 1996</time></dd> </dl>
itemtype
itemtype 属性を指定する場合、その値は、順序なしのスペース区切りの一意なトークン集合でなければなりません。トークンは互いに重複せず、それぞれが絶対 URL である有効な URL 文字列であり、かつ、すべてが同じ語彙を使用するように定義されていなければなりません。属性の値は少なくとも 1 つのトークンを持たなければなりません。
アイテムのアイテム型は、要素の itemtype 属性の値を ASCII 空白文字で分割することによって得られるトークンです。itemtype 属性が欠落しているか、この方法で解析してもトークンが見つからない場合、そのアイテムにはアイテム型がないとされます。
アイテム型はすべて、適用可能な仕様で定義されている型でなければならず、すべて同じ語彙を使用するように定義されていなければなりません。
当該仕様で別途規定されている場合を除き、アイテム型として指定された URL は自動的に参照解除されるべきではありません。
- Title
- The Reality Dysfunction
- Author
- Peter F. Hamilton
- Publication date
<dl itemscope itemtype=
"https://vocab.example.net/book" itemid= "urn:isbn:0-330-34032-8"> <dt>
Title</dt> <dd itemprop=
"title"> The Reality Dysfunction</dd> <dt>
Author</dt> <dd itemprop=
"author"> Peter F. Hamilton</dd> <dt>
Publication date</dt> <dd>
<time itemprop= "pubdate" datetime= "1996-01-26"> 26 January 1996</time></dd> </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属性
<dl itemscope itemtype=
"https://vocab.example.net/book" itemid= "urn:isbn:0-330-34032-8"> <dt>
Title</dt> <dd itemprop=
"title"> The Reality Dysfunction</dd> <dt>
Author</dt> <dd itemprop=
"author"> Peter F. Hamilton</dd> <dt>
Publication date</dt> <dd>
<time itemprop= "pubdate" datetime= "1996-01-26"> 26 January 1996</time></dd> </dl>
itemid
itemid 属性を指定する場合、その値は有効な URL でなければならず、スペースで囲まれていても構いません。
アイテムのグローバル識別子とは、その要素に itemid 属性がある場合、その属性が指定されている要素のノード文書を基準として解析された値のことです。itemid 属性がない場合、または解析が失敗した場合は、グローバル識別子がないとみなされます。
itemid 属性は、itemscope 属性と itemtype 属性の両方が指定されていない要素には指定してはなりません。また、itemscope 属性を持つ要素で、itemtype 属性にそのボキャブラリの仕様で定義されているようにアイテムのグローバル識別子をサポートしないボキャブラリが指定されている場合にも指定してはなりません。
グローバル識別子の正確な意味は、語彙の仕様によって決定されます。同じグローバル識別子を持つ複数のアイテム(同一ページ上または異なるページ上)の存在が許容されるかどうか、また、同じIDを持つ複数のアイテムが存在する場合の処理規則は、当該語彙の仕様によって定義されます。
- Title
- The Reality Dysfunction
- Author
- Peter F. Hamilton
- Publication date
<dl itemscope itemtype=
"https://vocab.example.net/book" itemid= "urn:isbn:0-330-34032-8"> <dt>
Title</dt> <dd itemprop=
"title"> The Reality Dysfunction</dd> <dt>
Author</dt> <dd itemprop=
"author"> Peter F. Hamilton</dd> <dt>
Publication date</dt> <dd>
<time itemprop= "pubdate" datetime= "1996-01-26"> 26 January 1996</time></dd> </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属性
<div itemscope id=
"amanda" itemref= "a b"> </div> <p id=
"a"> Name: <span itemprop= "name"> Amanda</span></p> <div id=
"b" itemprop= "band" itemscope itemref= "c"> </div> <div id=
"c"> <p>
Band: <span itemprop= "name"> Jazz Band</span></p> <p>
Size: <span itemprop= "size"> 12</span> players</p> </div>
itemref
itemref 属性を指定する場合、その値は、他のトークンと重複しない、スペースで区切られた一意のトークンの順序なし集合でなければなりません。また、同じツリー内の要素の ID で構成されます。
itemscope 属性が指定されていない要素には、itemref 属性を指定しないでください。
Name: Amanda
Band: Jazz Band
Size: 12 players
<div itemscope id=
"amanda" itemref= "a b"> </div> <p id=
"a"> Name: <span itemprop= "name"> Amanda</span></p> <div id=
"b" itemprop= "band" itemscope itemref= "c"> </div> <div id=
"c"> <p>
Band: <span itemprop= "name"> Jazz Band</span></p> <p>
Size: <span itemprop= "size"> 12</span> players</p> </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属性
<div itemscope>
<p>
My name is <span itemprop= "name"> Elizabeth</span>.</p> </div>
itemprop
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 .
<div itemscope>
<p>
My name is <span itemprop= "name"> Elizabeth</span>.</p> </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要素に指定して、ページに固有のカスタム データ、状態、注釈などを保存できます。