HTML5新要素について

Html

html5でのコーディングの機会が増え、だんだん慣れてきてはいるのですが細かい部分でのマークアップにまだ悩んでしまうことがあるので、確認しておきたいタグをまとめてみようかと思います。

header要素

header要素はイントロダクション、ナビゲーションを支援するヘッダー部分を表す時に使用するグループ。headタグとは全くの別物なので要注意。

特徴

  • headerタグは見出しタグ(h1~h6)を内包するが、必須とは限らない。
  • headerタグはサイト内で複数使用できるが、一般的ではない。
  • headerタグはタイトルやロゴ、ナビゲーション、検索ボックス等を内包するのが典型的な使用例
  • headerタグはセクションのヘッダーとして使用できる。
  • header要素はセクショニング・コンテンツではないため、アウトラインには現れない。
  • header要素内にheader要素、footer要素を使うことは出来ない。

例えばこれまでは

HTML

<div id="header">見出しです
<p>headerタグに見出しタグは必須ではない</p>
</div>

とマークアップしていたものが、

HTML

<header>
<h1>見出しです</h1> headerタグに見出しタグは必須ではない </header>

上記のようにわかりやすく書き換えることができる。

headerタグに見出しタグは必須とは限らない

headerタグは見出しタグを内包することができるが、無理に使う必要性はない。

HTML

<header>
<h1>見出し タグ</h1>←無くてもOK
<p>header タグに見出し タグは必須ではない</p>
</header>

↑でOK

headerタグはサイト内で複数使用できる

headerタグはサイト内で複数使うことができるため、下記のように書くことも可能。
ただしあまり一般的ではなく、ページのヘッダー部分として1回使われるだけが多い。

HTML

<header>
<h1>ページ タイトル</h1>
<nav>グローバル ナビゲーション</nav>
</header>
<article>
<header>
<h2>記事タイトル</h2>
</header>
<section>
<header>
<h3>セクションの見出し</h3>
</header>
</section>
</article>

headerタグは基本的にヘッダーに対して使用する

headerタグは基本的にページ全体のヘッダーに対して使用する。
その際、タイトルやロゴ、ナビゲーション、検索ボックスなどを囲むのが典型的な用途。

HTML

<header>
<h1>ページ タイトル</h1>
<nav>ナビゲーション</nav>
</header>

headerタグはセクションのヘッダーとしても使用可能

headerタグは、ページ全体のヘッダーだけでなく、下記のようにセクショニング・コンテンツのヘッダーとしても使用できる。
ただし、あまり一般的ではない。

HTML

<article>
<header>
<h2>記事 タイトル</h2>
</header>
<section>
<header>
<h3>セクションの見出し</h3>
</header>
</section>
</article>

