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