2017.03.06 Mon

見落としがちな「HTML5で意味の変わったタグ・属性」

こんにちは、鶴川です。
みなさんは、もうHTML5はマスターしましたか？私はまだまだ勉強中です。。。
意識的に取り組まないと、知らないままということ結構多いですよね。

今回は、そんな見落としがちなHTML5で意味や使い方の変わったタグや属性をまとめたいと思います。

<dl>を定義リストとして使用するなら<dfn>を追加する

HTML5以前の<dl>と言えば「definition list（定義リスト）」を意味していましたが、
HTML5での<dl>は「description list（説明リスト）」となりました。
よって、HTML5で<dl>を定義リストとして使用する場合は<dfn>で定義の対象となる用語を囲う必要があります。

りんご

バラ科リンゴ属の落葉高木樹。またはその果実のこと。植物学上はセイヨウリンゴと呼ぶ。

ちなみに<dt><dd>の終了タグは一定の条件の元、省略できるようになっています。

テキスト関連タグはそれぞれ意味がある

以前は<b>は太字、<i>はイタリック体など単純にテキストをどう見せるかの単なる装飾要素でしたが
HTML5ではそれぞれに意味が定義されたので、<p>だけではなく、適宜使い分けるようにしましょう。

<b>	文書内のキーワードや製品名など、実用的な意味で目立たせた方が良いと思われるもの。
<i>	声や心の中で思ったことなど、普通のテキストとは違う性質のものに切り替わっているもの。
<strong>	強い重要性・緊急性。<strong>の中の一部をさらに<strong>でマークアップすると、強さの度合いは高くなります。
<small>	免責・警告・著作権など、注釈のような付随的な情報をマークアップするもの。
<hr>	段落レベルでのテーマの区切り・変わり目を示す。※ちなみに</section><section>の間についてはそれ自体に区切りがあるので<hr>は不要。

<table>のborder属性はレイアウト用のテーブルでない事を示す

HTML4.01やXHTMLで<table>のborder属性といえば表の線の太さを指定するために使われていましたが、
HTML5ではレイアウト目的でないと示すためのものに意味が変わりました。
よって値には1か空文字以外は指定できません。
そもそも<table>はもうレイアウト目的に使用しません（するべきではありません）が、
もしレイアウト目的にするのであれば role=”presentation” を指定する必要があります。