HTMLで文章・画像・リンクを配置する

index.html全文：文章の構造、画像、ページ内リンクを定義

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ひだまりカフェ｜架空のお店の制作演習</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="site-header">
<a href="#home">ひだまりカフェ</a>
<nav aria-label="ページ内ナビゲーション">
<a href="#menu">メニュー</a>
<a href="#access">営業時間・アクセス</a>
</nav>
</header>
<main id="home">
<section class="intro">
<p class="label">架空のお店の制作演習</p>
<h1>ひと息つける、<br>いつもの場所。</h1>
<p>香りのよいコーヒーと、ゆっくり過ごす時間を。<br>このページの店名・商品・案内はすべて学習用の例です。</p>
<a class="cta" href="#menu">メニューを見る</a>
<img src="assets/cafe.svg" alt="カップと湯気を描いた、カフェのイメージイラスト" width="900" height="500">
</section>
<section id="menu">
<h2>メニュー</h2>
<p>価格と内容は学習用です。</p>
<ul class="menu-grid">
<li>
<h3>コーヒー</h3>
<p>香りを楽しむ一杯。</p>
<strong>500円</strong>
</li>
<li>
<h3>紅茶</h3>
<p>ゆっくり味わう一杯。</p>
<strong>450円</strong>
</li>
<li>
<h3>ケーキ</h3>
<p>午後の時間のおともに。</p>
<strong>550円</strong>
</li>
</ul>
</section>
<section id="access">
<h2>営業時間・アクセス</h2>
<dl>
<dt>営業時間の例</dt>
<dd>10:00〜18:00</dd>
<dt>定休日の例</dt>
<dd>水曜日</dd>
<dt>場所</dt>
<dd>架空の街の公園前（実在する店舗の案内ではありません）</dd>
</dl>
<p>この静的ページには予約や問い合わせの送信機能はありません。</p>
</section>
</main>
<footer>
<p>ひだまりカフェ｜XEROTTA 学習用サンプル</p>
<a href="#home">ページ上部へ戻る</a>
</footer>
</body>
</html>