Carregando estilos e scripts: link e script no head

Entenda como conectar arquivos CSS e JavaScript à sua página HTML e a importância da ordem de carregamento.

Para que sua página HTML não seja apenas um esqueleto, mas ganhe vida com cores, layout e interatividade, precisamos conectar arquivos externos de CSS (para estilos) e JavaScript (para scripts). O local mais comum e, para o CSS, o mais recomendado para fazer essas conexões é dentro do elemento <head>.

Nesta lição, vamos entender como usar as tags <link> e <script> para carregar esses recursos e a importância da ordem de carregamento.

Conectando folhas de estilo CSS com <link>

A tag <link> é usada para conectar o documento HTML a recursos externos. Para folhas de estilo CSS, ela é a forma padrão e mais recomendada.

Como usar:

  • A tag <link> é uma tag vazia (não tem tag de fechamento).
  • Ela deve ser colocada dentro do <head>.
<head>
  <link rel="stylesheet" href="caminho/para/seu/estilo.css">
</head>

Atributos importantes:

  • rel="stylesheet": Este atributo é crucial. Ele informa ao navegador que o recurso linkado é uma folha de estilos CSS.
  • href: Especifica a URL (caminho) para o arquivo CSS. Pode ser um caminho relativo (ex: style.css, css/main.css) ou absoluto (ex: https://example.com/style.css).
  • type="text/css" (opcional): Embora ainda seja válido, este atributo é opcional para CSS, pois rel="stylesheet" já indica o tipo.

Por que no <head>?

  • Performance e Experiência do Usuário: Colocar o CSS no <head> permite que o navegador comece a renderizar a página com os estilos aplicados o mais rápido possível. Isso evita o "flash of unstyled content" (FOUC), onde a página aparece sem estilos por um breve momento antes do CSS ser carregado. O navegador precisa do CSS para saber como montar o layout antes de exibir o conteúdo.

Conectando arquivos JavaScript com <script>

A tag <script> é usada para incorporar ou referenciar código JavaScript. Ela pode ser usada de duas maneiras:

1. JavaScript inline (diretamente no HTML):

Você pode escrever código JavaScript diretamente entre as tags <script> e </script>.

<head>
  <script>
    // Código JavaScript aqui
    console.log("Olá do JavaScript inline no head!");
  </script>
</head>

2. JavaScript externo (referenciando um arquivo):

Esta é a forma mais comum e recomendada para organizar seu código JavaScript. Você referencia um arquivo .js externo usando o atributo src.

<head>
  <script src="caminho/para/seu/script.js"></script>
</head>

Atributos importantes para <script> externo:

  • src: Especifica a URL (caminho) para o arquivo JavaScript.
  • async (assíncrono):
    • Quando presente, o script é baixado em paralelo com a análise do HTML.
    • O script é executado assim que é baixado, sem esperar que o HTML termine de ser analisado e sem bloquear a renderização.
    • A ordem de execução dos scripts async não é garantida.
    • Use para scripts independentes que não dependem de outros scripts ou do DOM totalmente carregado.
  • defer (adiado):
    • Quando presente, o script é baixado em paralelo com a análise do HTML.
    • O script é executado apenas depois que o HTML foi completamente analisado, mas antes do evento DOMContentLoaded.
    • A ordem de execução dos scripts defer é garantida (na ordem em que aparecem no HTML).
    • Use para scripts que dependem do DOM ou de outros scripts.

Por que o JavaScript no <head> pode ser problemático (e como resolver):

  • Bloqueio da Renderização: Por padrão, quando o navegador encontra uma tag <script> (sem async ou defer), ele para de analisar o HTML, baixa o script, executa o script e só então continua a analisar o HTML. Isso pode atrasar significativamente a renderização da página, especialmente se o script for grande ou lento.
  • Acesso ao DOM: Se o script tentar manipular elementos HTML que ainda não foram carregados (porque o HTML ainda está sendo analisado), ele falhará.

Soluções para JavaScript:

  1. Usar defer: Se o script precisa do DOM e a ordem é importante, defer é uma ótima opção para colocar no <head>.
  2. Usar async: Se o script é independente e a ordem não importa, async é bom para o <head>.
  3. Colocar no final do <body>: A prática mais comum para scripts que manipulam o DOM e não usam defer ou async é colocá-los logo antes da tag de fechamento </body>. Isso garante que o HTML já foi completamente analisado e o DOM está pronto para ser manipulado.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minha Página</title>

  <!-- CSS sempre no head para evitar FOUC -->
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/componentes.css">

  <!-- Scripts com defer para não bloquear a renderização e garantir acesso ao DOM -->
  <script src="js/funcoes_uteis.js" defer></script>
  <script src="js/interatividade.js" defer></script>

  <!-- Scripts async para recursos independentes -->
  <script src="https://www.google-analytics.com/analytics.js" async></script>

</head>
<body>
  <h1>Conteúdo da Página</h1>
  <p>Este é o corpo da minha página.</p>

  <!-- Scripts sem defer/async, colocados no final do body -->
  <!-- <script src="js/main.js"></script> -->
</body>
</html>

Importância da ordem de carregamento

  • CSS: A ordem dos arquivos CSS importa. Se você tiver dois arquivos CSS que definem estilos para o mesmo elemento, o último arquivo carregado (seletor de mesma especificidade) terá precedência. Coloque o CSS "base" primeiro e o CSS "específico" depois.
  • JavaScript: A ordem dos arquivos JavaScript também importa, especialmente se um script depende de outro. Se scriptB.js usa uma função definida em scriptA.js, scriptA.js deve ser carregado e executado antes de scriptB.js. O uso de defer garante essa ordem.

Resumindo

  • <link rel="stylesheet" href="...">:
    • Usado para conectar folhas de estilo CSS externas.
    • Sempre colocado no <head> para evitar FOUC e otimizar a renderização.
  • <script src="...">:
    • Usado para conectar arquivos JavaScript externos.
    • No <head>: Pode bloquear a renderização. Use defer ou async para mitigar.
      • defer: Baixa em paralelo, executa após o HTML, ordem garantida.
      • async: Baixa em paralelo, executa assim que disponível, ordem não garantida.
    • No final do <body>: Alternativa comum para scripts que manipulam o DOM e não usam defer/async, garantindo que o HTML já esteja carregado.
  • A ordem de carregamento é crucial para CSS (precedência de estilos) e JavaScript (dependências entre scripts).