part1こんにちは。html4の時代からhtmlにお世話になっているデザイナーのアツミです。htmlを勉強をし始めた時は勿論html4で、何かと<div>や<p>で囲いまくるということをしていたと思います。html5が登場してより文書構造をブラウザや検索エンジンに伝えられるようになり、何でも<div>や<p>で囲う時代は終わりました。都合上コーディングにあまり携わらない時期もあり、気づけばhtml5から追加になった要素について知らないことも多いなと感じるこの頃です。(こんなタグあったのか...と未だに知ることがある)そこで今一度、html5から追加になったタグを復習してみたいと思います。目次html5から追加になったタグとは文書構造に関わるタグsectionarticlemainaside最後にhtml5から追加になったタグとは文書構造に関わるタグsectionarticlemainasideheaderfooternavfigurefigcaptionその他のタグvideoaudiopicturesourcetrackembedmarkruby、rt、rpbdiwbrprogressmetertimedatadialogcanvasdetailssummarydatalistoutput※HTML5の仕様から削除された<hgroup><keygen>は省かせていただいていますざっと見てみても「何なんだこのタグ...」というのが結構あります(笑)文書構造に関わるタグでは、いくつかタグの意味について見ていきたいと思います。section<section>~</section>で囲まれたところが一つのセクション(コンテンツの一区分)であることを示す際に使用します。必須ではありませんが、見出し要素(h1やh2等)が入っていることが推奨されているようです。ただのレイアウト目的で要素をくくる場合は、<section>ではなく、<div>を使用するのが良さそうです。article<article>~</article>で囲まれたところが、単体で完結するセクションであることを示す際に使用します。ブログや掲示板等の投稿記事やコメント、雑誌や新聞等のニュース記事等です。こちらも、必須ではありませんが、見出し要素が入っていることが推奨されているようです。article要素を入れ子にすることで、親記事の中の子記事、記事に対するユーザーからのコメント等も示すこともできます。article要素内でaddress要素を使用すると、その記事の著者を示すことができます。(ただし、直近祖先のarticle要素に紐づくことになる)main<main>~</main>で囲まれたところが、文書のメインコンテンツであることを示すことができます。main要素の内容には、その文書で固有かつ主要な内容を配置します。各ページで共通使用されるナビゲーションやロゴ、コピーライト等はこの要素内に含めるべきではないものになります。5.1で個数制限はなくなったようです。(ただ、メインコンテンツが2つ以上あるというのはどういった時なのか、あまりイメージが湧きません...)aside<aside>~</aside>で囲まれたところが、メインコンテンツから分離された、補足的なコンテンツであることを示すことができます。(仮にそのコンテンツを取り除いたとしても、メインコンテンツには影響が出ないようなもの)例えば、補足情報(本文を補足する記事や情報)、余談(本筋から外れた雑談・豆知識)、またサイドバーや広告エリアなどとのこと。個人的にはサイドバーで使うイメージが強かったのですが、必ずしもそれだけでの使用ということではないんですね。最後に今回は既に当たり前のように使っているタグの意味、使い方を復習してみましたが、それでも「今頃知った...」という点がいくつかありました。htmlもしっかり復習しなきゃなと、改めて感じさせられました...。引き続き、文書構造に関わるタグについて書いてみたいと思います。