デザイナーの「モチ」と申します。
今回は『初心者がHTML5を効率的に勉強する為の3つの手順』の第二回目、「HTML5で使われるタグとその意味を覚える」をやっていこうと思います。( 前回の記事は こちら )

HTML5とHTML4の違いを簡単に言うと、
今まで複雑だった処理が簡単に出来て、HTMLをより構造的にスッキリ書けることです。
(少し乱暴な言い方ですが…)

動画や音声・グラフィックの描画が可能になり、タグの定義が見直され、文書の構造を表現するタグが追加されました。今回は「文書の構造を表現するタグ」と「動画や音声・グラフィックに関するタグ」、「ページ構成でよく使用するタグ」についてご紹介します。

(1)文書の構造を表現するタグ

• <header></header>
    本文のうち、導入部やナビゲーションをまとめるタグ。
• <nav></nav>
    ナビゲーションであることを示すタグ。
    主要なナビゲーションとなるセクションのみを示すのに適しています。
• <footer></footer>
    直近のセクションのフッタであることを示すタグ。
    主に関連文書へのリンク、著作権などの情報が含まれます。
• <section></section>
    一つのセクションであることを示すタグ。
    セクションは、文書やアプリケーションの一部分となる、意味や機能のひとまとまりのこと。
• <article></article>
    内容が単体で完結するセクションであることを示すタグ。

(2)動画や音声・グラフィックに関するタグ

• <video></video>
    動画ファイルを再生することができるタグ。
• <audio></audio>
    音声ファイルを再生することができるタグ。
• <canvas></canvas>
    グラフやゲームのグラフィックといった図形を動的に描くことができるタグ。

(3)ページ構成でよく使用するタグ

• <div></div>
    囲んだ範囲をひとかたまりとして扱う、箱のようなタグ。
    このタグ自身には特に意味を持っていません。
• <table></table>
    テーブル（表）を作成するタグ。
• <tr></tr>
    「<table></table>」内に表の横一行を定義するタグ。
• <th></th>
    「<tr></tr>」内に｢見出し｣となるヘッダセルを作成するタグ。
• <td></td>
    「<tr></tr>」内に内容が｢データ｣となるデータセルを作成
• <p></p>
    囲まれた部分がひとつの段落であることを表すタグ。

タグは他にもたくさんありますが、HPを作る上でよく使用するタグはこのくらいだと思います。
HTML5の特徴としてフォーム周りの機能も強化されていますが、こちらは別の機会にご紹介したいと思います。

次回は、「第一回 基本的なHTMLの構造を知る」の回で作成したHTMLファイルと今回のタグを使ってHTMLのマークアップを行ってみたいと思います。