[25] 新しい要素<time>で正確な日時を記述しよう

HTML5から新たに加わった<time>要素正しい日時をマークアップしてみましょう。
前回やった「datetime属性」が、この要素でも重要ですよ。

使用する要素 <time> 〜 </time>

<time>要素は「正確な日付や時刻を示す」要素です。
人間用というよりコンピュータ用で、コンピュータに正しい日時をゲットさせます。それによって日付や時間に関連する各種ウェブサービス(例えば検索エンジンのクローラとか)へ、正しい情報を与えられるようになる…ってことらしいです。

<time>の基本のカタチ

<time>要素は、日付や時間を書くときに必ず使わなきゃならないわけでなく「ブラウザや検索のクローラに正確な日時を読み取らせたい」ところに使う。なので、コンピュータに読み取り可能な書き方で日時を書いてあげなければ無意味です。

基本の使い方はこんなかんじ。<time>と</time>で囲むだけです。

<time>2011-10-01</time>(日付のみ)
<time>12:00</time>(時間のみ秒数無し)
<time>12:00:00</time>(時間のみ秒数有り)
<time>2011-10-01T12:00:00</time>(日付と時間(秒数有り))
<time>2011-10-01T12:00:00+09:00</time>(日付と時間(秒数有り)とタイムゾーン)

最後の「タイムゾーン」は前回やりましたね。

タイムゾーンは「日付と時刻の両方が指定された場合のみ」つけることができます。日本のタイムゾーンは「+09:00」です。タイムゾーンは協定標準時に対して何時間ずれてるかを表します。日本は協定標準時より9時間早いので「+09:00」になります。

「日付と時間の表記方法」については、「[24] 追加を示す<ins>と、削除されたことを示す<del>を使おう」をご覧ください。

「datetime属性」で、コンピュータに正確な日時を知らせます

<time>要素の内側に書く日付や時間は、「2011-10-01T12:00:00+09:00」などと書くのではなく、人間用に「2011年10月1日正午」などと書きたいですよね。
でもこの書き方ではコンピュータには理解できない。そんな場合は「datetime属性」を使います。

datetime属性の基本の使い方はこんなかんじです。

<time datetime="2011-10-01T12:00:00+09:00">2011年10月1日正午</time>

このように、日付だけ、時間だけ、日付と時間で書くこともできます。

<time datetime="2011-10-02">2011年10月2日</time>
<time datetime="14:39">14時39分</time>
<time datetime="2011-10-02T14:39:50">2011年10月2日14時39分50秒<</time>

こんなふうにdatetime属性で書いてあげれば、コンピュータにも日付や時間がゲットできるというわけです。

具体的にどう使うのか

ブログの記事やコメントの投稿時間の表示の例で見てみましょう。

<h1>コメント</h1>
  <article>
    <footer>
      <p>名前</p>
      <p><time datetime="2011-10-01T12:00:00+09:00"></time></p>
    </footer>
    <p>コメントの本文</p>
  </article>
  <article>
    <footer>
      <p>名前</p>
      <p><time datetime="2011-10-01T12:18:00+09:00"></time></p>
    </footer>
    <p>コメントの本文</p>
  </article>

こうやって<time>要素で正確な日時をマークアップしてあげれば、「新着情報」としてランキングページに表示されたりする、のですと。

上のサンプルソースでは<time></time>の間は空で何も書いていません。
<time>に対応したブラウザでこのソースをプレビューすると、この空の部分に「2011年10月01日12:00:00」などと表示されるんだそうです。(日本語環境で「○年○月○日○:○:○」と出力するように指定している場合)

※この記事を書いている時点で、IE, Firefox, Chrome, Safari, Operaで見てみましたが、プレビューを確認することはできませんでした。(実感できない〜!)

「pubdate属性」は HTML5仕様から削除されました

*<time>で使用される予定だった「pubdate属性」は、HTML5 仕様から削除されました。 http://www.w3.org/TR/html5/text-level-semantics.html#the-time-element

「pubdate」は「public date」の略。公開の日時。
この属性を使うと、<time>要素の含まれる<article>要素の「公開日時」を表し、<article>要素がない場合はHTML文書全体の公開日時になる。ということでした。

次回予告

次回は、<cite>要素を使ってみましょう。これは以前からあった要素です。
<cite>要素は参照した作品のタイトルを表す要素です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.