html - html5 ニュース 'フィード' html 構造

Question

半年ぶりに、くだらない古いウェブサイトを維持する代わりに、新しいウェブサイトを作成しています。私は物事を正しく行うのが好きなので、これがどのように設定されているかを調査しています。

この Web サイトはレスポンシブでモジュール化する必要があるため、特定の要素の適切な構造を検討しています。ペイントで使いたいもののモックアップを作りました。色を見ないでください。私が達成したいことを示すだけです。

そして、これは私が使用することを考えていたコードです:

<div class="">
    <header class="new-icon">
        News feed title
    </header>
    <ul>
        <li>
            <article>
                <header>News item title</header>
                <p>Lorem ipsum</p>
                <p>Lorem ipsum</p>
                <p>Lorem ipsum</p>
                <footer>
                    <a href="#">Read more</a>
                    <span>category</span>
                </footer>
            </article>
        </li>
    </ul>
    <footer>
        <a href="#">
            Read more
        </a>
    </footer>
</div>

html 5 のドキュメントを見ると、周囲の div をセクションにする必要があるかもしれませんが、各ページにはこれらのリストが約 3 つあり、ドキュメントでは「多すぎる」使用を避けるように指示されています。また、li でのヘッダー/フッターの使用は私には奇妙に思えますが、同時に論理的でもあります。

私は自分が何をしているのかわからないように感じます、それはこのように機能していますが、それも正しいですか?