HTMLのお勉強(アウトライン) - ただし(仮)のメモ

参考書籍はHTML/CSSデザインの教科書

アウトラインとは

うん、よく分かりませんでしたｗ
私のなんとくの理解によると、ブラウザ上の表示には関係なく、人間やプログラムがソースコードを理解しやすくするために記述するもの。
今回学んだタグ

文章のまとまりを表すタグ
article	内容が単体で完結する部分。ブログの1記事など。
aside	関連はあるが本筋と外れる内容。補足や広告など。
nav	サイトの主要なナビゲーション
section	上記以外の区分

構造を表すタグ
header	見出し、導入、ロゴ、タイトル、目次、検索など
footer	執筆者、関連リンク、コピーライトなど

う～んこうして書いてみてもよく分からないです。
適応例が多すぎるので実際に色々と例を見て使い方を覚えていこうと思います。

今回の勉強で作成したソースコード

ほとんど参考書にのっている通りですが、文章をそのまま流用はNGとのことなので、内容をモーニング娘。の紹介にしてそれに伴いソースコードも多少変更したものを載せておきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>モーニング娘。紹介</title> 
    </head>
    <body>
    <article>
        <header>
            <h1>モーニング娘。'17</h1>
            <p>モーニング娘。は1998年に結成されたアイドルグループ。<br>
               メンバーの卒業、増員を繰り返し今もなお成長し続けているハロプロ人気No1のグループ。</p>
        </header>

        <section>
            <h2>モーニング娘。'17のメンバー</h2>
            <p>2017年に2人の新メンバーが加入し現在13人で活動している。</p>
            <table>
                <caption>メンバー一覧</caption>
                <thead>
                    <tr>
                        <th>名前</th>
                        <th>イメージカラー</th>
                        <th>補足</th>                        
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>譜久村聖</th>
                        <td>ホットピンク</td>
                        <td>リーダー</td>
                    </tr>
                    <tr>
                        <th>佐藤優樹</th>
                        <td>エメラルドグリーン</td>
                        <td>神</td>
                    </tr>
                    <tr>
                        <th>牧野真莉愛</th>
                        <td>ライトピンク</td>
                        <td>まりあんラブリン</td>
                    </tr>
                </tbody>
            </table>
            <section>
                <h3>譜久村聖</h3>
                <p>モーニング娘。'17のリーダー、おっとりしているように見えるが実はしっかり者。</p>
            </section>
            <section>
                <h3>佐藤優樹</h3>
                <p>いろいろとおかしいけど0歳から英語習ってたりピアノできたり馬に乗れたりするすごい娘。クロッキの料理教室を見ると凄さが分かるかも。</p>
            </section>
            <section>
                <h3>牧野真莉愛</h3>
                <p>人気急上昇中の12期メンバー、かわいい。とにかくかわいい。</p>
            </section>
        </section>

        <footer>
            <section>
                <h2>関連リンク</h2>
                <ul>
                    <li>ハロープロジェクト公式HP</li>
                    <li>モーニング娘。youtube公式チャンネル</li>
                    <li>クロッキの料理教室(佐藤優樹＆牧野真莉愛)</li>
                </ul>   
            </section>

            <aside>
                <p>参考</p>
                <h2>wikipedia(モーニング娘。)</h2>
                <ul>                                            
                    <li>wikipediaのモーニング娘。のページ</li>
                    <li>wikipediaメインページ</li>
                </ul>
                <p>メンバーカラーの確認に使わせていただきました。</p>
            </aside>
        </footer>
    </article>    
    </body>
</html>