ブログBLOG

Tips

2019.08.02

author:アツミWEBデザイナー

今一度復習したい!html5で追加になった要素 part1

今一度復習したい!html5で追加になった要素 part1

こんにちは。html4の時代からhtmlにお世話になっているデザイナーのアツミです。

htmlを勉強をし始めた時は勿論html4で、何かと<div>や<p>で囲いまくるということをしていたと思います。
しかしhtml5が登場してより文書構造をブラウザや検索エンジンに伝えられるようになり、何でも<div>や<p>で囲う時代は終わりました。

ただ、都合上コーディングにあまり携わらない時期もあり、気づけばhtml5から追加になった要素について知らないことも多いなと感じるこの頃です。(こんなタグあったのか…と未だに知ることがある)

そこで今一度、html5から追加になったタグを復習してみたいと思います。

html5から追加になったタグとは

文書構造に関わるタグ

  • section
  • article
  • main
  • aside
  • header
  • footer
  • nav
  • figure
  • figcaption

その他のタグ

  • video
  • audio
  • track
  • embed
  • mark
  • progress
  • meter
  • time
  • data
  • dialog
  • ruby、rt、rp
  • bdi
  • wbr
  • canvas
  • details
  • summary
  • datalist
  • output

※HTML5の仕様から削除された<hgroup><keygen>は省かせていただいています

ざっと見てみても「何なんだこのタグ…」というのが結構あります(笑)

文書構造に関わるタグ

では、いくつかタグの意味について見ていきたいと思います。

section

<section>~</section>で囲まれたところが一つのセクション(コンテンツの一区分)であることを示す際に使用します。
必須ではありませんが、見出し要素(h1やh2等)が入っていることが推奨されているようです。
ただのレイアウト目的で要素をくくる場合は、<section>ではなく、<div>を使用するのが良さそうです。

article

<article>~</article>で囲まれたところが、単体で完結するセクションであることを示す際に使用します。
例えば、ブログや掲示板等の投稿記事やコメント、雑誌や新聞等のニュース記事等です。
こちらも、必須ではありませんが、見出し要素が入っていることが推奨されているようです。
article要素を入れ子にすることで、親記事の中の子記事、記事に対するユーザーからのコメント等も示すこともできます。
また、article要素内でaddress要素を使用すると、その記事の著者を示すことができます。(ただし、直近祖先のarticle要素に紐づくことになる)

main

<main>~</main>で囲まれたところが、文書のメインコンテンツであることを示すことができます。
main要素の内容には、その文書で固有かつ主要な内容を配置します。各ページで共通使用されるナビゲーションやロゴ、コピーライト等はこの要素内に含めるべきではないものになります。
文書内で1つのみの配置とされていたようですが、HTML 5.1で個数制限はなくなったようです。(ただ、メインコンテンツが2つ以上あるというのはどういった時なのか、あまりイメージが湧きません…)

aside

<aside>~</aside>で囲まれたところが、メインコンテンツから分離された、補足的なコンテンツであることを示すことができます。(仮にそのコンテンツを取り除いたとしても、メインコンテンツには影響が出ないようなもの)
例えば、補足情報(本文を補足する記事や情報)、余談(本筋から外れた雑談・豆知識)、またサイドバーや広告エリアなどとのこと。
個人的にはサイドバーで使うイメージが強かったのですが、必ずしもそれだけでの使用ということではないんですね。

最後に

今回は既に当たり前のように使っているタグの意味、使い方を復習してみましたが、それでも「今頃知った…」という点がいくつかありました。htmlもしっかり復習しなきゃなと、改めて感じさせられました…。
引き続き、文書構造に関わるタグについて書いてみたいと思います。

今一度復習したい!html5で追加になった要素 part2

参考サイト

RECENT POSTS