Menu HTML Entendo a sintaxe inicial

Menu HTML e Sintaxe da Estrutura Inicial

by
BUSINESS

O menu é a espinha dorsal da usabilidade de qualquer sistema. No HTML moderno, não criamos um menu jogando links soltos na página. Existe uma estrutura semântica padrão que os desenvolvedores usam para que os navegadores (e leitores de tela para pessoas com deficiência visual) entendam perfeitamente: “Atenção, esta área aqui é o menu principal”.

Conceitualmente, um menu é uma lista de destinos. Por isso, a estrutura é composta por quatro elementos que trabalham em camadas, um dentro do outro.

As Quatro Camadas do Menu Semântico

  • 1. O Container de Navegação (<nav>)
    • Função: Envolver todo o bloco do menu. Ele avisa aos motores de busca e sistemas de acessibilidade a real intenção daquela área da página.
  • 2. A Lista (<ul>)
    • Função: Como o menu é um conjunto de itens, usamos uma lista não ordenada (unordered list). Ela serve para agrupar todos os futuros botões em um único bloco lógico.
  • 3. Os Itens da Lista (<li>)
    • Função: Cada opção do seu menu (como “Home”, “Produtos”, “Cobranças”) precisa ser um item isolado da lista (list item). Se o seu menu tiver 4 opções, você terá 4 tags dessas.
  • 4. Os Links Clicáveis (<a>)
    • Função: A tag de âncora (anchor). Ela fica guardada dentro de cada item da lista e carrega o atributo href para dizer para onde o usuário será levado ao clicar.

A Hierarquia Visual (Efeito Boneca Russa)

Para fixar a sintaxe na mente, pense sempre nessa árvore genealógica de tags:

<nav> (O avô, que delimita a área de navegação)

── <ul> (O pai, que segura a lista inteira)

──── <li> (O filho, que representa a linha/opção)

────── <a> (O neto, que é o texto clicável com o destino href)

Por padrão, quando o navegador lê essa estrutura pura, ele mostra uma lista vertical com bolinhas pretas na lateral. É exatamente aqui que o arquivo style.css entra em ação: usamos as regras de estilo para sumir com as bolinhas, alinhar os itens lado a lado e transformá-los em uma barra de navegação profissional.

Onde o Menu Deve Morar?

O menu fica sempre depois do fechamento da tag </head>. Mais especificamente, ele deve ficar logo no início do <body> (o corpo do documento).

Para você nunca mais esquecer essa regra, pense na estrutura de uma página HTML dividida em duas grandes regiões anatômicas, como se fosse um teatro:

1. O Cabeçalho (<head>) — Os Bastidores

Tudo o que fica entre <head> e </head> são as configurações da página. É onde o navegador lê as instruções “invisíveis” para o usuário: o título da aba, as configurações de idioma e o link para o arquivo CSS. Nenhum elemento visual, como botões, textos ou menus, pode morar aqui.

2. O Corpo (<body>) — O Palco

Tudo o que fica entre <body> e </body> é o que o público (o usuário) de fato enxerga e interage. Como o menu é uma peça visual feita para ser clicada, ele precisa estar no palco. E como o menu geralmente é a primeira coisa que o usuário vê no topo do site, ele costuma vir dentro do elemento <header> (o cabeçalho visual do topo), logo após a abertura do <body>.

A Ordem Cronológica da Estrutura

Visualizando o fluxo de cima para baixo na página, a ordem correta das tags é exatamente esta:

  1. Abertura do HTML (<html>)
  2. Abertura do Cabeçalho (<head>)
  3. Configurações e links invisíveis (como o <link rel="stylesheet"...>)
  4. Fechamento do Cabeçalho (</head>) — Aqui terminam as configurações.
  5. Abertura do Corpo (<body>) — Aqui começa o que é visível.
  6. O Cabeçalho do Topo com o Menu (<header><nav>...</nav></header>)
  7. Outros conteúdos da página (títulos, parágrafos, seções)
  8. Fechamento do Corpo (</body>)
  9. Fechamento do HTML (</html>)

