はじめてのHTML5 第4回『HTML5の新要素概要を学ぶ～基礎編』

HTML5の新要素一覧

HTML5を勉強し始めて4日目になりましたが、今回は新たに追加された新要素についてまとめてみようと思います。

一日で全部は無理だと思うので、主に使うであろう要素をピックアップしました。

canvas要素やvideo要素については、それぞれピックアップした記事を書きたいと思いますので、無理はせず基本をしっかり理解していこうと思います。

section要素

文章などの一般的なセクションを表します。
h1-h6とそれに付随するコンテンツをグループ化し、文章構造を示す要素になるそうです。

<section>
	<h1>見出し</h1>
	<p>テキストテキストテキストテキストテキストテキスト</p> 
		<h2>小見出し</h2>
		<p>テキストテキストテキストテキストテキストテキスト</p> 
		<p>テキストテキストテキストテキストテキストテキスト</p> 
　　　　　　　・
　　　　　　　・
　　　　　　　・
</section>

article要素

ブログエントリや新聞記事など、単独で成り立つ内容を持った場合に使用します。

<section>
	<h1>見出し</h1>
	<article>
		<h1>記事見出し</h1>
		<p>テキストテキストテキストテキストテキストテキスト</p> 
　　　　　　　　・
　　　　　　　　・
	</article>
	<article>
		<h1>記事見出し</h1>
		<p>テキストテキストテキストテキストテキストテキスト</p>  
　　　　　　　　・
　　　　　　　　・
	</article>
　　　　　　　・
　　　　　　　・
　　　　　　　・
</section>

aside要素

aside要素は、補足記事・情報などの本文とは関連しているが、その部分を削除してもコンテンツとして成り立つようなものに使うべきみたいです。

この要素は、いろいろな方の記事を読んでいると分かった気にもなりますが、実際に自分が使うとなると、少し難しいような気がします・・・。勉強しつつより深く理解していきたいです。

<article>
    <h1>サッカー日本代表</h1>
    <p>アジアカップ優勝記事テキストテキストテキストテキストテキスト</p>
    <aside>
　　　　<h1>アジアカップとは</h1>
　　　　<p>アジアカップ解説テキストテキストテキストテキストテキスト</p>
   </aside>
 </article>

hgroup要素

見出しをグループ化するために使います。
尚、h1～h6要素だけでマークアップしなければならないようです。

<section>
	<hgourp>
		<h1>タイトル</h1>
		<h2>サブタイトル</h2>
	</hgourp>
	<p>テキストテキストテキストテキストテキストテキスト</p> 
　　　　　　　・
　　　　　　　・
　　　　　　　・
</section>

header要素

セクションのヘッダーにあたるセクションを表します。

<section>
	<header>
		<hgourp>
			<h1>タイトル</h1>
			<h2>サブタイトル</h2>
		</hgourp>
	</header>
	<p>テキストテキストテキストテキストテキストテキスト</p> 
　　　　　　　・
　　　　　　　・
　　　　　　　・
</section>

footer要素

セクションのフッター、ページのフッターをマークアップする場合に使用します。

<body>
	<header>
		<hgourp>
			<h1>タイトル</h1>
			<h2>サブタイトル</h2>
		</hgourp>
	</header>
　　　　　　　・
　　　　　　　・
	<article>
		<header>
			<h1>記事タイトル</h1>
		</header>
		<p>記事テキストテキストテキストテキストテキストテキスト</p>
　　　　　　　　　　・
　　　　　　　　　　・
		<footer>
			<p>Posted by HTML5memo</p>
		</footer>
	</article>
　　　　　　　・
　　　　　　　・
	<footer>
		<p><small>Copyright HTML5でサイトをつくろう</small></p>
	</footer>
</body>

nav要素

ナビゲーションであることを示す場合に使用します。

主要なナビゲーションにnav要素は使うみたいで、ページのフッターにあるナビゲーションには、あまり使用しないようです。

<section>
	<header>
		<hgourp>
			<h1>タイトル</h1>
			<h2>サブタイトル</h2>
		</hgourp>
		<nav>
			<ul>
				<li><a href="#">ホーム</a></li>
				<li><a href="#">オススメ商品</a></li>
				<li><a href="#">商品一覧</a></li>
				<li><a href="#">お問い合わせ</a></li>
			</ul>
		</nav>
	</header>
	・
	・
	・
</section>

figure要素&figcaption要素

figure要素は、イメージ画像・イラスト・ビデオなどの、メインコンテンツから参照されるものに使用します。また、キャプションや説明はfigcaption要素を使用します。

<p>サッカーは、1チームは基本11人。少なくとも7人以上いれば試合ができる。</p>
<figure id="kaeru">
	<img src="../images/succer.jpg" alt="サッカー写真">
	<figcaption>サッカーの試合風景</figcaption>
</figure>
<p>足を使うことが基本であるが、手と腕以外の部分であれば使って良い。</p>

最後に

HTML5でサイトを構築していくうえで、おそらく基本になってくる要素をピックアップして勉強してきましたが、慣れない要素が多く難しいですね・・・完璧に理解できるようにこれからもがんばろう思います。

ただ昨日よりはサイト構築に一歩前進した気がして嬉しいです！

まだまだ覚えること沢山ありますが、これからも続けていきますのでどうぞよろしくお願いします。

参考サイト：

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

まずはここから始めよう！作業効率を早めるPhotoshopとIllustratorのショートカットまとめ（ファイル操作・コピペ・ズーム関連）

Instagram（インスタグラム）の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。

アプリ風インターフェイスのフォトギャラリーをCSS3で作成する【jQuery連載17】

マウスホイールに動きで横にスクロールの横長ページを作成する【jQuery連載16】

この記事に関連する記事