Explorando a Tag <head></head> (Tudo que precisa saber sobre a tag head em único artigo)

9 min readMay 17, 2024

quick heads-up , this page is updated constantly ,so recommend you to keep an eye, mainly at the end you'll find always news stuff

A tag head também conhecida como o cabeça da pagina ou seja todas configurações relacionado ao nosso documento éfeita nessa tag , configurações tais como ,informar qual o charset do documento , estilização do documento , o tituto , icone, device-width-scale do a url base do documento é tudo feito aqui na cabeça(head) do documento.

1. `<base>`

Caso de uso: Especifica a URL base para todos os URLs relativos dentro do documento HTML.
Explicação: A tag <base> define a URL base para resolver todas as URLs relativos (como atributos href ou src) dentro do documento.

É útil para especificar uma URL comum para recursos como imagens, folhas de estilo ou scripts.

Exemplo (definindo a URL base):

<head>
    <base href="https://www.exemplo.com/">
</head>

explicando mais a fundo

A tag <base> no HTML é usada para definir uma URL base para todos os URLs relativos em um documento. Isso significa que todos os links relativos (como aqueles em tags <a>, <img>, <link>, etc.) serão considerados em relação à URL base especificada pela tag <base>. A tag <base> deve ser colocada dentro da tag <head> e é usada principalmente para simplificar o gerenciamento de links relativos em uma página.

Estrutura Básica:

<head>
    <base href="https://www.exemplo.com/">
</head>

<head>
  <base href="/">
</head>

Exemplo 1: Links Relativos:

<!DOCTYPE html>
<html lang="pt">
<head>
    <base href="https://www.exemplo.com/">
    <title>Exemplo de URL Base</title>
</head>
<body>
    <a href="pagina1.html">Página 1</a>
    <a href="subdiretorio/pagina2.html">Página 2</a>
</body>
</html>

Aqui, pagina1.html será tratado como https://www.exemplo.com/pagina1.html.
subdiretorio/pagina2.html será tratado como https://www.exemplo.com/subdiretorio/pagina2.html.

Exemplo 2: Imagens Relativas

<!DOCTYPE html>
<html lang="pt">
<head>
    <base href="https://www.exemplo.com/">
    <title>Exemplo com Imagens</title>
</head>
<body>
    <img src="imagens/foto1.jpg" alt="Foto 1">
    <img src="imagens/foto2.jpg" alt="Foto 2">
</body>
</html>

imagens/foto1.jpg será tratado como https://www.exemplo.com/imagens/foto1.jpg.
imagens/foto2.jpg será tratado como https://www.exemplo.com/imagens/foto2.jpg.

2. `<meta>`

Caso de uso: Fornece metadados sobre o documento HTML, como codificação de caracteres, configurações de viewport e informações de autoria.
Explicação: As meta tags transmitem informações importantes sobre a página da web para navegadores e mecanismos de busca. Atributos comuns incluem charset, viewport, description, keywords e author.

Exemplo (definindo a codificação de caracteres):

<head>
    <meta charset="UTF-8">
</head>

3. `<link>`

Caso de uso: Especifica recursos externos vinculados ao documento HTML, como folhas de estilo, favicons ou fontes da web.
Explicação: A tag <link> estabelece relacionamentos entre o documento atual e recursos externos. É comumente usada para vincular folhas de estilo CSS para estilizar a página da web ou para especificar um favicon(A favicon, short for “favorite icon,” is a small icon that represents a website) para o site.

Exemplo (vinculando uma folha de estilo):

<head>
    <link rel="stylesheet" href="estilos.css">
</head>

Exemplo 2: Carregando Fontes Localmente

Para carregar fontes locais, primeiro você precisa ter os arquivos de fonte (por exemplo, .woff, .woff2, .ttf, etc.) disponíveis em seu servidor ou diretório de projeto. Em seguida, você pode usar a tag <link> para referenciá-los.

Estrutura de Arquivos

meu-projeto-name/
├── css/
│   └── estilos.css
├── fonts/
│   └── minha-fonte.woff2
└── index.html;

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <title>Exemplo de Fontes Locais</title>
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    <h1>Exemplo com Fonte Local</h1>
    <p>Este é um exemplo de texto usando uma fonte carregada localmente.</p>
</body>
</html>

codigo dentro do arquivo estilos.css

@font-face {
    font-family: 'MinhaFonte';
    src: url('../fonts/minha-fonte.woff2') format('woff2');
}

