1. header, main, footerに分けて考える
2. アウトラインを考えて見出し、section or articleを決めていく

https://codepen.io/kame/pen/YoWPMX

<header>
    <h1>タイトル</h1>
    <nav>
      <ul>
        <li><a href="">メニュー1</a></li>
        <li><a href="">メニュー2</a></li>
        <li><a href="">メニュー3</a></li>
      </ul>
    </nav>
</header>

<main>
    <article>
        <h2>タイトル</h2>
        <p>このサイトについての説明文</p>

        <section>
            <h3>このサイトについて</h3>
            <p>HTMLや、CSSについての勉強を目的としたページ<p>
            <section>
              <h4>HTML</h4>
              <p>HTMLで最低限必要な部分の説明</p>
            </section>

            <section>
              <h4>CSS</h4>
              <p>CSSでよく使う部分の説明</p>
            </section>
        </section>

        <section>
            <h3>HTMLの勉強法</h3>
            <p>HTMLで大事なのはその言葉が表しているものを意味付けすることが大事です。</p>
            <p>見た目を調整するのはCSSに任せましょう。</p>
            <p><strong>見出し</strong>、<strong>文章</strong>、<strong>リスト</strong>などの意味付けをするマークアップを心がけましょう。</p>
            <p><a href="http://www.clover.blue/doc/lXvYL28hc8CBwvZiBpuEF">[HTML講座] HTMLについて</a></p>
        </section>

        <section>
            <h3>CSSの勉強法</h3>
            <p>HTMLでマークアップした要素に対してデザインをあてます。</p>
        </section>
    </article>
</main>

<footer>
    <p><small>&copy; copyright kamem</small></p>
</footer>