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

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

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

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

<section></section>

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

例)

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

<article></article>

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

例)

<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>を使用する。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS