Tag HTML <meta>
Exemplo
Descreva metadados em um documento HTML:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta
name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A <meta>tag define metadados sobre um documento HTML. Metadados são dados (informações) sobre dados.
<meta>tags sempre vão dentro do elemento <head> e são normalmente usadas para especificar o conjunto de caracteres, descrição da página, palavras-chave, autor do documento e configurações da janela de visualização.
Os metadados não serão exibidos na página, mas podem ser analisados por máquina.
Os metadados são usados por navegadores (como exibir conteúdo ou recarregar a página), mecanismos de pesquisa (palavras-chave) e outros serviços da web.
Existe um método para permitir que os web designers assumam o controle da viewport (a área visível do usuário de uma página da web), por meio da <meta>tag (consulte o exemplo "Configurando a viewport" abaixo).
Suporte ao navegador
| Element | |||||
|---|---|---|---|---|---|
| <meta> | Yes | Yes | Yes | Yes | Yes |
Atributos
| Attribute | Value | Description |
|---|---|---|
| charset | character_set | Specifies the character encoding for the HTML document |
| content | text | Specifies the value associated with the http-equiv or name attribute |
| http-equiv | content-security-policy content-type default-style refresh |
Provides an HTTP header for the information/value of the content attribute |
| name | application-name author description generator keywords viewport |
Specifies a name for the metadata |
Atributos Globais
A <meta>tag também suporta os Atributos Globais em HTML .
Mais exemplos
Defina palavras-chave para motores de busca:
<meta name="keywords" content="HTML, CSS, JavaScript">
Defina uma descrição da sua página da web:
<meta name="description" content="Free Web tutorials for
HTML and CSS">
Defina o autor de uma página:
<meta name="author" content="John Doe">
Atualize o documento a cada 30 segundos:
<meta http-equiv="refresh" content="30">
Configurando a janela de visualização para que seu site fique bem em todos os dispositivos:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configurando a janela de visualização
A janela de visualização é a área visível do usuário de uma página da web. Varia de acordo com o dispositivo - será menor em um telefone celular do que em uma tela de computador.
Você deve incluir o seguinte <meta>elemento em todas as suas páginas da web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Isso fornece ao navegador instruções sobre como controlar as dimensões e o dimensionamento da página.
A width=device-widthparte define a largura da página para seguir a largura da tela do dispositivo (que varia de acordo com o dispositivo).
A initial-scale=1.0parte define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador.
Aqui está um exemplo de uma página da web sem a meta tag viewport e a mesma página da web com a meta tag viewport:
Dica: Se você estiver navegando nesta página com um telefone ou tablet, você pode clicar nos dois links abaixo para ver a diferença.
Você pode ler mais sobre a viewport em nosso Responsive Web Design - The Viewport Tutorial .
Páginas relacionadas
Tutorial HTML: Cabeçalho HTML
Referência HTML DOM: Meta Object
Configurações padrão de CSS
Nenhum.