はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
<time> タグを使う理由
ブログ記事に「公開日：2025年9月29日」と書く場合について考えます。
<p> タグで2025年9月29日と書いただけでは、機械にはそれが「単なるテキスト」なのか「日付」なのか区別がつきません。
しかし、<time> タグを使うと、私たちは機械に対して2つの情報を同時に提供することができます。
- 人間向けの表示：タグの間に書く、読みやすい形式の日付（2025年9月29日）
- 機械向けのデータ：
datetime属性に書く、世界共通の標準形式（2025-09-29）
具体的なコード
<time datetime="2025-09-29">2025年9月29日</time>
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フロントエンド1000本ノック 0005</title>
</head>
<body>
<header>
<!-- h1タグを記事のタイトルに使いたいため、divタグに変更 -->
<div>
<a href="/">
<img src="img/logo.png" alt="フロントエンド1000本ノック">
</a>
</div>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>朝活を始めるメリット</h1>
<time datetime="2025-09-29">2025年9月29日</time>
<section>
<h2>体へのメリット</h2>
<h3>代謝が上がる</h3>
<p>ここに本文が入ります。</p>
<figure>
<img src="img/sunrise.jpg" alt="朝日を浴びて気持ちよさそうに伸びをする人物">
<figcaption>図1：朝日を伸びることで体内時計がリセットされる</figcaption>
</figure>
<h3>体重管理がしやすい</h3>
<p>ここに本文が入ります。</p>
</section>
<section>
<h2>心へのメリット</h2>
<h3>ストレスが減る</h3>
<p>ここに本文が入ります。</p>
<h3>集中力が高まる</h3>
<p>ここに本文が入ります。</p>
</section>
<aside>
<h2>関連記事</h2>
<ul>
<li><a href="#">関連記事1</a></li>
<li><a href="#">関連記事2</a></li>
<li><a href="#">関連記事3</a></li>
</ul>
</aside>
</article>
</main>
<footer>
<p>Copyright 2025</p>
<p>フロントエンド1000本ノック</p>
</footer>
</body>
</html>