HTML5で追加されたタグと意味が変わったタグについて

Posted
2012-05-31

このブログをHTML5で書き換えました。今回勉強した新しく追加されたタグと意味が変わったタグについてまとめてみました。

ブログの構造部分は(X)HTML5 validationにかけてみて問題なさそうでしたが、タグの使いどころがあっているか少し心配です。sectionタグとarticleタグの使い方がまだ理解しきれていない感じです。何度か書いてみないとよく分からないと思うのでどんどんHTML5を使ってみようと思います。

HTML5で追加されたマークアップのタグ色々

<section></section>

見出しを伴う章や節のまとまりとなる部分。必ず<h1>〜<h6>のいずれかの見出しが入る。
コンテナ要素ではないので、<div>の代わりという訳ではない。レイアウトの為に必要な場合は<div>を使う。

参考：section 要素 – セクション – HTML要素 – HTML5 タグリファレンス – HTML5.JP

例）

<section id="author">
　　<h1>Authorについて</h1>
　　　<p>本文本文本文…</p>
</section><!--author-->

<article></article>

ブログのウィジェット・ガジェット、ブログ記事など自己完結する文書の部分。コンテンツとして独立している。sectionとarticleはどちらを先に書くか等の決まりはなく場合により変わる。

参考：article 要素 – セクション – HTML要素 – HTML5 タグリファレンス – HTML5.JP

例）

<article class="post">
	<header class="posttitle">
		：
	</header><!-- posttitle -->
			<div>
 				<p>（ブログ記事本文）</p>
  			</div>
</article><!--post-->

articleとsectionの用途のちがいは”第4回　HTML5で新しく定義された新要素「section要素」の使い方の基本をまとめよう – MdN Design Interactive”と”第5回目　HTML5で新しく定義された新要素「article要素」の使い方の基本をまとめよう – MdN Design Interactive”の記事がとても分かりやすかったです。

<hgroup></hgroup> hgroup は廃止予定になりました！

2013/04/17追記

hgroup 要素が HTML5 勧告候補から削除される | WWW WATCH

見出しと副題やキャッチフレーズをグループ化する。
hgroupでグループ化する場合、キャッチフレーズはh2でマークアップする。
キャッチフレーズを見出しとしてマークアップしない場合にはhgroupタグは使用しない。

例）

<hgroup id="title">
	<h1><a href="http://orientalpage.heteml.net/memocarilog"><img src="images/titlelogo.png" alt="memocarilog" /></a></h1>
	<h2>Web制作関連やiPhone、Macのメモ</h2>
</hgroup>

<nav></nav>

主要なナビゲーション（グローバルナビゲーション等）を示す。すべてのナビゲーションには使う必要はない。フッターにおく利用条件やナビゲーションには使用しない。

例）

<nav>
	<ul id="globalnavi">
		<li><a href="http://orientalpage.heteml.net/memocarilog">Home</a></li>
		<li><a href="https://memocarilog.info/about-site">About site</a></li>
		<li"><a href="https://memocarilog.info/contact">Contact</a></li>
	</ul>
</nav>

<header></header>

セクションの見出しを含み、目次や検索フォームなどをグループ化する。
<div id=”header”></div>の代わりになるタグ。
ページ内に複数使用できる。

例）

<header id="header">
	<nav>
		<ul id="globalnavi">
			：
		</ul>
	</nav>
	<hgroup id="title">
		：
	</hgroup>
	<ul id="categorynavi">
		：
	</ul>
</header>

<footer></footer>

セクションのフッターの部分に使用する。著作権表記などを入れる。
<div id=”footer”></div>の代わりになるタグ。
ページ内に複数使用できる。

例）

<footer id="footer">
	<section id="author">
			：
	</section><!--author-->
		<div class="copyright">
			<p>Design by memocarilog</p>
			<small>Copyright&copy;2011 memocarilog.All Right Reserved</small>
		</div>
</footer><!-- footer -->

<aside></aside>

メインのコンテンツとは関係のないコンテンツの部分を示す。広告やリンク集などのマークアップに使用する。

※メインコンテンツの中で使う場合と、外で使う場合で意味が変わってくる。参照：『aside要素』 / HTML5新要素一覧　 | HTML5でサイトをつくろう

例）

<aside class="adsence1">
	<h1 class="widgettitle">Adsence</h1>
		<div>
		　：
		</div>
</aside>

<time></time>

日付や時間を示す。ブログの投稿日時等。

例）

<div class="date">
		<time datetime="2012-04-16">2012年4月16日</time>
		<p>Category: …</p>
</div><!-- fin_date -->

<mark></mark>

参照の目的でハイライトされたテキストを示す。

例）
mark要素はテキストをハイライトする意味で使用します。

<figure></figure>

自己完結する写真や図、コードリストでメインのコンテンツから参照されるものを示す。

<abbr></abbr>

略語を示す。abbrタグを使用する場合は必ず　title 属性で正式名称を入れる必要がある。

その他の新要素や詳しいリファレンスはこちらのページを参照：”HTML 要素 – HTML5タグリファレンス – HTML5.JP”

HTML5で意味が変更になったタグ色々

<h1>

sectionやarticle事にh1でタイトル部分をマークアップするので、1ページにh1が多数使われる。
（意味が変わった訳ではない）

<a>

ブロック要素を囲って使用できる。複数の要素を囲う事ができる。

アンカーとして使用しなくなった。
アンカーはid指定があれば飛べる様になった。

<address>

コピーライトのマークアップには使用しなくなった。

<b>

太文字という意味ではなくなった。
他と区別したい文字に使用。<span>のような存在。

<dl>

定義リストではなく、記述リストとして使用する。
定義リストとして使用する場合は”<dfn></dfn>”で囲う必要がある

<small>

小さい文字の意味ではなくなった。免責事項や著作権表記のマークアップに使用する。

<strong>

強調の意味ではなくなった。重要性を表すテキストの範囲を囲う。
強調したい場合は<em>を使用する。

HTML5 の新要素を使うための準備

Google web font を使ってみた

memocarilog