演習課題「フッタを設定してみよう」
現在、ブログの末尾に©2024 Kyoko Kirishimaと表示していますが表示が本文と同様になってしまっています。
正しくフッタとして表示されるようfooterタグを使用して表示を変更して下さい。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです!
#08:フッタ(footer)
このチャプターでは、フッタについて学習します。
フッターは、関連記事やSNSへのリンクや著者情報、著作権情報などを含みます。
それらをマークアップする際に使用される要素がfooter要素です。
footer要素は直近の祖先セクショニングコンテンツまたはセクショニング・ルート要素に対するフッタを表します。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/footer
セクショニング・ルートとはセクションのルートとして扱われ、祖先のアウトラインの影響を受けない要素のことをいいます。
主にbody要素やテーブルのデータセルを表すtd要素などがセクショニング・ルートになります。
また、footer要素もheader要素と同じくセクショニングコンテンツではないため、アウトラインを生成することはありません。
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <header>
            <nav>
                <h1>最近の記事</h1>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Programming</a></li>
                    <li><a href="#">Hobby</a></li>
                </ul>
            </nav>
        </header>
        <article>
            <h1>ブログはじめました</h1>
            <section>
                <h2>あいさつ</h2>
                <p>こんにちは、paiza太郎です。ブログを開設しました。</p>
            </section>
            <section>
                <h2>今後の目標</h2>
                <p>C言語とHTMLをマスターしたいです。</p>
            </section>
            <aside>
                <h2>用語解説</h2>
                HTMLは「HyperText Markup Language」の略でマークアップ言語の1つです。
            </aside>
        </article>
        <footer>
            ©2022 Paiza, Inc.
        </footer>
    </body>
</html>