「それ、ロボットにも伝わってる？」日付を正しく伝える魔法のタグ `
こんにちは！Web制作の世界へようこそ。
HTMLを書き始めると、`
`といったタグはすぐに仲良くなれますよね。でも、たまに「これって何のためにあるんだろう？」と首を傾げたくなるタグに出会いませんか？
その代表格が今回紹介する `
「ただ日付を書くだけなら、普通に文字として書けばいいじゃない？」そう思いますよね。私も最初はそう思っていました。でも、このタグには「人間に優しく、機械にも親切」という、Web制作の極意が詰まっているんです。
今日は、なぜ `
—
`` タグって、結局何者？
例えば、Webサイトのブログ記事に「2024年5月20日」と書いてあるとします。私たち人間はこれを見て「ああ、昨日のことだな」とすぐ分かりますよね。
でも、Googleの検索エンジンや、カレンダーアプリのような「機械」にとっては、それがただの「文字列」に見えています。数字の羅列なのか、日付なのか、あるいは架空の数式なのか、確信が持てないんです。
そこで登場するのが `
更新日：2024年5月20日
更新日：
これだけで、「ここには時間が書かれているんだな」と機械が理解しやすくなります。これこそが、WebのアクセシビリティやSEO（検索エンジン最適化）の第一歩なんです。
—
datetime属性という「翻訳機」を使いこなそう
さて、ここからが本題です。実は `
例えば、こんな書き方を想像してみてください。
イベント開催日：
ここで注目してほしいのは、`datetime=”2024-05-20″` という部分です。これが、世界共通で機械が絶対に理解できる「ISO 8601」という形式のルールなんです。
なぜ「2024-05-20」という書き方なの？
人間は「5月20日」「2024年5月20日」「5/20」と自由に書きますよね。でも機械は混乱してしまいます。そこで、世界共通の「年-月-日」の順番で、必ずハイフンで区切るという厳格なルールを決めているんです。
- 年： 4桁（例：2024）
- 月： 2桁（例：05）
- 日： 2桁（例：20）
これなら、どの国のどのプログラムが読み込んでも、「ああ、2024年の5月20日ね！」と一発で理解できます。
—
応用編：時間まで指定したいときは？
イベントの開始時間など、「何時何分」まで正確に伝えたいときは、日付の後に `T` を挟んで時刻を書き加えます。
ライブ配信開始：
- `2024-05-20`：日付
- `T`：日付と時刻の境界線（TimeのTと覚えましょう！）
- `19:00`：時刻
これで完璧です！「夜7時から！」という人間向けの表記を残しつつ、裏側では正確な時刻情報をプログラムに渡す。この「優しさの二重構造」が、プロフェッショナルなコーディングの証です。
—
つまずきやすいポイント：全部の「時間」を囲む必要はある？
よくある質問で、「文章の中に登場するすべての日付を `
答えは「機械に認識させたい重要な情報だけ」で大丈夫です。
例えば、ただの世間話で「昔、2000年頃に流行ったよね」と書く分には、無理にタグを付ける必要はありません。でも、「記事の投稿日」「イベントの開催日時」「期限日」など、誰かにとって重要な意味を持つ日付には、ぜひ積極的に使ってみてください。
—
最後に：Webを「もっと賢く」する楽しみ
`
でも、あなたが書いたその小さなコードのおかげで、誰かのスマホのカレンダーに予定が自動登録されたり、検索エンジンが正確に日付を表示してくれるようになるかもしれません。
「誰かの役に立つために、機械にも言葉を尽くす」
それこそが、Webという広大な世界を支えるフロントエンドエンジニアの誇りです。まずは、今作っているサイトの「更新日」や「フッターのコピーライトの日付」から、そっと `
あなたの書くコードが、今日もWebのどこかで誰かの助けになりますように。応援しています！
コメント