body {
    font-family: 'MinhaFonte', sans-serif;
}

Exemplo 3: Carregando Fontes da Web (Google Fonts)

Para carregar fontes da web, você pode usar serviços como o Google Fonts, que permite incluir fontes através de uma URL.

Exemplo usando Google Fonts

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <title>Exemplo de Fontes da Web</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
        }
    </style>
</head>
<body>
    <h1>Exemplo com Fonte da Web</h1>
    <p>Este é um exemplo de texto usando uma fonte carregada da web.</p>
</body>
</html>

4. `<script>`

Caso de uso: Define código JavaScript do lado do cliente ou links para arquivos JavaScript externos.
Explicação: A tag <script> é usada para incorporar código JavaScript diretamente no documento HTML ou para referenciar arquivos JavaScript externos. Ela permite interações dinâmicas e comportamento na página da web.

Exemplo (incorporando código JavaScript):

<head>
    <script>
        console.log("Olá, mundo!");
    </script>
</head>

5. `<style>`

Caso de uso: Contém estilos CSS incorporados para aplicar ao documento HTML.
Explicação: A tag <style> permite que você defina regras CSS diretamente dentro do documento HTML. Geralmente é usada para pequenos conjuntos de estilos ou para CSS crítico que precisa ser aplicado antes das folhas de estilo externas serem carregadas.

Exemplo (incorporando estilos CSS):

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
    </style>
</head>

6. `<noscript>`

Caso de uso: Fornece conteúdo alternativo para usuários com JavaScript desativado.
Explicação: A tag <noscript> contém conteúdo que é exibido quando o JavaScript não é suportado ou habilitado no navegador. Permite que os desenvolvedores forneçam conteúdo de fallback ou funcionalidade alternativa para usuários sem JavaScript.

Exemplo (fornecendo conteúdo alternativo):

primeiro desablite o javascript para poder reproduzir este exemplo

<head>
    <noscript>
        <p>Por favor, habilite o JavaScript para visualizar este site.</p>
    </noscript>
</head>

para caso de teste : Aqui está como você pode desabilitar o JavaScript no Google Chrome e no Mozilla Firefox:

Google Chrome

Método 1: Usando as Configurações do Chrome

Abra o Chrome e clique nos três pontos verticais no canto superior direito para abrir o menu.
Vá para Configurações.
Role para baixo e clique em Privacidade e segurança.
Clique em Configurações do site.
Role para baixo até a seção Conteúdo e clique em JavaScript.
Alterne o interruptor para Bloqueado para desabilitar o JavaScript.

Método 2: Usando as Ferramentas de Desenvolvedor

Abra o Chrome e pressione Ctrl+Shift+I (Windows/Linux) ou Cmd+Opt+I (Mac) para abrir as Ferramentas de Desenvolvedor.
Clique nos três pontos verticais na janela das Ferramentas de Desenvolvedor.
Vá para Configurações.
No menu à esquerda, clique em Depurador.
Marque a caixa que diz Desativar JavaScript.

Mozilla Firefox

Método 1: Usando as Configurações do Firefox

Abra o Firefox e digite about:config na barra de endereços e pressione Enter.
Clique em Aceitar o risco e continuar se aparecer uma mensagem de aviso.
Na barra de pesquisa no topo, digite javascript.enabled.
Clique duas vezes na preferência javascript.enabled para alterar seu valor para false.

Método 2: Usando Complementos

Abra o Firefox e vá para o Gerenciador de Complementos pressionando Ctrl+Shift+A (Windows/Linux) ou Cmd+Shift+A (Mac).
Pesquise um complemento como NoScript que permite controlar a execução do JavaScript.
Instale o complemento e siga suas instruções para desabilitar o JavaScript em sites específicos ou globalmente.

7. Outras Meta Tags:

Caso de uso: Várias outras meta tags podem ser usadas para fins específicos, como definir o viewport, especificar o idioma do documento, definir o autor e controlar o comportamento de cache.

Exemplo (definindo viewport):

just in case you don't know what viewport means (the visible area through which users interact with content on a display device or within a software application)

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Exemplo (especificando idioma):

<head>
    <meta http-equiv="Content-Language" content="pt">
</head>

Exemplo (definindo autor):

<head>
    <meta name="author" content="Fulano de Tal">
</head>

Exemplo (controlando o cache):

<head>
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
</head>

