HTML5 【 要素と属性 】1 ~ 新しい要素と属性

colmun_main2022

今回は、HTML5で新しく創設された要素と属性についてまとめたいと思います。

目次

1.新しい要素
2.新しい属性

1.新しい要素

要素 概要
section 文書やアプリケーションにおける一般的なセクションを表す
h1~h6 要素と共に使用して、文書構造を表すことができる
article ブログのエントリや新聞記事など、文書内で自己完結可能な箇所を示す
aside ページ内にあるメイン以外の内容を表す
hgroup セクションの見出しを表す
header 導入部やナビゲーションをグループ化する
footer セクションのフッタを表す
フッタには作者に関する情報や、著作権情報などが入る
nav ナビゲーションとなるセクションを表す
figure 本文から単独で参照されることの多い、自己完結した内容を表す
figcaption キャプションを提供する
audio マルチメディアコンテンツを埋め込む
API が提供され、製作者がスクリプトを利用して独自のユーザーインターフェースを開発できる
video
source 動画や音声などのURLや種類を指定する
track video 要素にテキストトラックを提供する
embed プラグインを利用するコンテンツに使われる
mark 他の文脈との関連性から言及目的で印付けられたテキストを表す
progress ダウンロードや負荷の高い処理などに用いられる実行中のタスクを記す
meter ディスク容量などの測定値を表す
time 日付や時刻などの時間情報を表す
ruby ルビをマークアップする
rt
rp
bdi 双方向のテキストにおいて、マークアップしたテキストが周辺の文字の影響を受けないようにする
wbr 改行機会 (line break opportunity) を与える
canvas グラフやゲームなど、動的に描画・更新が行われるビットマップグラフィックスに用いられる
command ユーザーが実行するコマンドを表す
details ユーザーがオンデマンドに受け取る付加的な情報やコントロールを表す
summary details要素の内容の要約や説明、キャプションを提供する
datalist input 要素の新しい list 属性と組み合わせ、コンボボックスを作成する
keygen キーのペアを生成するためのフォームコントロールを表す
output スクリプトによる計算結果など、何らかの出力結果を表す

▲目次へ戻る

2.新しい属性

属性 概要
media a 要素と area 要素で使用する属性
link 要素との一貫性のために追加された
hreflang area 要素で使用する属性
a 要素と link 要素との一貫性のために追加された
type
rel
target base 要素で使用する属性
a 要素との一貫性のために追加された
charset meta 要素で使用する属性
文書の文字エンコーディングをより良く指定する
autofocus input要素、 select要素、 textarea要素、 button 要素で使用する属性(但し、type 属性に hidden が指定された input 要素には指定できない)
ページのロード時にフォームコントロールにフォーカスを与える
placeholder input 要素と textarea 要素で使用する属性
ユーザに対し、フォームに入力する情報についてヒントを与える
form input 要素、output要素、select要素、textarea要素、button要素、label要素、object要素、fieldset 要素で使用する属性
コントロールが属するフォームを指定する
required input 要素と textarea 要素で使用する属性(但し、type 属性に hidden、image、submit など、何らかのボタンタイプが指定された input 要素には指定できない)
フォームを送信するためにユーザが値を入力しなければならないコントロールを指定する
select に指定する場合、最初の option 要素は値が空のプレースホルダとする必要がある
disabled fieldset 要素で使用する属性
すべての子孫コントロールを無効化する
name button 要素、fieldset 要素、form 要素、iframe 要素、img 要素、input 要素、keygen 要素、map 要素、meta 要素、object 要素、output 要素、param 要素、select 要素、textarea 要素で使用する属性
スクリプトからのアクセスに利用する
autocomplete input 要素で使用する属性
さまざまな制約を加える
min
max
multiple
pattern
step
list input 要素で使用する属性
入力候補を示す
dirname input 要素と textarea 要素で使用する属性
ユーザが送信する内容の書字方向に影響する
maxlength textarea 要素で使用する属性
入力可能な文字数を制御する
wrap textarea 要素で使用する属性
送信される内容の行送りの挙動を制御する
novalidate form 要素で使用する属性
フォーム検証を無効にして、フォームをいつでも送信可能にする
formaction input 要素と button 要素で使用する属性
form 要素の action属性を上書きする
formenctype input 要素と button 要素で使用する属性
form 要素の enctype属性を上書きする
formmethod input 要素と button 要素で使用する属性
form 要素の method属性を上書きする
formnovalidate input 要素と button 要素で使用する属性
form 要素の novalidate属性を上書きする
formtarget input 要素と button 要素で使用する属性
form 要素の target 属性を上書きする
type menu 要素で使用する属性
要素を典型的なユーザインターフェースで見られるようなメニューに変形させる
グローバル属性 contextmenu と併用することで、コンテキストメニューの提供もできる
label
scoped style 要素で使用する属性
スコープを絞ったスタイルシートを指定する(ローカルツリーにのみ適用)
async script 要素で使用する属性
スクリプトのローディングおよび実行に影響を与える
manifest html 要素で使用する属性
オフライン Web アプリケーションのための API と協調し、アプリケーションキャッシュのマニフェストを指定する
sizes link 要素で使用する属性
異なる大きさのアイコンを指定する
reversed ol 要素で使用する属性
リストが降順であることを示す
seamless iframe 要素で使用する属性
テキスト内容をサンドボックス化したい時に利用する
sandbox
contenteditable グローバル属性
指定された要素が編集可能領域であることを示す
contextmenu グローバル属性
製作者によって提供されるコンテキストメニューを指定する
data-* グローバル属性
製作者が好きに定義することができる(但し、ユーザエージェントの拡張として利用することはできない)
draggable グローバル属性
新しく定義されたドラッグ & ドロップ API と組み合わせて利用する
dropzone
hidden グローバル属性
現在またはこの先において、意味を成さない要素を表す
role グローバル属性
支援技術を指示するために利用する
aria-*
spellcheck グローバル属性
スペルチェックを行うかどうかを指定する

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です