演習課題「日付を設定してみよう」
現在、ブラウザでは、その日はpaiza株式会社の設立日ですと表示されています。
この設立日が2012年2月13日であることをブラウザ上で示したいです。timeタグとdatetime属性を使用して設立日を指定して下さい。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
＃03:正確な時刻を表す(time)
このチャプターでは、正確な日時を表すtime要素について学習します。
time要素はコンテンツに記述した日時の情報を、検索エンジンで表示される検索結果のようなユーザーエージェントなどに対して、該当テキストはこの時刻・日付・期間を表しているということを伝える要素です。
人間というよりプログラムを相手にしているため、time要素を使用する場合は、機械が正確に読める形式でコンテンツを記述する必要があります。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/time
time要素のコンテンツに正確な時刻を表記しなくともコンピュータに正確な日時を与える方法があります。
それはtime要素の属性の一つであるdatetime属性です。
datetime属性とは、属性値に正確な時刻を指定することで、time要素のコンテンツが任意の書式でもコンピュータに正確な時刻を与えることができる属性です。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/time#datetime
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script>
window.addEventListener("DOMContentLoaded", () => {
const elems = document.querySelectorAll("time");
for (const elem of elems) {
const date = new Date(elem.dateTime);
const lstr = date.toLocaleString("ja-JP", { era: "long" });
elem.title = `${lstr}`;
}
});
</script>
</head>
<body>
<p><time datetime="2222-11-11">本日</time>paizaラーニングでhtmlについて学びました</p>
</body>
</html>