ウェブ、ショウジン

HTML5で変わること、代表的な新要素とか:自分用超ざっくりまとめ

2011-10-25
Category
HTML5

これからHTML5、CSS3を使ってPC向け、スマートフォン向けサイト等を制作していくにあたって、とりあえず「何が増えて、それらをどう使って、以前のなにはダメで」とかいうあたりを自分に向けてまとめたもの。
(セマンティックとか、これまで知ったかぶりしてフンフン聞いてましたが、今回やっと理解しました)

セマンティックス

文書の各部に対して「意味」を与えること。文書に対してデータとしての意味を付与することをいう。らしい。(人間と違ってコンピュータには、それをわかりやすく明示してやる必要がある)

セマンティックなマークアップを行うと、作成者が文書構造を理解しやすくなるだけでなく、「コンピュータにとっても扱いやすい」データになる。それは、検索ロボットのような「HTML文書を解析するプログラム」が「より正確に情報を取り出せる」ようになることを意味する。HTML5ではセマンティックスへの対応が強化され、そのために新しい要素が多く追加されている。

XHTMLやこれまでのHTMLとの違い

終了タグが存在しない要素はそのままでよい

例:img要素、hr要素(でも、/ をつけても大丈夫)

IE8以下に向けた処理が必要

新要素に対応していないのでライブラリ等を使って対応。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

同一ページ内に複数のh1があってもよい

これは完全に誤解していて、これまでのHTML4.01やXHTML1.0でも同一ページにおいて複数マークアップしても問題はなかったらしい。ただ、1ページ=1テーマがSEOに有利とか、そのへんの事情から「h1要素は1ページにひとつだけ」が主流、常識になっていた模様。

a要素内にブロック要素を包含できるようになった

<a href="/">
	<img src="logo.png" alt="サイト名" width="100" height="20">
	<p>これは◯◯なサイトです。</p>
</a>

アンカーにa要素を使ってはいけない

