MACETE PARA ORGANIZAR AS DIVS | Front-end | Alura

Estou trabalhando neste projeto mas ele ta mto desorganizado, gostaria de saber um macete pra organizar suas divs, podem ajudar?

<body>
    <header>
      <nav>
            <div class="menu-btn">
                <i class="fas fa-bars"></i>
            </div>

            <div class="side-bar active">

                <div class="close-btn">
                  <i class="fas fa-times"></i>
                </div>

                <div class="menu">

                    <div class="item">
                     <a href="index.html">
                        <i class="fas fa-desktop"></i>Admin
                     </a>
                    </div>

                  
                    
                    <div class="item">
                       <a class="sub-btn">
                        <i class="fas fa-table"></i>Cursos
                        <i class="fas  fa-angle-right dropdown"></i>
                       </a>

                       <div class="sub-menu">
                         <a href="#" class="sub-item">Javascript</a>
                         <a href="#" class="sub-item">PHP</a>
                         <a href="#" class="sub-item">React.js</a>
                       </div>

                    </div>

                    <div class="item">
                        <a href="index.html">
                        <i class="fas fa-th"></i>Recursos
                        </a>
                    </div>
                       

                    <div class="item">
                      <a class="sub-btn">
                        <i class="fas fa-cogs"></i>Login
                        <i class="fas fa-angle-right dropdown"></i>
                      </a>

                      <div class="sub-menu">
                      <a href="#" class="sub-item">Cadastre-se</a>
                      <a href="#" class="sub-item">Logar</a>
                      </div>

                    </div>

                    <div class="item">
                       <a href="index.html"><i class="fas fa-info-circle"></i>Sobre</a>
                    </div>

                </div>

            </div>


        </nav>
    </header>
</body>

Oi Prof. Miranda,

Aqui está o seu código reestruturado com base na estrutura semântica:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu com Estrutura Semântica</title>
    <!-- Aqui você pode adicionar links para o CSS e fontes -->
</head>
<body>
    <!-- Cabeçalho -->
    <header>
        <h1>Menu de Navegação</h1>
    </header>

    <!-- Navegação principal -->
    <nav>
        <ul>
            <li><a href="#admin">Admin</a></li>
            <li><a href="#cursos">Cursos</a></li>
            <li><a href="#recursos">Recursos</a></li>
            <li><a href="#login">Login</a></li>
            <li><a href="#sobre">Sobre</a></li>
        </ul>
    </nav>

    <!-- Seção principal -->
    <section id="cursos">
        <h2>Cursos</h2>
        <p>Selecione um dos cursos abaixo:</p>
        <ul>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">PHP</a></li>
            <li><a href="#">React.js</a></li>
        </ul>
    </section>

    <!-- Barra lateral -->
    <aside>
        <h3>Barra Lateral</h3>
        <ul>
            <li><a href="#admin">Admin</a></li>
            <li><a href="#recursos">Recursos</a></li>
            <li><a href="#login">Login</a></li>
        </ul>
    </aside>

    <!-- Artigo -->
    <article>
        <h2>Sobre</h2>
        <p>Bem-vindo à página "Sobre". Aqui você encontra informações sobre este projeto e seus autores.</p>
    </article>

    <!-- Rodapé -->
    <footer>
        <p>&copy; 2024 - Todos os direitos reservados.</p>
    </footer>
</body>
</html>

Alterações e Organização:

Divisão em Elementos Semânticos:
- Cabeçalho (<header>) para introduzir o site.
- Navegação principal (<nav>) com links para diferentes partes.
- Conteúdo principal dentro de <section> para cursos.
- Conteúdo adicional na barra lateral usando <aside>.
- Informações específicas sobre o site agrupadas em <article>.
- Rodapé com informações de direitos autorais.
IDs e Links Internos:
- Adicionei id às seções para que os links possam navegar dentro da página.
Hierarquia de Cabeçalhos:
- Organizei os cabeçalhos (<h1>, <h2>, <h3>) para seguir uma hierarquia lógica e facilitar a navegação.

Veja mais em: HTML Semantic Elements

Caso este post o tenha ajudado, por favor, marcar como solucionado ☑️. Bons Estudos! 🤓