Freelance notes

HTML5で追加されたタグは?

投稿日:2020年1月10日 最終更新:2020年4月1日
カテゴリー:勉強 タグ:,

HTML5で追加されたタグが色々とありますが、その中でも基本的なものをいくつか取り上げたいと思います!

<header>タグ

その名前の通り、ヘッダー部分を囲む時に使い、囲んだ部分はヘッダーということが示されます。

20200109blog-img1

ちなみにタグとは違います!タグにはメタ情報やタイトルなどそのページに関する情報を入れていきます。

<footer>タグ

<header>タグがあれば<footer>タグもあります。
フッター部分を囲む時に使い、囲んだ部分はフッターとして示されます。

20200109blog-img2

<nav>タグ

<nav>タグはグローバルナビゲーションで使用します。
これまでは<div id=””globalnav””></div>などで囲んでいましたが<nav></nav>だけでグローバルナビであることが分かりますので良いですね!

20200109blog-img3

<article>タグ

<article>タグは記事を示すタグで、<article>タグで囲んだ部分は単体として扱います。
例えばこのサイトでは、ブログの記事一覧1つ1つにそれぞれ<article>タグを使用しています。

20200109blog-img4

このサイトでは1つの記事に1つの<article>タグを使用していますが、入れ子にしてもOKです!

<figure>タグ

<figure>タグは、画像や図表を示しますので、例えば<img />タグを囲む時などに使用します。

上記のタグは全てこのサイトでも使用しています。以下が全体のコードです(一部のコードは、見やすくするために除外しています)。

他にもまだまだたくさんの新たに追加されたタグがあります。逆に無くなったタグもありますので、使う使わないはともかく知るという意味でも、この際に色々と調べた方が良いですね!