menu
menu

キーワード検索

 

最近の投稿

HTML5・要素と属性

  • HTML

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
関連リンク

HTML5・ページ作成の基本

参考

HTML5 differences from HTML4

  • カテゴリー:HTML