見落としがちなHTML5で変更された要素いろいろ

HTML5 の基本はここからお勉強！

「ところで HTML5 ってなに？」という方は、まずは以下の記事を読んでみてください。このように HTML5 の基本について解説している記事はたくさんあるので、詳しい説明は今回は端折らせて頂きます。変更点のみに焦点を当てますよ！

• Web の 3 つの問題を解決する「HTML5」とは何なのか
• HTML4 から変化した HTML5 のマークアップ　ここが違う！サンプルで見る HTML5
• XHTML1.0 と HTML5 の違いをスタバのページで紹介
• HTML5 でやりがちな間違い

HTML5 で変更された要素

<a> 要素

今まで製作途中でダミーリンクを表示するために <a href="#">リンク</a> 等を使っていたと思いますが、HTML5 では href 属性を使わず、 a 要素のみでダミーリンクを表現できるようになりました。

<a>このリンク</a>はダミーです。

div、p などのブロック要素全体を a で囲んでリンクにすることもできます。

<a href="http://google.com"><p>Google ページに飛びます</p></a>

アンカーリンクを表すために a 要素を使ってはいけないようです。今までは <a name=""> のところへジャンプしていましたが、アンカーしたいところは、そのコンテンツに id を指定して飛ばします。

<a href="#anchor">アンカーリンクへジャンプ</a>
……
<h1 id="anchor">ここにジャンプ</h1>

<address> 要素

address 要素は直近の祖先にあたる article もしくは body 要素に対する連絡先情報に使います。直近の祖先が body 要素なら、その連絡先情報は、ページ全体（Web サイトの管理者）への連絡先となります。なので、コンテンツ内に「支店一覧」ページがあったとしても、そこの住所へ address タグを使う事はできません。また、連絡先ではない情報（更新日時、コピーライト等）の情報にも使えません。Web サイトの管理者と、記事の執筆者が異なるような、記事の投稿サイトでは以下のようにマークアップできます。

<article>
  <header>
    <h1>記事タイトル</h1>
    <p><time>2011. 9. 6</time></p>
  </header>
  <p>記事の内容が入ります…</p>
  <footer>
    <address>
      この記事は<a href="mailto:xxx@example.com">Mana氏</a>により書かれました。
    </address>
  </footer>
</article>

<footer>
  <address>
    執筆については<a href="mailto:xxx@example.com">サイト管理者</a
    >にお問い合わせください。
  </address>
  <p><small>&copy; copyright 2011 Webクリエイターボックス</small></p>
</footer>

<b> 要素

フォントのスタイル要素だった b は、HTML5 では文書の概要におけるキーワードや、レビュー内の製品名、記事のリード文など、他の文章とは区別したいテキストの範囲に使います。重要性や強調という意味はありません。一番わかりやすいのはニュース記事のリード文での使い方ですね。（こちらの記事を例にしました）

<article>
  <h1>スティーブ・ジョブズ氏、AppleのCEOを辞任</h1>
  <p>
    <b>
      病気療養中のAppleのスティーブ・ジョブズ氏がCEOを辞任する。後継にはCOOのティム・クック氏が就任する見込みだ。
    </b>
  </p>
  <p>
    米Appleは8月24日（現地時間）、同社のスティーブ・ジョブズCEOが辞任し、COO（最高経営責任者）のティム・クック氏が引き継ぐと発表した。…
  </p>
</article>

<cite> 要素

今までは人の名前にも使われていた cite 要素ですが、HTML5 では作品のタイトル (本、新聞、小論、詩、楽譜、楽曲、脚本、映画、テレビ番組、ゲーム、彫刻、絵画、演劇、オペラ、ミュージカル等) を表すようになりました。

<p>
  暖かな日差しが包みこむ公園のベンチで、私はマンガの<cite>Real</cite>を読み始めた。
</p>

<hr> 要素

これまでは水平線を引く役割のあった hr 要素は、HTML5 では段落レベルでのテーマの変わり目を表すようになりました。section 自体がテーマを区切る役割があるので、 section と section の間に hr を入れる必要はありません。話が変わるけど見出しがつかない場合などに使えます。

<p>
  暖かな日差しが包みこむ公園のベンチで、私はマンガの<cite>Real</cite>を読み始めた。
</p>
<hr />
<p>
  なんだか肌寒くなってきた。マンガを読むのに夢中になっていた私は気づかなかったが、どうやら２時間ほど経過していたようだ。
</p>

<i> 要素

b と同様、フォントのスタイル要素だった i 要素。HTML4 以前ではイタリック（斜体）で文字を表示するタグでした。HTML5 では文章のなかで、声や雰囲気など、通常の文章とは区別したい範囲を表します。専門用語、他言語での慣用句、考え、船舶名表記なども当てはまります。強調は表しません。

<p><i>久信…。</i>私はつぶやいて立ち上がった。</p>

<s> 要素

取り消し線を表していた s 要素は正しくなくなった、もう関係性のない内容に使われます。そのページから削除された内容には del を使います。

<p><s>商品 A - 価格：400 円</s></p>
<p>商品 A - セール価格：320 円！</p>

<!-- 完全に削除されたものには del -->
<p><del>商品A - 価格：400円</del></p>
<p>売り切れました</p>

<small> 要素

小さい文字で表すのに使われていた small 要素は、免責条項・警告・法的制約・著作権表記などを説明するのに使われます。フッター部分のコピーライトに使うようにしましょう。

<p><small>&copy; copyright 2011 Web クリエイターボックス</small></p>

<strong> 要素

strong 要素は、文章の重要度を示すものです。入れ子にして重要性の度合いを高ることができます。

<p>
  <strong>
    コートに出ている選手の合計点が
    <strong>14 点以内</strong>
    でなければならない。
  </strong>
</p>

<u> 要素

HTML4 以前では下線を引く意味のあった u 要素は、中国語での固有名詞や、スペルミスのある単語の指示などに利用されます。が、ほとんどの場合で他の要素のほうが適切といえるようです。また、リンクテキストだと勘違いされないように注意が必要です。

<p>本文内に誤字がありました。 P.232「<u>Halo</u> World」</p>

HTML5 で使えない要素

以下の要素は HTML5 では廃止されました。CSS で扱うべき・ユーザビリティやアクセシビリティに影響する・他の要素でよりよく処理できる等が主な廃止理由です。最近ではあまり使われなくなったものが多いですが、これらのタグを使用していないか、もう一度見なおしてみましょう。

• basefont
• big
• center
• font
• strike
• tt
• frame
• frameset
• noframes
• acronym
• applet
• isindex
• dir

HTML4 以前では見た目だけに使われていた要素も、HTML5 では意味を持った要素に進化していますね！見た目は全て CSS に任せるという概念を頭に入れておきましょう。その他、HTML5 の要素についてのさらに詳しい解説は以下のサイトを読んでみてください。

HTML5 における HTML4 からの変更点 - W3C