はじめに

こんにちは、赤神です！
この記事は、「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>