Articles
Introdução ao HTML
Tags usadas na seção head

Tags usadas na seção head

Este artigo explica as tags usadas na seção head.

Ele explica as tags usadas na seção head, como <link>, <script>, <style>.

YouTube Video

Tags usadas na seção head

Tag <title> 

1<title>Document Title</title>
  • A tag <title> define o título do documento. Este título é exibido na aba do navegador e é usado em favoritos e resultados de busca.

Tag <link>

  • A tag <link> é usada para vincular recursos externos ao documento atual. É comumente usada para vincular arquivos CSS externos, mas também pode ser usada para ícones e outros recursos externos.

O Atributo rel da Tag <link>

O atributo rel é usado para especificar a relação entre o recurso a ser vinculado e o documento atual na tag <link>. Existem muitos tipos de valores para o atributo rel, mas aqui explicaremos os particularmente importantes e frequentemente usados.

stylesheet 
1<link rel="stylesheet" href="styles.css">
  • stylesheet é usado para vincular uma folha de estilo externa.

icon 

1<link rel="icon" href="favicon.ico" type="image/x-icon">
  • rel="icon" define o ícone exibido na aba do navegador ou em um favorito. Ao especificar o favicon correto, o reconhecimento visual e a marca do site são aprimorados.

preload 

1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  • preload é usado para carregar recursos com antecedência antes do início da renderização da página. É especialmente útil para recursos onde o tempo é importante, como fontes ou imagens grandes. Isso melhora o desempenho e aprimora a experiência do usuário.

canonical 

1<link rel="canonical" href="https://example.com/page.html">
  • canonical é usado para informar aos motores de busca sobre a versão canônica de uma página. No caso de conteúdo duplicado, indicar a URL canônica ajuda a consolidar a classificação nos motores de busca do ponto de vista de SEO e garante que o conteúdo seja indexado corretamente.

alternate 

1<link rel="alternate" hreflang="en" href="https://example.com/en/">
  • alternate é usado para indicar páginas de diferentes idiomas ou formatos para mecanismos de busca e navegadores. Em sites multilíngues, você pode especificar a URL para cada versão do idioma em combinação com o atributo hreflang para fornecer aos usuários páginas no idioma apropriado.

manifest 

1<link rel="manifest" href="/manifest.json">
  • O manifest fornece ao navegador um arquivo de manifesto contendo informações de configuração para um PWA (Aplicativo Web Progressivo). Este arquivo contém informações como o ícone do aplicativo, a cor do tema e o modo de exibição, que ajudam na instalação e execução do PWA em dispositivos móveis.

dns-prefetch 

1<link rel="dns-prefetch" href="//example.com">
  • Ao referenciar recursos externos, realizar a resolução DNS do domínio com antecedência pode melhorar a velocidade de carregamento da página. Isso é especialmente eficaz para páginas com muitos recursos externos ou onde se deseja uma experiência do usuário rápida.

Tag <style> 

1<style>
2  body {
3    font-family: Arial, sans-serif;
4  }
5</style>
  • A tag <style> é usada para definir folhas de estilo internas. É usada para aplicar estilos CSS a elementos na página, permitindo escrever CSS sem usar arquivos externos.

Tag <script> 

1<script>
2    console.log('Hello, World!');
3</script>
4<script src="script.js"></script>
  • A tag <script> é usada para incorporar código JavaScript em um documento HTML. Você também pode vincular arquivos JavaScript externos, controlando o comportamento dinâmico da página. Utilize o atributo src para especificar o arquivo do script.

Os Atributos async e defer

A tag <script> suporta dois atributos, async e defer, que afetam o tempo de carregamento e execução do script. Normalmente, os scripts são processados sequencialmente pelo navegador, mas o uso desses atributos pode melhorar o desempenho e a experiência de carregamento da página.

O Atributo async 
1<script src="script.js" async></script>
  • Usar o atributo async permite que o script seja carregado de forma assíncrona. O navegador carrega o script em paralelo com outros recursos e o executa imediatamente quando o carregamento é concluído.
  • async é mais adequado para scripts independentes e é usado quando o script não depende do carregamento de outros scripts ou do DOM.
O Atributo defer 
1<script src="script.js" defer></script>
  • Usar o atributo defer permite que o script seja carregado de forma assíncrona, mas executado após a análise do HTML estar concluída. A execução do script não bloqueia a exibição da página, melhorando assim a experiência do usuário.
  • defer é eficaz quando os scripts precisam ser executados após o DOM estar totalmente carregado. Por exemplo, é adequado quando você deseja que o script seja executado após todo o layout e os elementos da página terem sido carregados.

Política de CORS e o Atributo crossorigin

Ao carregar scripts externos, restrições de segurança podem ser impostas com base na Política de Mesma Origem (Same-Origin Policy). Nesses casos, o atributo crossorigin pode ser usado para permitir o compartilhamento de recursos.

1<script src="https://example.com/script.js" crossorigin="anonymous"></script>

O atributo crossorigin pode ser configurado com os seguintes dois valores:.

  • anonymous: Envia requisições sem incluir credenciais.
  • use-credentials: Envia requisições incluindo credenciais.

Atributo type

A tag <script> pode usar o atributo type para especificar o tipo de script. Por padrão, JavaScript é usado, mas você também pode especificar certos tipos de scripts (por exemplo, JavaScript do tipo módulo ou linguagem de template).

Módulos JavaScript 
1<script type="module" src="module.js"></script>

  • Desde o ECMAScript 2015 (ES6), os módulos JavaScript foram introduzidos, permitindo que o código seja dividido em módulos, aumentando a reutilização. Ao especificar type="module", você pode tratar o script como um módulo.

  • Os módulos podem ser divididos em outros módulos usando import e export.

Scripts Não-JavaScript 
1<script type="application/ld+json">
2{
3  "@context": "https://schema.org",
4  "@type": "Organization",
5  "name": "Example Inc.",
6  "url": "https://www.example.com"
7}
8</script>
  • Scripts além de JavaScript também podem ser especificados dentro da tag <script>. Por exemplo, use type="application/ld+json" ao descrever dados estruturados como JSON-LD. Aqui, JSON-LD é um formato que estrutura dados em uma página da web, permitindo que motores de busca e outros aplicativos entendam os dados mais profundamente.

Notas sobre o Uso da Tag <script>

  • Ordem dos Scripts: Bibliotecas das quais os scripts dependem devem ser carregadas antes dos scripts dependentes. Por exemplo, scripts que usam jQuery devem ser carregados após o próprio jQuery.
  • Otimização de Desempenho: Para evitar afetar a velocidade de carregamento da página, carregue scripts apenas quando necessário e evite executar scripts desnecessários.
  • Medidas de Segurança: Ao usar scripts externos, certifique-se de que eles sejam carregados de fontes confiáveis para evitar a incorporação de scripts maliciosos.

Tag <base> 

1<base href="https://example.com/">
  • A tag <base> define a URL base para todos os URLs relativos no documento. A URL especificada no atributo href torna-se a base para caminhos relativos em links e imagens. Geralmente é usada apenas uma vez por página.

Tag <noscript> 

1<noscript>Your browser does not support JavaScript!</noscript>
  • A tag <noscript> define o conteúdo que é exibido quando o JavaScript está desativado no navegador. É usada para fornecer conteúdo alternativo para ambientes onde o JavaScript não é suportado.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Validação de FormulárioTags Relacionadas a Informações Meta