Entendendo a tag meta e suas propriedades

Aqui está a tradução dos atributos e suas respectivas finalidades para a tag <meta>:

1. `charset`

Finalidade: Especifica a codificação de caracteres do documento HTML.
Exemplo: <meta charset="UTF-8">

2. `name`

Finalidade: Define o nome dos metadados.
Exemplo: <meta name="description" content="Uma breve descrição da página.">

3. `content`

Finalidade: Especifica o valor dos metadados.
Exemplo: <meta name="viewport" content="width=device-width, initial-scale=1.0">

4. `http-equiv`

Finalidade: Fornece um cabeçalho HTTP para a informação/valor do atributo content.
Exemplo: <meta http-equiv="refresh" content="30">
entendendo o exemplo acima:
O exemplo <meta http-equiv="refresh" content="30"> é um uso específico da tag <meta> no HTML para configurar a página de modo a ser automaticamente atualizada (ou redirecionada) após um intervalo de tempo especificado. Vamos detalhar cada parte desse exemplo:
Entendento Estrutura e Atributos:
A tag <meta> é usada para definir metadados sobre o documento HTML, como informações sobre o autor, descrição da página, palavras-chave, entre outros.
http-equiv="refresh": O atributo http-equiv é utilizado para fornecer um cabeçalho HTTP para o valor do atributo content.
O valor "refresh" indica que o navegador deve atualizar ou recarregar a página após um determinado tempo especificado no atributo content. content="30": O atributo content especifica o valor associado ao atributo http-equiv.
No caso do http-equiv="refresh", o valor do content representa o número de segundos após os quais a página deve ser atualizada ou recarregada.
No exemplo dado, content="30" significa que a página será recarregada automaticamente a cada 30 segundos.

5. `scheme`

Finalidade: Especifica o esquema de URL do valor dos metadados.
Exemplo:

<meta name="format-detection" content="telephone=no">

Propósito: Impede que os navegadores e dispositivos detectem e formatem números de telefone automaticamente.
Uso Comum: Evitar que números de telefone sejam convertidos automaticamente em links clicáveis em dispositivos móveis.

6. `property`

Finalidade: Define a propriedade dos metadados para o protocolo Open Graph.
Exemplo:
Propósito: Define o título da página para o protocolo Open Graph, que é usado por plataformas de mídia social para obter informações quando a página é compartilhada.
Uso Comum: Melhorar a forma como os links são exibidos em redes sociais.
O protocolo Open Graph é uma forma de adicionar informações extras nas páginas da web para que, quando essas páginas sejam compartilhadas em redes sociais, elas apareçam de forma mais bonita e organizada. Basicamente, é como adicionar etiquetas em uma página para dizer às redes sociais o que mostrar.

Explicação Simples:

O que é?: É um conjunto de regras que ajuda a melhorar como links são exibidos nas redes sociais.
Como funciona?: Você coloca algumas tags especiais no código da sua página web.
Para que serve?: Quando alguém compartilha sua página no Facebook, Twitter ou outras redes, a postagem vai mostrar um título, uma descrição e uma imagem bonitinhos.

Exemplo Prático:

Imagine que você tem uma página sobre um livro que você escreveu. Usando o Open Graph, você pode adicionar tags que dizem:

Título: “Meu Livro Incrível”
Descrição: “Este é um livro sobre aventuras incríveis!”
Imagem: Uma imagem bonita da capa do livro

Assim, quando alguém compartilhar o link da sua página no Facebook, a postagem vai mostrar essas informações direitinho.

Exemplo de Código:

Aqui está como você faria isso no código HTML da sua página:

<head>
    <meta property="og:title" content="Meu Livro Incrível">
    <meta property="og:description" content="Este é um livro sobre aventuras incríveis!">
    <meta property="og:image" content="https://meusite.com/capa-do-livro.jpg">
    <meta property="og:url" content="https://meusite.com/meu-livro">
</head>

Por que Usar?

Aparência Melhor: Links compartilhados parecem mais profissionais e atraentes.
Maior Engajamento: As pessoas são mais propensas a clicar em links que têm uma boa aparência.
Controle do Conteúdo: Você decide o que será mostrado, em vez de deixar a rede social adivinhar.

Entendendo o que é Open Graph

O protocolo Open Graph é uma ferramenta útil para melhorar a forma como suas páginas são apresentadas nas redes sociais, garantindo que apareçam de maneira bonita e atraente quando compartilhadas. É como dar um toque especial para que mais pessoas cliquem e visitem seu site.

