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

2013年3月23日
HTML, Webサイト制作

HTML5を勉強していて、section, nav, header, footerなどの新しく追加された要素について説明している記事はよく見かけるのですが、HTML5で変更された要素について触れている記事が少ないように感じたので、よく使うものを中心にちょっとまとめてみます。既存のWebサイトをHTML5化する時は、コンテンツ内に変更された・または廃止された要素がないか確認することも大切ですね！

↑私が10年以上利用している会計ソフト！

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

「ところで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の要素についてのさらに詳しい解説は以下のサイトを読んでみてください。