HTML5-属性
前の章で説明したように、要素には、要素のさまざまなプロパティを設定するために使用される属性が含まれる場合があります。
一部の属性はグローバルに定義され、任意の要素で使用できますが、他の属性は特定の要素に対してのみ定義されます。すべての属性には名前と値があり、以下の例のようになります。
以下は、「example」の値を使用してclassという名前の属性でdiv要素をマークアップする方法を示すHTML5属性の例です。
<div class = "example">...</div>
属性は内でのみ指定できます start tags で使用してはいけません end tags。
HTML5属性は大文字と小文字を区別せず、すべて大文字または大文字と小文字を組み合わせて記述できますが、最も一般的な規則は小文字を使用することです。
標準属性
以下にリストされている属性は、ほとんどすべてのHTML5タグでサポートされています。
属性 | オプション | 関数 |
---|---|---|
アクセスキー | ユーザー定義の | 要素にアクセスするためのキーボードショートカットを指定します。 |
整列 | 右、左、中央 | タグを水平方向に配置します |
バックグラウンド | URL | 要素の後ろに背景画像を配置します |
bgcolor | 数値、16進数、RGB値 | 要素の後ろに背景色を配置します |
クラス | ユーザー定義の | カスケードスタイルシートで使用する要素を分類します。 |
contenteditable | 真/偽 | ユーザーが要素のコンテンツを編集できるかどうかを指定します。 |
コンテキストメニュー | メニューID | 要素のコンテキストメニューを指定します。 |
データ-XXXX | ユーザー定義の | カスタム属性。HTMLドキュメントの作成者は、独自の属性を定義できます。「data-」で始まる必要があります。 |
ドラッグ可能 | true、false、auto | ユーザーが要素をドラッグできるかどうかを指定します。 |
高さ | 数値 | テーブル、画像、またはテーブルセルの高さを指定します。 |
隠された | 隠された | 要素を表示するかどうかを指定します。 |
id | ユーザー定義の | カスケードスタイルシートで使用する要素に名前を付けます。 |
項目 | 要素のリスト | 要素をグループ化するために使用されます。 |
itemprop | アイテムのリスト | アイテムをグループ化するために使用されます。 |
スペルチェック | 真/偽 | 要素のスペルまたは文法をチェックする必要があるかどうかを指定します。 |
スタイル | CSSスタイルシート | 要素のインラインスタイルを指定します。 |
件名 | ユーザー定義ID | 要素の対応するアイテムを指定します。 |
tabindex | タブ番号 | 要素のタブ順序を指定します。 |
題名 | ユーザー定義の | 要素の「ポップアップ」タイトル。 |
valign | 上、中、下 | HTML要素内のタグを垂直方向に配置します。 |
幅 | 数値 | テーブル、画像、またはテーブルセルの幅を指定します。 |
HTML5タグと関連する属性の完全なリストについては、当社への参照を確認してくださいHTML5のタグを。
カスタム属性
HTML 5で導入されている新機能は、カスタムデータ属性の追加です。
カスタムデータ属性はで始まります data-要件に基づいて名前が付けられます。これが簡単な例です-
<div class = "example" data-subject = "physics" data-level = "complex">
...
</div>
上記のコードは、datasubjectとdata-levelという2つのカスタム属性を持つ完全に有効なHTML5になります。これらの属性の値は、標準の属性の場合と同様の方法でJavaScriptAPIまたはCSSを使用して取得できます。