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

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


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

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

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

HTML5で変更された要素

<a>要素

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

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

divp などのブロック要素全体を 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 自体がテーマを区切る役割があるので、 sectionsection の間に hr を入れる必要はありません。話が変わるけど見出しがつかない場合などに使えます。

<p>暖かな日差しが包みこむ公園のベンチで、私はマンガの<cite>Real</cite>を読み始めた。</p>
<hr>
<p>なんだか肌寒くなってきた。マンガを読むのに夢中になっていた私は気づかなかったが、どうやら2時間ほど経過していたようだ。</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で変更された要素いろいろ” への16件のフィードバック

  1. UKMO より:

    はじめまして!
    よく拝見させていただいています。

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

    これができるようになった時点でもう小さな幸せです。

    おしえていただきましてありがとうございました!

  2. 漣 風華 より:

    早速 拝見させていただきました。

    要素に意味を含ませると、よりコーディングがやりやすくなりますね。
    CSSでデザインなどをしっかり定義すれば、サイトに今以上に多様性・統一性を含ませる事が出来ますね!

    私は現在Pythonを使ってのWebアプリを個人で勉強しながら作成しているのですが、CSSもHTMLも当然重要です(なんせ全部一人でやってるので^^;)。

    私もHTML5についての勉強をしようと思います^^b

    //@renhuuka

  3. Anonymous より:

    見落としやすい HTML5 の新しい仕様…

    b 要素とか i 要素にセマンティックな定義が為されたのは知っていましたが、a 要素の仕様とかまで変わってるのは知らなかったです!<a name=””></a> とかいう書き方はやっぱりスマートじゃないなと思っていたんですよね。見落としがちなHTML5で変更された要素いろいろ…

  4. hogehoge より:

    s要素のsampleに、
    下記内容がありますが、
    このsample内容では、
    売切=「価格をドキュメントから削除」というのは違うのではないかと思うのですが?


    価格:400円
    売り切れました

    del要素はドキュメントから削除の他、訂正: 間違いだったという意味を含みます。

    上のsampleは「定価価格」で、間違いではないので、ここままでいいのではないでしょうか?

  5. […] 見落としがちなHTML5で変更された要素いろいろ | Webクリエイターボックス より詳しく解説。 […]

  6. Webクリエイターボックス より:

    価格自体の削除ではありませんね。サンプルに商品名を加えてみました。これだとこの商品自体が削除されているととれると思いますが、いかがでしょう?

  7. hogehoge より:

    あ、そうですね!商品名が加わるとdelですね。良いと思います!

  8. ヒロ より:

    なるほど!
    タイトル通り見落としていた自分が恥ずかしい。
    要素意味が変わったものは、特にありがたいです。
    いつもどおり、使ってしまいがちですよね。

  9. […] 見落としがちなHTML5で変更された要素いろいろ(Webクリエイターボックス) […]

  10. […] 見落としがちなHTML5で変更された要素いろいろ | Webクリエイターボックス. カテゴリー: 未分類   パーマリンク ← twittbot – 簡単にbotを作成 […]

  11. […] 見落としがちなHTML5で変更された要素いろいろ | Webクリエイター…icle> <h1>スティーブジョブズ氏、appleのceoを辞任 </h1> <p><b>病気療養中のappleのスティーブジョブズ氏がceoを辞任する。後継にはcooのティムクック氏が就任する見込みだ。</b></p>…はてなブックマークより […]

  12. […] 見落としがちなHTML5で変更された要素いろいろ | Webクリエイター…icle> <h1>スティーブジョブズ氏、appleのceoを辞任 </h1> <p><b>病気療養中のappleのスティーブジョブズ氏がceoを辞任する。後継にはcooのティムクック氏が就任する見込みだ。</b></p>…はてなブックマークより […]

  13. シマダ より:

    address要素については、その内容モデルも注目に値します。

    http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-address-element
    > Content model:
    > Flow content, but with no heading content descendants, no sectioning content descendants, and no header, footer, or address element descendants.

    Flow contentにはHTML 4でいうブロックレベル要素が含まれていますから、address要素も内容としてブロックレベル要素を持てるようになったわけです。

    HTML5での妥当なマークアップの一例です:

    <address>
    <dl>
    <dt>著者</dt>
    <dd><a href=”mailto:john@example.com”>John Doe</a></dd>
    <dt>訳者</dt>
    <dd><a href=”mailto:taro@example.com”>山田太郎</a></dd>
    </dl>
    </address>

  14. […] 見落としがちなHTML5で変更された要素いろいろ | Webクリエイター…icle> <h1>スティーブジョブズ氏、appleのceoを辞任 </h1> <p><b>病気療養中のappleのスティーブジョブズ氏がceoを辞任する。後継にはcooのティムクック氏が就任する見込みだ。</b></p>…はてなブックマークより […]

  15. […] 見落としがちなHTML5で変更された要素いろいろ記事元のサイト:Webクリエイターボックス このサイトはJavaScriptがオンになっていないと正常に表示されません見落としがちなHTML5で変更された要素いろいろ2011年09月06日HTML5,Webサイト制作HTML5を勉強していて、section,nav,header,footerなどの新しく追加された要素について説明している記事はよく見かけるのですが、HTML5で変更された要素について触れている記事が少ないように感じたので、よく使うものを中心にちょっとまとめてみます。既存のWebサイトをHTML5化する時は、コンテンツ内に変更された・または廃止された要素がないか確認することも大切ですね!HTML5の基本はここからお勉強!「ところでHTML5ってなに?」という方は、まずは以下の記事を読んでみてください。このようにHTML5の基本について解説している記事はたくさんあるので、詳しい説明は今回は端折らせて頂きます。変更点のみに焦点を当てますよ!Webの3つの問題を解決する「HTML5」とは何なのかHTML4から変化したHTML5のマークアップここが違う!サンプルで見るHTML5XHTML1.0とHTML5の違いをスタバのペー …続きを読む […]

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)