12月更新・前月(11月)の人気記事トップ10 12/07/2023
- ( 02 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 05 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 06 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- (圏外↑) 【jQuery】入門11. switch文による条件分岐
- (圏外↑) 【Mac】Safariでソースコードを見る方法
- ( 09 ↑) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- (圏外↑) 【jQuery】入門7. jQueryで新しいWindowを開く
- (圏外↑) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
【HTML5リファレンス】HTML5・要素と属性
こんにちは（・∀・）
HTML5へ移行するための参考資料、要素と属性のご紹介です。
新しい要素
HTML5では次の要素が新しく追加されました。
section
一般的なセクションを表します。見出しh1・h2・h3・h4・h5・h6を使用して文書構造を表すことができます。
article
ブログのエントリや記事など、その範囲だけでも1つのコンテンツとして完結するような部分で使用します。見出しh1、h2、h3、h4、h5、h6を用いて文書構造を表すことができます。
aside
ページの内容とあまり関係のない補足情報等を表します。関連広告やリンク等に利用します。
hgroup
複数の見出し要素をグループ化します。h1、h2、h3、h4、h5、h6のみをグループ化することができます。
hgroup要素がHTML5の勧告候補から削除されました。HTML5.1の仕様からも削除されました。
追記 2013.04.30
参考
http://hyper-text.org/archives/2013/04/drop_hgroup_html5_cr.shtml
header
セクションごとにヘッダを使用することができ、そのページ内で何回でも利用できます。
footer
セクションごとにフッタを使用することができ、そのページ内で何回でも利用できます。フッタには作者に関する情報や著作権情報などを含められます。
nav
グローバルナビゲーション、ページ内リンク、パンくずリスト等で使用します。
figure
本文から単独で参照される内容を表します。
figcaption
参照される内容に対してキャプションを付けます。
audio
オーディオデータ再生用の要素です。スクリプトを利用し独自のユーザーインターフェースを作成するためのAPIが提供されます。ユーザーエージェントが自動的にインターフェースを追加するような仕組みも導入されます。source要素を用いることで異なるメディアデータを選択させることもできます。
video
ビデオデータ再生用の要素です。スクリプトを利用し独自のユーザーインターフェースを作成するためのAPIが提供されます。ユーザーエージェントが自動的にインターフェースを追加するような仕組みも導入されます。source要素を用いることで異なるメディアデータを選択させることもできます。
embed
Flash等のプラグインを利用するコンテンツで使用します。
mark
印し付けのための要素です。参照しやすいようテキストを目立たせます。
progress
ダウンロードや負荷の高い処理を実行する際に利用します。実行中のタスクを表します。
meter
特定の範囲内の数量や割合を表します。ディスク容量などの測定値を表す際に利用します。
time
日付や時刻などの時間情報を表します。
ruby
ルビ(ふりがな)を付けたいテキストに使用します。
rt
ruby内のルビを付けたいテキストに対して使用します。
rp
ルビ表示に対応していないブラウザではルビテキストの前後に括弧を付ける。ルビに対応しているブラウザでは()は表示されない。
bdi
双方向のテキストが周辺の文字の影響を受けないようにします。
wbr
単語の改行位置の候補を指定します。
canvas
グラフやゲーム等、動的に実行されるビットマップグラフィックスで使用します。
command
ユーザーが実行するコマンドを表します。
details
オンデマンド(ユーザーのリクエストの実行)で提供される追加情報等を表します。summary要素で要約等を提供します。
datalist
input要素とlist属性を組み合わせてコンボボックスを作成することができます。
keygen
暗号化用のキーのペアを生成します。
output
スクリプトによる計算結果等の出力結果を表します。
main
main要素はフローコンテンツです。メインとなるコンテンツで使用します。空では使えず、body内で一つしか使えません。main要素はセクショニング要素(header、footer、article、section、nav、aside)ではありません。またそれらに含む事もできません。
input要素のtype属性は新しく次の値をサポートします
tel
search
url
email
datetime
date
month
week
time
datetime-local
number
range
color
これらの属性値でサーバーにデータを送信することができるように定義されました。
新しい属性
HTML5ではHTML4.01で定義されていた要素に新しい属性を導入しました。
| 要素 | 属性 | 解説 |
|---|---|---|
| a |
media target |
target属性はHTML5では非推奨ではなくなりました。 |
| area |
media hreflang rel target |
target属性はHTML5では非推奨ではなくなりました。 |
| base | target | - |
| li | value | value属性はHTML5では非推奨ではなくなりました。 |
| ol |
reversed start |
start属性はHTML5では非推奨ではなくなりました。 |
| meta | charset | - |
| input |
autofocus placeholder form required autocomplete min max multiple pattern step dirname formaction formenctype formmethod formnovalidate formtarget |
autofocus属性はtype属性にhiddenが指定されたinput要素には指定できません。 placeholder属性 form属性 required属性はtype属性にhidden、image、submit等のボタンタイプが指定されたinput要素には指定できません。 formaction属性 formenctype属性 formmethod属性 formnovalidate属性 formtarget属性 これらの属性が記述されている場合、form要素のaction属性、enctype属性、method属性、novalidate属性、target属性は上書きされます。 |
| select |
autofocus form |
autofocus属性はtype属性にhiddenが指定されたinput要素には指定できません。 |
| textarea |
autofocus placeholder form required dirname |
autofocus属性はtype属性にhiddenが指定されたinput要素には指定できません。 placeholder属性 form属性 required属性 これらはtype属性にhidden、image、submit等のボタンタイプが指定されたinput要素には指定できません。 |
| button |
autofocus form formaction formenctype formmethod formnovalidate formtarget |
autofocus属性はtype属性にhiddenが指定されたinput要素には指定できません。 formaction属性 formenctype属性 formmethod属性 formnovalidate属性 formtarget属性 これらの属性が記述されている場合、form要素のaction属性、enctype属性、method属性、novalidate属性、target属性は上書きされます。 |
| output | form | - |
| fieldset |
form disabled |
- |
| datalist | list | - |
| form | novalidate | - |
| menu |
type label |
label属性はグローバル属性contextmenuと併用することで、コンテキストメニューの提供も行うことができるようになりました。 |
| style | scoped | このようなstyle要素によるスタイル指定は、ローカルツリーにのみ適用されます。 |
| script | async | - |
| html | manifest | - |
| link | sizes | - |
| iframe |
seamless sandbox |
- |
HTML4.01で定義されていたいくつかの属性(class属性、dir属性、id属性、lang属性、style属性、tabindex属性、title属性)は、すべての要素に適用できるようになりました。これらはグローバル属性となります。新しいグローバル属性も導入されました。
contenteditable属性
contextmenu属性
data-*属性
draggable属性
dropzone属性
hidden属性
role属性
aria-*属性
spellcheck属性
HTML5ではHTML4.01で定義されていたonevent-name等のイベントハンドラ属性すべてがグローバル属性に変更されました。 新たにvideoやaudioといったメディア要素で利用されるplayイベントハンドラ属性も設定されました。
変更予定の要素
次の要素はHTML5から意味が変更されています。
| 要素 | 変更前 | 変更後 |
|---|---|---|
| a | リンクの設定 | href属性のないa要素はプレースホルダを表すようになりました。内容にブロックレベル要素も含むことができるようになりました。 |
| address | 連絡先の表示 | 管理者の連絡先を表示します。管理者以外の連絡先には使用できない。また連絡先以外の内容(著作権等)も含めることができない。 |
| b | テキストを太字にする | 文章の中の重要度を示すのではなく、スタイル上の表現が異なる部分を表すために使用します。 |
| cite | 引用元の表示 | タイトルを表示します。それ以外の情報は含めない。 |
| hr | 水平線を表示 | 段落の区切りに使用する。セクション間の区切りには使用しない。 |
| i | イタリック体で表示 | 文章内で異なった声やムード、心の声等を表現する際に使用します。 |
| label | フォームの部品とラベルを関連付ける | 関連付けられたフォームにブラウザはフォーカスを移しません。ただし、プラットフォーム側でラベルとフォームのフォーカスが関連付けられている場合はこの限りではありません。 |
| menu | メニュー型のリストを作成する | ツールバーやコンテキストメニューを表します。 |
| s | 取り消し線を引く | 正しくなくなった、または関係がなくなったというような内容を表すときに使用します。間違っていたので訂正しますというときは「del」を使用します。 |
| small | 小さ目の文字サイズで表示 | 脚注や法的条項などの細字部分(免責事項や著作権表示等)を表します。インラインで使用します。 |
| strong | より強い強調を表す | 文章の一部を部分的に強調するものではなく、文章の重要度を示すものとなりました。 |
| head | 文章のヘッダ | 子要素としてobjectを含むことができなくなりました。 |
変更予定の属性
| 要素 | 属性 | 解説 |
|---|---|---|
| script | type | script要素のtype属性はスクリプト言語がECMAScriptの場合指定が必須ではなくなりました。 |
| style | type | style要素のtype属性はスタイル言語がCSSの場合指定が必須ではなくなりました。 |
次の属性は使うことはできますが代替手段を利用することを強く求められています。
| 要素 | 属性 | 解説 |
|---|---|---|
| img | border | border属性を記述する場合は値に"0"を指定する必要があります。この属性を使用することはできますが、代わりにCSSを使うことを推奨されています。 |
| script | language | language属性を書く場合は値に"Javascript"を指定する必要があります。また、type属性と矛盾がないようにする必要もあります。 |
| a | name | a要素のname属性は使用できますがid属性を使用することが推奨されています。 |
| table | summary | table要素のsummary属性も使用できますがHTML5では他の代替手段を提供しています。 |
廃止予定の要素
次の要素はHTML5では存在しません。これらの機能はCSSを利用します。
| 要素 | 属性 | 解説 |
|---|---|---|
| basefont | - | - |
| big | - | - |
| center | - | - |
| font | - | - |
| strike | - | - |
| tt | - | - |
| u | - | - |
ユーザビリティやアクセシビリティに影響するため次の要素もHTML5に存在しません。
| 要素 | 属性 | 解説 |
|---|---|---|
| frame | - | - |
| frameset | - | - |
| noframes | - | - |
次の要素もHTML5に存在しません。他の要素でも処理できることから含まれていません。
| 要素 | 属性 | 解説 |
|---|---|---|
| acronym | - | abbr要素を使用してください。 |
| applet | - | object要素またはembed要素を使用してください。 |
| isindex | - | フォームコントロールの代用により置き換えられます。 |
| dir | - | ul要素を使用してください。 |
| noscript | - | HTML構文でのみ適合するようになりました。 |
廃止予定の属性
| 要素 | 廃止予定の属性 |
|---|---|
| a | rev charset shape coords |
| area | nohref |
| body | alink link text vlink background bgcolor border cellpadding cellspacing |
| br | clear |
| caption | align |
| col | align char charoff valign width |
| colgroup | align char charoff valign width |
| div | align |
| dl | compact |
| h1 h2 h3 h4 h5 h6 | align |
| head | profile |
| hr | align noshade size width |
| html | version |
| iframe | longdesc align frameborder marginheight marginwidth scrolling |
| img | longdesc name(代わりにid属性を使用する)align hspace vspace |
| input | align |
| legend | align |
| li | type |
| link | rev charset target |
| menu | compact |
| meta | scheme |
| object | archive classid codebase codetype declare standby align border hspace vspace |
| ol | compact type |
| p | align |
| param | valuetype type |
| pre | width |
| table | align bgcolor border cellpadding cellspacing frame rules width |
| tbody | align char charoff valign |
| tfoot | align char charoff valign |
| td | axis abbr scope align bgcolor border cellpadding cellspacing char charoff height nowrap valign width |
| th | axis abbr align bgcolor border cellpadding cellspacing char charoff height nowrap valign width |
| thead | align char charoff valign |
| tr | align bgcolor border cellpadding cellspacing char charoff valign |
| ul | compact type |