O protocolo Open Graph é uma forma de adicionar informações extras nas páginas da web para que, quando essas páginas sejam compartilhadas em redes sociais, elas apareçam de forma mais bonita e organizada. Basicamente, é como adicionar etiquetas em uma página para dizer às redes sociais o que mostrar.

7. `itemprop`

Finalidade: Especifica a propriedade de um item.
Exemplo:

<meta itemprop="name" content="Nome do Produto">

8. `content-language`

Finalidade: Define o idioma principal do conteúdo.
Exemplo: <meta http-equiv="Content-Language" content="en">

9. `viewport`

Finalidade: Define as configurações do viewport para design responsivo.
Exemplo: <meta name="viewport" content="width=device-width, initial-scale=1.0">

10. `robots`

Finalidade: Controla o comportamento de rastreamento e indexação dos motores de busca.
Exemplo: <meta name="robots" content="index, follow">

11. `author`

Finalidade: Especifica o autor do documento.
Exemplo: <meta name="author" content="John Doe">

12. `keywords`

Finalidade: Fornece palavras-chave relevantes para o conteúdo do documento.
Exemplo: <meta name="keywords" content="HTML, CSS, JavaScript">

13. `description`

Finalidade: Fornece um breve resumo do conteúdo do documento.
Exemplo: <meta name="description" content="Esta é uma descrição da página.">

14. `generator`

Finalidade: Indica o software usado para gerar o documento.
Exemplo: <meta name="generator" content="WordPress">

15. `referrer`

Finalidade: Especifica a política de referência para o documento.
Exemplo: <meta name="referrer" content="no-referrer">

Update 17/06

Meta Tags e Links

<meta name="theme-color" content="#242526">

Explicação: Define a cor da barra de navegação e guias no navegador.

2.<link rel="manifest" id="MANIFEST_LINK" href="/data/manifest/" crossorigin="use-credentials">

Explicação: Linka um arquivo de manifesto que descreve como o aplicativo web deve se comportar quando instalado na tela inicial de um dispositivo.

3. <meta name="bingbot" content="noarchive">

Explicação: Diz aos rastreadores do Bing para não arquivar a página.

Explorando a Tag <head></head> (Tudo que precisa saber sobre a tag head em único artigo)

1. `<base>`

2. `<meta>`

3. `<link>`

Exemplo 2: Carregando Fontes Localmente

Estrutura de Arquivos

Exemplo 3: Carregando Fontes da Web (Google Fonts)

4. `<script>`

5. `<style>`

6. `<noscript>`

Método 2: Usando as Ferramentas de Desenvolvedor

7. Outras Meta Tags:

Entendendo a tag meta e suas propriedades

1. `charset`

2. `name`

3. `content`

4. `http-equiv`

5. `scheme`

6. `property`

Explicação Simples:

Exemplo Prático:

Exemplo de Código:

7. `itemprop`

8. `content-language`

9. `viewport`

10. `robots`

11. `author`

12. `keywords`

13. `description`

14. `generator`

15. `referrer`

Meta Tags e Links

Written by hipster' Santos

No responses yet

Explorando a Tag <head></head> (Tudo que precisa saber sobre a tag head em único artigo)

1. <base>

2. <meta>

3. <link>

Exemplo 2: Carregando Fontes Localmente

Estrutura de Arquivos

Exemplo 3: Carregando Fontes da Web (Google Fonts)

4. <script>

5. <style>

6. <noscript>

Método 2: Usando as Ferramentas de Desenvolvedor

7. Outras Meta Tags:

Entendendo a tag meta e suas propriedades

1. charset

2. name

3. content

4. http-equiv

5. scheme

6. property

Explicação Simples:

Exemplo Prático:

Exemplo de Código:

7. itemprop

8. content-language

9. viewport

10. robots

11. author

12. keywords

13. description

14. generator

15. referrer

Meta Tags e Links

Written by hipster' Santos

No responses yet

1. `<base>`

2. `<meta>`

3. `<link>`

4. `<script>`

5. `<style>`

6. `<noscript>`

1. `charset`

2. `name`

3. `content`

4. `http-equiv`

5. `scheme`

6. `property`

7. `itemprop`

8. `content-language`

9. `viewport`

10. `robots`

11. `author`

12. `keywords`

13. `description`

14. `generator`

15. `referrer`