とりあえず知りたいHTML5 9つの＜タグ＞

HTML5で追加されたタグの種類

こんにちは、デザイナーのkojiです。

今更こんな記事書いてどうするのかと、疑われてしまいそうですが、今回はHTML5で新たに追加されたタグについてご紹介したいと思います。

これは、タグで囲まれた要素を、一つの記事として認識するので、基本的には、そのページ内でのメインのものを囲うものです。

これは記事内の、一つの項目をひとかたまりとして考えるものです。

見出しが一つあって、その見出しの内容の記事があるとすれば、それをひとかたまりとして、囲うものであるという事になります。

  <section>
    <h2>デザイナーについて</h2>
    <p>デザイナーとはデザイン、いわゆる設計をする人のことを言います。</p>
  </section>

これは、その記事内の項目に関しての、補足情報を入れるものです。

例えば、上の例でいえば、デザイナーに関しての補足の情報を入れるものになります。

  <section>
    <h2>デザイナーについて</h2>
    <p>デザイナーとはデザイン、いわゆる設計をする人のことを言います。</p>
    <aside>
      この記事は2014年5月に投稿しました。
    </aside>
  </section>

これは、ナビゲーションをブラウザに分かりやすく伝える為にマークアップするもので、そのページ内でナビゲーションとして機能するものなどに、囲うものです。

これは、ブラウザにそのページのヘッダーに当たる部分がどこであるかを明確に伝えるためのもので、ヘッダーとして表示をするものを囲うものです。

これは上記と同じ意味で、こっちはフッターの部分を明確に伝えるものです。

これは、文書内の要素の一部、例えば時間に関するものを囲うものです。

実際、現場で使った事はほとんどないのですが、SEO的な効果が見込めるかは今後に期待といったところでしょうか。

<time datetime="1868-10-23">明治維新</time>

datetime属性を入れる事で、その出来事がいつ起きたのかを、明確にブラウザに伝えることが出来ます。

これは、Flashなどを使わずに、簡単に、ムービーファイルをhtml内に挿入できるものです。

これも上記と同じく、mp3などの音楽ファイルを、htmlに挿入できるものです。

いかがでしたでしょうか。

HTMLに限らず、WEBサイトの言語は日進月歩以上の勢いで加速しています。

今後はWebGLなどについても紹介していく予定です。

僕もまだ未熟なデザイナーですので、日々勉強、日々精進の毎日です。