参考ページ(https://ferret-plus.com/3421

nav要素

navタグはページ内の主要なナビゲーションのセクションを表す。
主にグローバルナビゲーションやサイドバー内のカテゴリーの一覧のようなリンクブロック、あるいはページ内で各セクションに移動するためのリンク等に当たる。

<footer>等で見かける利用規約やトップページへのリンクのナビゲーションには<nav>要素を使用する必要がない。
主要なナビゲーションにのみ使用すると覚えておくこと。
参考ページ(https://dekiru.net/article/12871/)、(http://uxmilk.jp/41438

aside要素

仕様書では

aside要素は、aside要素の周りにコンテンツとわずかに関連し、かつそのコンテンツから分離すると見なすことができるコンテンツで構成されるページのセクションを表す。このようなセクションは、しばしば活版印刷でサイドバーとして表示される。

と書かれている。

サイドバーを表す要素として誤解され、仕様書にも「しばしばサイドバーとして表示される」と書かれているが、この場合のsidebarというのは新聞などの印刷物における「補足記事」のこと。
Webページの中での「サイドバー」とは違うものを指している(恐らく)。

なのでaside 要素は「まわりのコンテンツ(親セクション)とあまり関連性がなくてそこまで重要ではないが、少し関係している補足的な」コンテンツに対して利用することが可能。

わかりづらい例

「まわりのコンテンツ」というのが大切で、上記ではarticle要素の補足として表示しておきたいコンテンツをasideで囲い、関連付けることができる。
また、articleの外の広告のasideは、そのまわりのコンテンツ(親要素=body=ページ全体)と関連しているが、重要ではないコンテンツとして使用している。

asideが使用できる例

具体的には以下の例でasideが使用できると考える。

サイドバー

ブログにおいて大抵の場合、サイドバーはそれほど重要でなくやや関連性があるコンテンツかと思われるので、その場合aside要素でサイドバー全体を囲える。ただし、aside要素をスタイリングのためだけに使用するべきではない。

また、サイドバー内にページと関連性のないコンテンツが含まれてしまう場合は全体をasideで囲うのではなく、関連性があるコンテンツのみに使用するのが望ましい。

関連記事

ブログの下部によくある「関連記事・他の記事」のようなコンテンツはasideで囲むことが可能。

広告

広告もasideで問題ないと思われる。ただ、ページの内容と関係のない広告などは不適格。

コラム

article内に適したaside要素としては、補足のコンテンツ(コラム)が挙げられる。

asideの意味は?
asideは英訳すると「余談」、「雑談」という意味です。


↑上記はこの記事において補足のコンテンツなのでasideで囲むことができる。
ほかに記事本文における補足のコンテンツ、「用語の解説」や「あとがき」等も重要でなければ、article内のasideとして囲むことが可能。

参考ページ(https://spuit.tech/html/aside-element/

section要素

セクションは章や節を表している。

HTML

<section>
<h1>見出し</h1>
本文
</section>

そのため見出しがなかったり、用意ができない場合は章や節として不適格であるため、sectionではないといえる。

また下記のようにhtml4でのマークアップを

HTML

<!-- HTML4 でのマークアップ例 -->
<div id="wrapper">
<div id="header">
<h1>My super duper page</h1>
<!-- Header content -->

</div>
<div id="main"><!-- Page content --></div>
<div id="secondary"><!-- Secondary content --></div>
<div id="footer"><!-- Footer content --></div>
</div>

html5で↓のようにマークアップしてはならない

HTML

<!-- スタイリング目的のdiv 要素を section 要素に置き換えてしまった例(これは間違った例) -->
<section id="wrapper">
<header>
<h1>My super duper page</h1>
<!-- Header content -->
</header>

<div id="main">
<!-- Page content -->
</div>
<section id="secondary">
<!-- Secondary content -->
</section>
<footer>
<!-- Footer content -->
</footer>
</section>

section要素はドキュメントのアウトラインを生成するためのセクションを示すもの。スタイリングのために使用するのであればdiv要素を使用する。

参考ページ(https://qiita.com/maccotsan/items/20c6ea274b0190dc2c05

footer要素

footer要素はページや各セクションのフッターを表す。

HTML


    <div id="footer">
    </div>

HTML


    <footer>
    </footer>

のように書き換えられる。

特徴

  • footer要素はページ内で複数使用できるが一般的ではない。
  • footer要素はセクショニング・コンテンツではないため、アウトラインには現れない。
  • footer要素内にheader要素、footer要素を使うことは出来ない。
  • footer要素の使用位置はページやセクションの最後でなくても使用できる。
  • footer要素は「関連情報へのリンク・著作権情報・著作権表記」等を内包して使用する。

ブログで記事内の最後の日付や、カテゴリーを表示させるエリアにfooter要素を使うことも可能。

figure要素

そもそもfigure要素は何を内包するためにあるのかがわかっていないので説明を読む。
HTML5,JPには、

figure 要素は、いくらかのフロー・コンテンツを表します。オプションで、キャプションを伴います。これは、自己完結したものとなり、通常は、ドキュメントのメインのフローから単独のユニットとして参照されるものとなります。
そのため、この要素は、挿絵、図表、写真、コードなどに注釈を付けるために使われます。これらは、ドキュメントのメインのコンテンツから参照されます。しかし、ドキュメントのフローに影響を与えることなく、主要なコンテンツから、ページのサイドや専用のページや付属ページなどへ切り離すことが可能です。

と書かれている。

要するに、キャプションや注釈をつけることが可能になる。なので、キャプションを付けたいコンテンツが有るなら、figureで囲ってfigurecaptionを記述する方法で良い。
名前からすると「図形(img要素)」をマークアップする専用の要素かと思いきや、写真や図だけでなく、表、ソースコード、リストなどなんでもかまわない。「本文から参照する」ようにひとかたまりにまとめる要素である。
figureの中身は、自己完結している内容である必要がある。そのページのどこにあっても他のページに合っても意味が通じるものでメインコンテンツから参照されるものでなくてはfigureでまとめられない。

参考ページ(http://webcre8.jp/compare/html5-right-figure.html

hgroup要素

hgroup要素は、セクションの見出しを表す。
見出し(h1~h6)とそれに付随する小見出し・副題・キャッチフレーズ等の見出し要素をグループ化するために使用する。

特徴

  • hgroup要素内には、h1~h6要素以外の要素を使用できない
  • hgroup要素内の見出し要素は、レベルが最も高い要素以外はアウトラインに現れない

参考ページ(https://www.mdn.co.jp/di/articles/4040/?page=4

time要素

time要素は、日時を表す。
規定のフォーマットに従ってマークアップしなければならない。

HTML


<time>12:35</time>
<time>12:35:23</time>
<time>2012-01-01</time>
<time>2012-01-01T12:35:23+09:00</time>

ただ、下の2つは実際のWebサイトには適していないと考えられる。
そのためtime要素ではdatetime属性を利用して記述する。

HTML


<time datetime="12:35">12時35分</time>
<time datetime="12:35:23">12時35分23秒</time>
<time datetime="2012-01-01">2012年1月1日</time>
<time datetime="2012-01-01T12:35:23+09:00">2012年1月1日12時35分23秒</time>

datetime属性に規定のフォーマットに従った値を入れると、要素の内容は自由に記述することができる。

HTML


<time datetime="2011-12-31T23:59:59">去年の大晦日、午後11時59分59秒</time>
<time datetime="17:30">イチナナサンマル時</time>
<time datetime="1980-09-09">私の誕生日</time>

参考ページ(http://ascii.jp/elem/000/000/676/676208/

汎用的な新要素としてはこれくらいでしょうか…
ほかにも個人的に<canvas>や<audio>の使い方など文章の構造を示すタグ以外にも、APIと併せて使用すると効果を発揮するタグもあるので、覚えておきたいと感じています。

コメント