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