今回の課題

header・main・footerを使つかったWebページの骨格こっかくを作つくろう！

📖 解説を見る

🏛️ セマンティックHTMLって何なに？

意味いみのあるタグを使つかうと、コードが読よみやすくなります！

✏️ よく使つかうタグ：

<header>　ページぺーじの上部じょうぶ（ロゴ・ナビ）
<main>　メインめいんコンテンツ
<footer>　ページぺーじの下部かぶ（コピーライト）
<section>　セクションせくしょん（まとまり）
<article>　記事きじやブログポスト
<aside>　補足ほそく情報（サイドバー）

⚠️ ポイント：
・div でも動うごくが、セマンティックタグで意味いみが伝つたわる

ヒントを見る

<header>, <main>, <footer> の3つのタグを使ってページを作ろう！

📄 見本

「答えを見る」を押すと、お手本のプレビューとコードが出ます。

💻 コードエディタ

あなたの出力

🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解レッスンに戻る

全問正解でクエストクリア！

未挑戦

問題 1: <section> を複数ふくすう作つくって「自己紹介じこしょうかい」「趣味しゅみ」「好すきな食たべ物もの」のセクションを作つくろう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: <aside> を使つかってサイドバーを追加ついかしよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

クエスト16：セマンティックHTMLを使おう