デザイナーの「モチ」と申します。
今回は『初心者が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のマークアップを行ってみたいと思います。

関連記事

投稿者

モチ

モチ
トレンディで「デザイナー」を務めています。 デザイン関係の情報を書いていこうと思います。 
ページ上部へ戻る