Entendendo os Atributos: target=”_blank” vs target=”blank”

No HTML, a palavra blank vem do inglês e significa “em branco” ou “vazio”. Quando você aplica isso a um link, a estrutura funciona assim:

  • target: É o atributo de “alvo”. Ele pergunta ao navegador: “Onde você quer que eu abra a página desse link quando o usuário clicar?”
  • "_blank": É o valor que responde: “Abra em uma nova página (aba) que esteja completamente em branco”.

O Segredo do Underline (_)

Existe uma diferença muito sutil e avançada que poucos desenvolvedores iniciantes conhecem sobre usar ou não o underline:

  • Com underline (target="_blank"): É uma palavra-chave reservada do sistema. Toda vez que o usuário clicar no link, o navegador vai abrir uma nova aba inédita. Se ele clicar 5 vezes, abrirá 5 abas novas.
  • Sem underline (target="blank"): O navegador entende que “blank” é o nome que você inventou para uma janela específica. Na primeira vez, ele abre uma nova aba. Se o usuário clicar em outro link que também tenha target="blank", o novo link carregará dentro daquela mesma aba aberta anteriormente.

Dica do Professor: Para links externos (como redes sociais ou sites de terceiros) em que você quer apenas que o usuário saia temporariamente do seu sistema sem fechar sua página, use sempre a sintaxe oficial com o underline: _blank.

Bônus: Dando Vida à Página com a Tag <script>

Depois de estruturar o menu e aplicar o visual com o CSS, chega o momento de adicionar interatividade ao seu site — como aqueles menus que abrem e fecham sozinhos no celular. Para isso, usamos a tag <script>.

Embora pareça gêmea da tag <link>, ela possui duas regras de ouro exclusivas que você precisa dominar para não travar o seu projeto.

1. A Diferença entre href e src

Para trazer o CSS, usamos href (referência). Para trazer o JavaScript, mudamos o atributo para src (source, ou fonte). É a forma de dizer ao navegador: “Execute o código que está vindo desta fonte externa”.

2. A Obrigação de Fechar a Tag

Diferente do <link>, que nasce e morre em uma linha só, a tag de JavaScript exige uma tag de fechamento dedicada (</script>). Isso acontece porque ela serve tanto para apontar para um arquivo externo quanto para você digitar códigos diretamente dentro dela.

O Segredo do Posicionamento Estratégico

A maior pegadinha do <script> é onde colocá-lo. Enquanto o CSS fica guardado no <head> (nos bastidores), o JavaScript deve ser colocado no final do <body> (o palco), exatamente na linha anterior ao fechamento da página.

  • Performance: O navegador lê o seu site de cima para baixo. Se você colocar o script no topo, a página vai “congelar” o carregamento visual até terminar de baixar todo o código de comportamento.
  • Experiência do Usuário: Colocando o script no final, o usuário vê o layout do site renderizado imediatamente na tela, enquanto o JavaScript carrega de forma invisível logo em seguida.

Regra de Bolso do Desenvolvedor: O visual (CSS) entra primeiro para vestir a página. O comportamento (JS) entra por último, quando o palco já está todo montado!

Código Exemplo Completo

Veja abaixo como fica toda essa estrutura aplicada na prática de forma 100% correta, estruturada e seguindo os padrões de mercado:

HTML

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
        <title>Home</title>
    </head>
        
    <body>
        <header>
            <nav>
                <ul>
                    <li><a href="https://github.com/gitvkt?tab=repositories">MENU-1</a></li>
                    <li><a href="https://github.com/gitvkt?tab=repositories" target="_blank">MENU-2</a></li>
                </ul>
            </nav>
        </header>
        
        <h1>Olá, mundo!</h1>
        
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

Comentar

You must be logged in to post a comment