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".
- esse
- 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. 😊