[Dúvida] HTML, Header e Sidebar

Olá Felipe, primeiramente não se preocupe em achar UMA maneira correta de estruturar seu código. Apesar de termos regras e boas práticas gerais, quanto ao uso de elementos HTML (principalmente quando se trata dos elementos semânticos), quando o assunto chega ao nível de "estrutura do meu projeto" muitas vezes o "correto" acaba caindo no vale das opiniões.

Leia minha resposta como uma opinião minha embasada na minha experiência e achados enquanto Desenvolvedor Web.

Tenha em mente que semanticamente nada te impede de ter mais de um <header>, <h1> ou <nav> na página, contanto que faça sentido. Assim como na linguagem falada, a semântica muitas vezes depende do contexto.

Baseado na imagem que você mandou e tentando ser o mais semântico possível, eu construiria na seguinte estrutura:

• uma <div> abraçando tudo
• sidebar como <aside> com o título em <h1> por ser o título da página
  • esse <h1> poderia estar em um <header> se você considerá-lo o <header> do <aside> eu só não acho necessário, não tenho "bons motivos".
• navegacão como <nav> com <ul> -> <li> -> <a>
• conteúdo principal como <main>
• Your projects, Trending e Announcements como <section> com seus respectivos títulos como <h2> por que eu acredito que não são tão importante quanto o título da página
• Cards como <ul> ou <ol> -> <li>-> <article> com seus títulos em <h3> e descrição como <p>

HTML simplificado:

<div>
    <aside>
        <h1>Dashboard</h1>
        <nav>
            <ul>
                <li>
                    <a>Home<a/>
                </li>
                <!-- e por ai vai... -->
            </ul>
        </nav>
    </aside>
    <main>
        <header>
            <!-- Tudo o que vemos no topo -->
        </header>
        <seciton>
            <h2>Your projects</h2>
            <ul> <!-- ou <ol> se for uma lista ordenada -->
                <li>
                    <article>
                        <h3>Titulo do projeto</h3>
                        <p>Descrição</p>
                    </article>
                    <!-- outros projetos -->
                </li>
            </ul>
        </section>
        <!-- outras sections como descrito acima -->
    </main>
</div>

Pare determinar a importâcia de um heading (h1, h2... h6) eu normalemente tento pensar como eu explicaria para alguém onde encontrar algo. Por exemplo para encontrar o Easy Peasy App você vai pra Dashboard -> Your Projects -> Easy Peasy App e aí defino uma certa hierarquia.

Quanto ao <h1> fora do <header>, eu não encontrei nada concreto que diga que o SEO seja afetado por um <header> sem <h1> ou um <h1> fora de um <header>.

Normalmente para dúvidas como a sua eu recorro ao web.dev, MDN, w3school e a famosa arena de batalha StackOverflow.

Espero ter sido minimamente útil e adoraria ouvir opiniões, sua e dos outros leitores. 😊