A HTML <head>elemento é um recipiente para os seguintes elementos: <title>, <style>, <meta>, <link>, <script>, e <base>.
O elemento HTML <head>
O <head>elemento é um contêiner para metadados (dados sobre dados) e é colocado entre a <html>marca e a <body>marca.
Metadados HTML são dados sobre o documento HTML. Os metadados não são exibidos.
Os metadados geralmente definem o título do documento, o conjunto de caracteres, os estilos, os scripts e outras metainformações.
O elemento HTML <title>
O <title>elemento define o título do documento. O título deve ser somente texto e é mostrado na barra de título do navegador ou na guia da página.
A tag <title> é necessária nos documentos HTML!
O conteúdo do título da página é muito importante para a otimização de mecanismos de busca (SEO)! O título da página é usado pelos algoritmos do mecanismo de pesquisa para decidir a ordem ao listar páginas nos resultados da pesquisa.
O <title>elemento:
define um título na barra de ferramentas do navegador
fornece um título para a página quando ela é adicionada aos favoritos
exibe um título para a página nos resultados do mecanismo de pesquisa
Portanto, tente tornar o título o mais preciso e significativo possível!
Um documento HTML simples:
<!DOCTYPE html> <html> <head> <title>A Meaningful Page Title</title> </head> <body> The content of the document...... </body> </html>
O elemento HTML <style>
O <style>elemento é usado para definir informações de estilo para uma única página HTML:
Exemplo
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</htm
O elemento HTML <link>
O <link>elemento define o relacionamento entre o documento atual e um recurso externo.
A <link> tag é mais frequentemente usada para vincular a folhas de estilo externas:
Exemplo
<link rel="stylesheet" href="mystyle.css">
O elemento HTML <meta>
O <meta>elemento geralmente é usado 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 são usados pelos navegadores (como exibir conteúdo ou recarregar página), pelos mecanismos de pesquisa (palavras-chave) e outros serviços da Web.
Exemplos
Defina o conjunto de caracteres usado:
<meta charset="UTF-8">
Defina palavras-chave para mecanismos de pesquisa:
<meta name="keywords" content="HTML, CSS, JavaScript">
Defina uma descrição da sua página da web:
<meta name="description" content="Free Web tutorials">
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 tornar seu site com boa aparência em todos os dispositivos:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Exemplo completo
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
Configurando a janela de exibiçã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 na tela do 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 a escala da página.
A width=device-width peça 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.0 peça 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 da viewport e a mesma página da web com a meta tag da viewport:
Dica: se você estiver navegando nesta página com um telefone ou tablet, poderá clicar nos dois links abaixo para ver a diferença.
<!DOCTYPE html> <html> <body> <p><b>xxxxx x x x x x x x x x x</b></p> <img src="https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/06/tutorial-de-html-introducao-300x133.png" alt="Chania" width="460" height="345"> <p> xxx x x x xx x x x x x x xx xx x x xxxxxxx x x x xx x x x x x x xx xx x x xxxxxxx x x x xx x x x x x x xx xx x x xxxxxxx x x x xx x x x x x x xx xx x x xxxxxxx x x x xx x x x x x x xx xx x x xxxxxxx x x x xx x x x x x x xx xx x x xxxxxxx x x x xx x x x x x x xx xx x x xxxx </p> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<p><b>xxxxx x x x x x x x x x xxxxxx x x x x x x x x x xxxxxx x x x x x x x x x x</b></p>
<img src="https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/06/tutorial-de-html-introducao-300x133.png" alt="Chania" width="460" height="345">
<p>
xxx x x x xx x x x x x x
xx
xx
x
x
xxxxxxx x x x xx x x x x x x
xx
xx
x
x
xxxxxxx x x x xx x x x x x x
xx
xx
x
x
xxxxxxx x x x xx x x x x x x
xx
xx
x
x
xxxxxxx x x x xx x x x x x x
xx
xx
x
x
xxxxxxx x x x xx x x x x x x
xx
xx
x
x
xxxx
</p>
</body>
</html>
O elemento HTML <script>
O <script>elemento é usado para definir JavaScripts do lado do cliente.
O seguinte JavaScript grava “Olá JavaScript!” em um elemento HTML com id = “demo”:
Exemplo
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
O elemento HTML <base>
O <base>elemento especifica o URL base e / ou o destino para todos os URLs relativos em uma página.
A <base>tag deve ter um href ou um atributo de destino presente ou ambos.
Só pode haver um único <base> elemento em um documento!
<head>
<base href="https://www.coloqueseudominio.com.br/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
Resumo do capítulo
O <head>elemento é um contêiner para metadados (dados sobre dados)
O <head>elemento é colocado entre a <html>tag e a <body>tag
O <title>elemento é obrigatório e define o título do documento
O <style>elemento é usado para definir informações de estilo para um único documento
A <link> tag é mais frequentemente usada para vincular a folhas de estilo externas
O <meta>elemento geralmente é usado para especificar o conjunto de caracteres, descrição da página, palavras-chave, autor do documento e configurações da janela de visualização
O <script>elemento é usado para definir JavaScripts do lado do cliente
O <base>elemento especifica o URL base e / ou o destino para todos os URLs relativos em uma página
<< Anterior JavaScript em HTML
Deixe um comentário