Menu HTML Entendo a sintaxe inicial

<script>…</script> Script no HTML

by
HTML

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