Etiqueta <meta> de HTML

Definição e uso

<meta> O elemento define metadados sobre a documentação HTML. Os metadados são dados sobre dados (informação).

<meta> O elemento sempre está localizado Elemento <head> Dentro, geralmente usado para especificar o conjunto de caracteres, descrição da página, palavras-chave, autor do documento e configuração da viewport:

Os meta-dados não são exibidos na página, mas podem ser analisados por máquinas.

Os meta-dados são usados por navegadores (como exibir conteúdo ou recarregar a página), motores de busca (palavras-chave) e outros serviços de rede.

Dica:Os elementos meta têm várias aplicações diferentes e podem haver vários elementos meta em um documento HTML.

Dica:Através <meta> Há um método que permite que os designers de páginas da web controlem a viewport (área visível do usuário no site) (veja o exemplo a seguir "Configuração da viewport").

Atenção:Cada elemento meta pode ser usado para um único propósito. Se desejar usar várias características, deve adicionar vários elementos meta no elemento head.

Veja também:

Tutorial HTML:Cabeçalho HTML

Manual de referência do DOM HTML:Objeto Meta

Exemplo

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Tutoriais gratuitos da Web">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Bill Gates">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Experimente você mesmo

Atributo

Atributo Valor Descrição
charset Conjunto de caracteres Define o código de caracteres da documentação HTML.
content Texto Define o valor associado ao atributo http-equiv ou name.
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 Fornecer informações/valores para o atributo content com cabeçalhos HTTP.
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 Determinar o nome dos metadados.

Atributos globais

<meta> A etiqueta também suporta Atributos globais do HTML.

O elemento meta tem três usos típicos:

  1. Especificar pares de metadados nome/valor
  2. Declarar a codificação de caracteres
  3. Simulação de campo de cabeçalho HTTP

1: Especificar vários pares de metadados nome/valor

O elemento meta pode ser definido usando pares de nome/valor para metadados, para isso são usados os atributos name e content.

Definir palavras-chave para motores de busca:

<meta name="keywords" content="HTML, CSS, JavaScript">

Definir uma descrição sobre a página da web:

<meta name="description" content="Free Web tutorials for HTML and CSS">

Definir o autor da página:

<meta name="author" content="John Doe">

Definir a visualização para melhorar a aparência do site em vários dispositivos:

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

2: Declarar a codificação de caracteres

Use o atributo charset para declarar que a página usa a codificação UTF-8:

<meta charset="UTF-8">

3: Simulação de campo de cabeçalho HTTP

Usando o atributo http-equiv e o atributo content, atualize o documento a cada 30 segundos:

<meta http-equiv="refresh" content="30">

Mudanças no HTML5

O atributo charset foi adicionado no HTML5.

No HTML4, o atributo http-equiv pode ter vários valores diferentes. No HTML5, apenas os valores mencionados na página podem ser usados.

O atributo scheme do HTML4 já não é usado no HTML5.

Além disso, agora não é mais usado o elemento meta para especificar o idioma da página da web.

definir a visualização

O HTML5 introduziu um método que permite aos designers da Web <meta> etiquetas em todas as páginas para controlar a visualização.

Você deve incluir os seguintes <meta> Elemento de visualização:

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

Ele fornece instruções ao navegador sobre como controlar o tamanho da página e a proporção de zoom.

width=device-width Configurações definirão a largura da página para seguir a largura da tela do dispositivo (dependendo do dispositivo).

Quando o navegador carregar a página pela primeira vezinitial-scale=1.0 Configurações iniciais de escala de zoom.

A seguir estão exemplos de páginas da web sem meta tag de viewport e com meta tag de viewport:

Dica:Se você estiver navegando essa página em um telefone ou tablet, você pode clicar nos dois links abaixo para ver as diferenças.



Sem meta tag de viewport


Com meta tag de viewport

Configurações CSS padrão

Nenhum.

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte