ITコラム

colmun_main2022

ITコラム

2017.01.17

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

今回は、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 グローバル属性
スペルチェックを行うかどうかを指定する

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.