今回は、HTML5で新しく創設された要素と属性についてまとめたいと思います。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
| 要素 | 概要 |
|---|---|
| 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 | スクリプトによる計算結果など、何らかの出力結果を表す |
| 属性 | 概要 |
|---|---|
| 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 | グローバル属性 スペルチェックを行うかどうかを指定する |
INTERNOUS,inc. All rights reserved.
