新・HTML/CSS入門編4:補足情報(aside)

<!-- /var/www/html/index.html -->
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <nav>
            <h1>最近の投稿</h1>
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">プログラミング</a></li>
                <li><a href="#">プロフィール</a></li>
            </ul>
        </nav>
        <article>
            <h1>マーガレットとお勉強</h1>
            <h2>あいさつ</h2>
            <p>こんにちは、霧島京子です。先日、マーガレットとプログラミングの勉強をしました。</p>
            <h2>マーガレットとしたいこと</h2>
            <p>JavaScriptとCSSの勉強を一緒にしていけたらと思っています。</p>
            <h2>マーガレットとは</h2>
            マーガレットは私が自作したPCのことです。
        </article>
    </body>
</html>

<!-- /var/www/html/index.html -->
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <nav>
            <h1>最近の投稿</h1>
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">プログラミング</a></li>
                <li><a href="#">プロフィール</a></li>
            </ul>
        </nav>
        <article>
            <h1>マーガレットとお勉強</h1>
            <h2>あいさつ</h2>
            <p>こんにちは、霧島京子です。先日、マーガレットとプログラミングの勉強をしました。</p>
            <h2>マーガレットとしたいこと</h2>
            <p>JavaScriptとCSSの勉強を一緒にしていけたらと思っています。</p>
            <h2>マーガレットとは</h2>
            マーガレットは私が自作したPCのことです。
        </article>
    </body>
</html>

この動画を見るには

paiza会員登録のうえ

有料会員登録が必要です

演習1

問題ログインすると模範解答や入力を見ることができます

演習課題「補足情報を区別してみよう」

現在、補足情報が他の情報と区別されずに表示されています。
補足情報であるマーガレットとは以下の内容をasideタグで囲んで下さい。

採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！

Tips

動画へ戻る

次のチャプターへ前のチャプターへ

※有料会員になるとこの動画をご利用いただけます

詳しい説明を読む

＃05:補足情報(aside)

このチャプターでは、補足情報について学習します。

追加するコード

<h2>用語解説</h2>
HTMLは「HyperText Markup Language」の略でマークアップ言語の1つです。

文書のメインコンテンツと間接的な関係しか持っていない文書の部分を補足情報と言います。

補足情報の例としては、補足や脚注、サイドバーのメニューやSNSのシェアボタン、広告などそのページのメインコンテンツとは別に考えられる他のコンテンツが挙げられます。

それらの、消してしまうとメインコンテンツが崩れるようなコンテンツを、マークアップするために使われる要素がaside要素です。

aside要素に記載したコンテンツは、ページ内のメインコンテンツを抽出して読むことができるリーダーモードにおいて、抽出から除外され表示されなくなります。

MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/aside

今回作成したコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <nav>
            <h1>最近の記事</h1>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Programming</a></li>
                <li><a href="#">Hobby</a></li>
            </ul>
        </nav>
        <article>
            <h1>ブログはじめました</h1>
            <h2>あいさつ</h2>
            <p>こんにちは、paiza太郎です。ブログを開設しました。</p>
            <h2>今後の目標</h2>
            <p>C言語とHTMLをマスターしたいです。</p>
            <aside>
                <h2>用語解説</h2>
                HTMLは「HyperText Markup Language」の略でマークアップ言語の1つです。
            </aside>
        </article>
    </body>
</html>

プログラミング学習 > 新・HTML/CSS入門編 > 新・HTML/CSS入門編4: セクションを理解しよう > 補足情報(aside)