Executando verificação de segurança...
3

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

Carregando publicação patrocinada...
1

iCarillo, obrigado pela resposta!

Fico mais tranquilo em saber que essa parte mais semântica do código depende mais do contexto e que está mais no campo da opinião, em alguns casos. Porque eu já bati muita cabeça com dúvidas parecidas com essas que eu trouxe, sempre com receio de estar "fazendo errado".

E o seu exemplo de estruturação do HTML me ajudou muito também. Essa dica dos headers foi ouro, obrigado mesmo!