ページの特定の位置にアンカー(#pagetop)で飛ばす場合a要素ではなく、id属性を使う。

<a href="#pagetop">ページ先頭へ</>
…
<h1 id="pagetop">ここにジャンプ</h1>

type属性は省略可能(text/cssやtext/javascript等)

<link rel="stylesheet" type="text/css" href="/common.css">
↓
<link rel="stylesheet" href="/common.css">

address要素

直近の親要素(bodyやarticle等)に対する「連絡先情報」に使う。
直近の親要素がbodyであれば、address要素でマークアップされたものは「そのサイト全体=Webサイト管理者」への連絡先となる。また、連絡先ではない情報(更新日時やコピーライト等)には使えない。

使い分けの例

<article>
	<header>
		<h1>記事のタイトル</h1>
		<p><time>2011.10.25</time></p>
	</header>
	<p>記事の内容。</p>
	<footer>
		<address>この記事の執筆者への<a href="mailto:author1@showzine.info">問い合わせ先</a></address>
	</footer>
</article>

<footer>
	<address>このサイトへの<a href="mailto:webmaster@showzine.info">お問い合わせはこちら</a></address>
	<p><small>&copy; copyright コピーライト</small></p>
</footer>

b要素(これまでのようにボールド=太字ではない)

文書の概要におけるきーわーど、レビュー内の製品名やリード文等、「他の文章と区別したいテキスト」に使う。重要さや強調といった意味は持たない。

cite要素

作品のタイトルに使う。本やら新聞やら楽譜やら脚本やら映画やら絵画や演劇やらやら。

<p>昨夜は噂の<cite>ミレニアム</cite>をイッキ読みして寝不足だ。</p>

hr要素

これまでのように罫線を引く役割ではなく、段落レベルでの「テーマの変わり目=区切り」を表す役割に。sectionやarticle自体にテーマを区切る役割があるのでこれらの間にhrを入れる必要はない。「話題は変わるけれどとくに見出しはつかない」といった場合に使える。同一段落(p要素内)において話が変わる区切りとか。

i要素(もう斜体ではない)

声とか雰囲気など、通常の文章とは区別したい範囲に使う。専門用語、他言語での慣用句、考え、船舶名表記とか。強調という意味は持たない。*実際、どういう場合に使うのかいまのところイメージできないけど。

s要素(もう打ち消し線ではない)

正しくなくなった(過去の古い情報)とかに使う、らしい。削除された内容にはdel要素を使う。

<p><s>サンプル商品:価格 300円</s></p>
<p>サンプル商品A:価格 250円</p>

<p><del>サンプル商品B:価格 1,000円</del></p>
<p>この商品は売り切れました。</p>

small要素(もう小さい文字ではない)

免責事項、警告、法的制約、著作権表記などに使う。フッター部のコピーライト表記に使うとか。

<p><small>&copy; copyright コピーライト</small></p>

strong

文章の重要度を意味する。入れ子にして重要度の高さに順位をつけることもできる。

<p>
	<strong>注意すべき点は<strong>この部分やより重要である</strong>ということです。</strong>
</p>

u要素(もう下線じゃない)

中国語における固有名詞とか、スペルミスのある単語を指示するのに使うらしいけれど、ほとんどの場合、他の要素を使ったほうがよいらしい。(???)てことは、ほとんど実用性ないのではないかと。
参考記事:u 要素 – テキストレベルの意味づけ – HTML要素 – HTML5 タグリファレンス – HTML5.JP

HTML5では使えない要素群

  1. basefont
  2. big
  3. center
  4. strike
  5. tt
  6. frame
  7. frameset
  8. noframes
  9. acronym
  10. applet
  11. isindex
  12. dir

HTML5の新要素 – 主なもの

header要素

一般的に「ヘッダー」と呼ばれる部分、ページやセクションの導入部分にあたる「見出し」や「ナビゲーションリンク」をグループ化するのに使用する。分かりやすくいうと、これまで「div id=”header”」のようにマークアップしていた部分に使うイメージ。

<header id="gheader">
	<h1>ページの大見出し</h1>
	<nav id="gnavi">…</nav>
</header>
<section>
	<header class="entry">
		<h1>記事タイトル</h1>
		<p>記事の概要</p>
	</header>
</section>

nav要素

ページ内の「主要なナビゲーションリンク」をマークアップするのに使用。
グローバルナビ、パンくずリスト、前のページへ、次のページへ(ページネーション)等。
*ページ内全てのリンクに対して過剰にnav要素でマークアップする必要はない。
*「主要」であることが大事なので、ヘッダとフッタ両方に同じナビゲーションがあるような場合はヘッダのほうにだけnavを使ってマークアップ。

<h1>サイトのタイトル</h1>
<nav id="gnavi">
	<ul>
		<li><a href="#">ホーム</a></li>
		<li><a href="#">ニュース</a></li>
		<li><a href="#">このサイトについて</a></li>
		<li><a href="#">お問い合わせ</a></li>
	</ul>
</nav>

section要素

章や節の単位(セクション)をマークアップするのに使用。
div(意味はないただのブロック要素)を置換するものではない。
見出しと本文で構成され、見出しは必須。
見出しがないただの文章のまとまりに対してはdivを使用。

<section>
	<h1>このセクションの見出し</h1>
	<p>section要素には必ず見出しがある。</p>
	<p>見出しがないまとまりの場合はdivを使用。</p>
</section>

article要素

それ自身が独立した自己完結のコンテンツであることを示す。
例:ブログのエントリー(記事)、エントリーへの各コメント等。
*Feed配信する内容に相応しいものであればarticleという判断でよい。
(そうでなければsection要素を使用)

<article>
	<h1>記事のタイトル</h1>
	<p>記事の内容。</p>
	<section>
		<h2>章のタイトル</h2>
		<p>章の本文</p>
	</section>
	<section>
		<h2>記事のまとめ</h2>
		<p>まとめの本文</p>
	</section>
</article>

aside要素

ページ内の主要なコンテンツから切り離すことができるコンテンツである場合に使用。このコンテンツがなくてもこのページは成り立つというような場合。(そのページにおけるおまけ、付加的なレベルのまとまりに対して使う)また、メインコンテンツの中で使うか、外で使うかによって意味が変わってくる。
◯article要素の中で使う場合(メインコンテンツの中で使う)
補足記事やブログの各エントリーに対する各コメント(articleでマークアップするほど重要でない場合)等が該当。
◯メインコンテンツの外で使う場合
サイトやページ全体に関連性があることを示し、エクストラを包含するサイドバーや広告ブロックに使用。

footer要素

一般的に「フッター」と呼ばれる、ページやセクションの最後に配置されるような「ドキュメントの関連情報や著作権情報」などをグループ化するのに使用。分かりやすくいうと、これまで「div id=”footer”」としてマークアップしていた部分に相当。

<footer class="entry">
	<nav>
		<h3>この記事に関連する記事へのリンク</h3>
		<ul>
			<li><a href="">関連記事A</a></li>
			<li><a href="">関連記事B</a></li>
			<li><a href="">関連記事C</a></li>
		</ul>
	</nav>
</footer>

figure要素

挿絵、図表とそのキャプション(figcaption要素、なんてものもあるそう。不要であれば省略可)をマークアップするのに使用。figcaption要素を使う場合はfigure要素の子要素である必要があり、なおかつその中で一番始めか最後に置く必要がある。

<figure class="chart">
	<img src="img/chart.png">
	<figcaption>表</figcaption>
</figure>

参考記事&書籍:
見落としがちなHTML5で変更された要素いろいろ
HTML5についてのおさらい
HTML5+CSS3で作る 魅せるiPhoneサイト

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