マークアップ演習 - 解答例

W3C HTML Validator Service

  • 必ず、文法チェックをすること

validator.w3.org

例A

  • グループ化する前までの記述
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>卵料理カフェ Cockeyolly</title>
</head>
<body>
<h1>卵料理カフェ Cockeyolly</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">今月のおすすめ</a></li>
<li><a href="#">オリジナル雑貨</a></li>
<li><a href="#">マップ</a></li>
<li><a href="#">メール</a></li>
</ul>

<h2>今月のおすすめ</h2>

<h3>きのこのオムライス</h3>
<p>ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。<br>
  価格:800円</p>

<h3>シーフードスパゲッティ<br>
バルサミコ風味</h3>
<p>エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。<br>
  価格:900円</p>

<p><small>(c)2016  卵料理カフェ Cockeyolly</small></p>
</body>
</html>

例B

  • グループ化する前までの記述
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>パスタとワインの店 atella</title>
</head>
<body>

<h1>パスタとワインの店 atella</h1>

<ul>
<li><a href="#">concept</a></li>
<li><a href="#">pasta</a></li>
<li><a href="#">drink</a></li>
<li><a href="#">side</a></li>
<li><a href="#">access</a></li>
</ul>

<ul>
<li><a href="#">Lunch</a></li>
<li><a href="#">Pasta</a></li>
<li><a href="#">Wine</a></li>
</ul>

<h2 class="info">現在実施中のキャンペーンやお得な情報</h2>

<h2>Today's Pasta 今日の日替わりパスタ</h2>
<p>ペンネアラビアータ<br>(ピリ辛トマトソースのペンネ)</p>

<h2>news</h2>
<dl>
<dt>2016.7.24</dt><dd>今年も冷製パスタをお出しし始めました</dd>
<dt>2016.7.18</dt><dd>トマトソースの作成ビデオを公開しました</dd>
</dl>

<h2><a href="#">CouponTickets ランチセットご注文時ドリンク1杯無料</a></h2>

<p><small>&copy;2016 atella all right reserved.</small></p>
</body>
</html>