自分用覚え書き @Wiki
HTML5
最終更新:
oboegaki1002
HTML5で使い方が変更されたタグのまとめ
●a要素
リンク設定をするaタグですがアンカーリンクの使い方と別ウインドウにリンクを設定するtarget属性の使い方が一部変更になっています。
またリンクの設定する範囲がいままではdivタグやpタグなどのブロックレベル要素や複数のタグを囲ったりすることができませんでしたが、HTML5からはできるようになりました。
アンカーリンクとしての使い方が変わりました
xhtml1.0でアンカーリンクを設定する場合は移動したい場所にa要素のname属性とid属性をセットし、別のa要素のhref属性でそれを参照していました。
HTML5ではページのアンカーを表すためだけにa要素を使うことはできなくなり、name属性も廃止になりました。
HTML5でアンカーを表す場合は、要素に関わらすid属性を指定することでアンカーを機能させることができるようになります。
HTML5ではアンカー設定の際に <a id="top"> と記述しなくても可能となります
target属性が非推奨ではなくなりました
リンクを別ウインドウで表示させる際によく使用していたtarget=_blankですが、実際は今でも使われておりましたが、strictでは非推奨となっており、非推奨タグを使いたくないという場合には別ウインドウで表示させたいときはJavascriptで別ウインドウでリンクを開く対応などをしておりましたが、HTML5ではtarget属性が非推奨ではなくなりました。
別ウインドウでリンクを開く際のtarget="_blank"が非推奨ではなくなりました
div要素や複数のタグをまとめてa要素で囲むことができます
これがHTML5で便利になり、使い方の幅が広くなった変更です。
HTML5からはブロック要素・インライン要素の分類はなくなりますので、a要素でdiv要素やp要素、複数の要素を囲むことが出来ます。
ただし、a要素はトランスペアレントとして規定されているので、その親要素が許すコンテンツ・モデルを囲むことができるという点に注意する必要があります。
また、親要素に関わらずa要素にはbutton要素やiframe要素などのインタラクティブ・コンテンツを入れることが出来ないので注意してください。
ただし、これは今までもあまり使われていなかったのであまり気にする必要はないでしょう。
●address要素
address要素は記述位置によって意味が変わるようになったようですが、こちらはあまり気にしなくていいでしょう。
記事を表すarticle要素内で使用すれば記事著者への連絡先になり、直近の祖先がbody要素の場合ならWebサイト管理者への連絡先を意味することになります。
これまでコピーライトなどもaddressタグを使用していた場合には、そちらは使用できなくなりましたので注意が必要です。
コピーライト表記などには使われなくなりましたので注意しましょう
●b要素
b要素は他と区別したいテキスト部分に使います
b要素はもともと太文字を表示する見た目だけに特化した要素でしたが、HTML5からは文書内のキーワードや記事リードなどの強調や重要性を持たないが他と区別したいテキストを表す場合に使用するようになります。
以前は<b>タグは太字でしたが<strong>タグに切り替わって使われなくなり、重要性の持たない部分を太字にするには<span>タグにclassを設定して太字などにしていましたが、HTML5では<b>タグを使っても良いでしょう。
b要素を実際に使う場合は『strong要素・em要素・mark要素・cite要素』などの使用用途が定義されている要素に適さない場合に使用することになります。
つまり、他の文章と区別したい場合はまずふさわしい要素を探し、どの要素にも当てはまらない場合の最終的な手段としてb要素を選択するというのが良いと思います。
●cite要素
情報の引用元タイトルやテーマ・作品を表す要素
cite要素はもともとあまり使われることが少なかったタグですが、情報の引用元タイトルやテーマ・作品を表す要素となります。
これまでcite要素は情報元の書籍や論文などの著者名を制作者の解釈によって使用することがありましたが、HTML5から人名などをマークアップすることはできなくなりましたので注意が必要です。
●dl要素
dl要素は旧来のような定義リストという意味が無くなり、記述リストとして利用するようになります。
定義リストにする場合はdt要素に定義語を表すdfn要素を用いる必要があります。
dt要素とdd要素は必ずしも1対1である必要はありません。
1対複数もしくはその逆、複数対複数でも構いません。
ただしdt要素とdd要素は必ず関連性があるようにする必要があります。
●hr要素
途中で話題を変える時の目印となる区切り線
hr要素は旧来では罫線を表す要素でしたが、HTML5からは意味的な段落を表すようになります。
ただし、セクションの区切りに使用することはできませんので注意が必要です。
見た目の線をCSSでdisplay:noneとして隠すのなら使わない方がよいのかもしれません。
●i要素
斜体で表示される文字列
i要素はイタリック体を表すだけの見た目だけに特化した要素でしたが、HTML5からは技術用語などの専門用語・他言語の慣用句、または思考・船舶の名前など、他の文章と区別しているテキスト範囲に使います。
●s要素
テキストに引く打ち消し線(取り消し線)
旧来は文章テキストの打ち消し線を引く要素でしたが、HTML5ではもう正確ではなくなった内容や関連性がなくなった内容を表す要素になります。
●small要素
免責条項や警告といった "細目" を表す要素に変更
small要素は小さい文字を表す要素でしたが、HTML5では『免責条項・著作権表記・警告』などの細目テキストを表すようになります。
また、文章での注釈や補足としても使用することもできます。
最もメジャーな使用例はページフッターの著作権表記のマークアップです。
●strong要素
重要性を伝えるテキストの範囲を表す要素
strong要素は以前のような強調の意味が無くなり重要性という意味が加われました。
強調を表したいテキストにはem要素を使うようにします。
また、入れ子にすることで重要度を高めることができます。
●u要素
重要性を伝えるテキストの範囲を表す要素
下線を表していたu要素ですが、HTML5から中国語での固有名詞を明示するためのラベル付けや、単語のスペルミスに対してラベル付けする場合に利用されるようになりました。
また、ハイパーリンクのテキスト(下線付きのテキスト)と見間違えることがあるので紛らわしい箇所での使用には注意する必要があります。
(参考:HTML5で使い方が変更されたタグをまとめよう http://www.mdn.co.jp/di/webcreators/)