HTML5で使う機会が案外ありそうな要素など色々

2011.12.17

何気に結構使いそうな感じだったのでメモがてら残しておきます。HTML5ではたくさんの意味を持つ要素があるので今後はこれらを理解した上でマークアップしていきたいですね。とりあえず今回は自分の中で今後活用しそうな要素をまとめてみます。

[ads_center]

日付や時刻を表す時に使います。ブログなんかでは特に使う機会があるかと思います。使い方はこんな感じ。

<time datetime="2011-12-01">2011年12月1日</time>

以前は単純に見た目を小さくするために使われていたのですがHTML5からは細めや注釈を表す要素になりました。細めって何？って思ったので調べてみると以下のような意味らしいです。

細目とは、通常は、免責条項、警告、法的制約、著作権表記などを説明する法律用語のことです。細目は、帰属に使ったり、ライセンス要件を満たすために使うこともあります。

こちらに詳しく書かれていますので気になる人はどうぞ。

よく使われる事例としてはフッターのコピーライトなどに使用できます。

<small>Copyright © 2011 bl6.jp All Rights Reserved.</small>

HTML5以前は水平線を引く時に用いられてましたが、HTML5からはコンテンツを区切りや段落レベルのテーマの変わり目に使用されます。

<h1>Aについて</h1>
<p>Aは...</p>
<hr>
<p>...</p>

blockquoteは以前から引用を表す時に使用されています。この中で引用元のURLがある場合はcite属性に指定します。実際に使用する場合はこんな感じになります。

<blockquote cite="引用元のURL">
...
</blockquote>

その他にもcite要素は作品のタイトルなどを表す時に使用できます。例えば書籍や映画や歌などといったものです。

<p>....<cite>書籍タイトル</cite>....</p>

とまあここに書いてあることの他にもまだまだたくさんの要素があるんですが、どれもちゃんとした意味を持っており、はき違えると間違った使い方になってしまうのでちゃんと覚えとかないといけないっすね。

bl6.jp