総仕上げ 構造を完成させよう
新しいタグはもうありません
コース 1 の最後です。今回おぼえるタグはありません。書いたコードを頭から読み返して、抜けを自分で見つけて直します。実際の現場でも、この読み返しが仕上げの仕事です。
読み返すときの目のつけどころ
見るところは次の通りです。
- 開始タグと終了タグが対になっているか、入れ子が交差していないか
- 見出しが h1 から h2、h3 と順に下がっているか
- 画像に alt があるか、リンクの行き先が正しいか
- 入力欄に label と name が付いているか
読み返して直すところ
いまのページには 3 つの抜けがあります。上から順に直します。
- header のメニューに お問い合わせ へのリンクがありません。リストの最後に足します。href は #contact です
- メールアドレスの入力欄に placeholder がありません。hanako@example.com を入れて、書き方の見本を見せます
- メッセージの textarea に name がありません。name="message" を足します。name が無い欄は、送信しても中身が届きません
直したあとに
もう一度ページ全体を上から読んで、header・main・footer と 6 つの section がそろっているか確かめます。ここまでで index.html は完成です。次のコースでは、この骨組みに CSS で見た目を付けていきます。
課題
- header のメニューの最後に お問い合わせ へのリンクを足す
- メールアドレスの入力欄に placeholder を足す
- メッセージの textarea に name="message" を足す