のように、divのタグに属性をつけている場合があるようです。
自体にヘッダーとしての意味づけがあるのに、そこにroleで同じ役割を明示するってダブってない?と疑問におもったり。そのうち整理されるのだろうか。

sectionとarticleとdivの違い

いずれもコンテンツを構成する「箱」として使われます

sectionは1小節 sectionはコンテンツの1小節に使います。 ホームページでは文章構造の基本は「見出し+本文」。 見出しと本文の1ブロックが作れる場合には、sectionで囲みます。

<section>
    <h4>関連記事</h4>
    関連記事のリスト
</section>

articleは独立したコンテンツ

その部分を切り出して別のページにしても、1つのページとして成り立つか?(独立したコンテンツになっているか?)が見分けるポイント。

<article>
    <h1>記事のタイトル</h1>
    <h2>見出し1</h2>
    本文
    <h2>中見出し2</h2>
    本文
</article>

divはただの箱 sectionでもarticleでもないけれど、ひとまとめにして扱いたい時に使います。CSSとかの装飾用とか。

記事ページのHTMLテンプレート

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>記事タイトル | サイトタイトル</title>
        <meta name="description" content="記事の概要">
    </head>
    <body>
        <header>
            <p>タイトル(ロゴなど)</p>
            <nav>グローバルナビゲーション</nav>
        </header>
        <!-- mainコンテンツ -->
        <main>
            <article>
                <header>
                    <h1>記事タイトル</h1>
                    <p>投稿日時</p>
                    <p>カテゴリー</p>
                </header>
                <section>
                    <h2>中見出し</h2>
                    <p>文章</p>
                    <h3>小見出し</h3>
                    <p>文章</p>
                    <h3>小見出し</h3>
                    <p>文章</p>
                </section>
                <footer>
                    <p>SNSシェアボタン、投稿者のプロフィールなど</p>
                </footer>
            </article>
            <!-- sidebar -->
            <aside>
                <section>
                    <h4>新着記事一覧</h4>
                    <ul>
                        <li>記事1</li>
                        <li>記事2</li>
                        <li>記事3</li>
                        <li>記事4</li>
                        <li>記事5</li>
                    </ul>
                </section>
                <section>
                    <h4>カテゴリ一覧</h4>
                    <ul>
                        <li>カテゴリー1</li>
                        <li>カテゴリー2</li>
                        <li>カテゴリー3</li>
                    </ul>
                </section>
            </aside>
        </main>
        <!-- footer -->
        <footer>
            <p>グローバルメニュー、コピーライト、SNSリンクなど</p>
        </footer>
    </body>
</html>