セマンティックなHTML構造を作ってみよう（header/main/footer）

作成ファイル・保存場所

作成した html-basic フォルダの中に html08.html というファイル名で保存してください。

目的

HTML5以降で導入されたセマンティック要素 <header>、<main>、<footer> の使い方を学び、意味のあるページ構造を作成する力を養う。

指示

以下の条件に従って、セマンティックな構造を意識したWebページを作成してください。

タイトルは「HTML課題08」とすること
<h1> タグで「私のWebサイト」と表示すること
ページ全体を以下のセクションで構成すること

構成内容

<header>
- <h1> で「私のWebサイト」というタイトルを表示
- <p> で簡単なキャッチコピーなど（例：「ようこそ！私のポートフォリオサイトへ」）
<main>
- <h2> で「最近の活動」と表示
- <ul> で活動内容を3つほど箇条書き（例：ブログ更新、写真投稿など
- <img>で制作実績を掲載（ダミー画像）
<footer>
- <p> で著作権表記（例：© 2025 MySite）
- <small> と © の使用

チェックポイント

<header>、<main>、<footer> が正しく使われているか
見出し（<h1>, <h2>）の使い方に無理がないか
HTMLタグの構造やインデントが整理されているか
不要なタグや閉じタグのミスがないか

要素名がわからない場合は、HTML要素一覧を参照してみましょう

HTMLの解答例

セマンティクス要素を意識しながら入力してみましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTML課題08</title>
</head>

<body>

    <!-- ヘッダー部分 -->
    <header>
        <h1>私のWebサイト</h1>
        <p>ようこそ！私のポートフォリオサイトへ</p>
    </header>

    <!-- メインコンテンツ -->
    <main>
        <h2>最近の活動</h2>
        <ul>
            <li>ブログを週1で更新しています</li>
            <li>写真を毎月ギャラリーに追加しています</li>
            <li>新しいWebアプリを開発中です</li>
        </ul>
        <p>
            <img src="https://dummy.kobeya.com/?width=400&height=250&text=Portfolio" alt="制作実績">
        </p>
    </main>

    <!-- フッター -->
    <footer>
        <p><small>&copy; 2025 MySite</small></p>
    </footer>

</body>

</html>

完成イメージ

画面上で右クリックし、Open with Live Serverを起動。（プラグインのLive Serverが必要です)