
HTML, ou Linguagem de Marcação de Hipertexto, é a base de toda página web.
Quando acessamos um site, é o HTML que estrutura e organiza o conteúdo, permitindo que o navegador o interprete corretamente.
Dentro dessa estrutura, as tags são responsáveis por definir como os elementos serão exibidos.
HTML é considerado um pré-requisito essencial para quem está começando no desenvolvimento de soluções web.
Por isso, merece atenção especial no aprendizado, entendendo o HTML de forma mais profunda.
O Skills Tecnológicas explicará o conteúdo de forma dividida, permitindo que você entenda os conceitos de maneira clara e prática.
Hoje, vamos explorar as funções e a importância de três tags fundamentais: <head>
, <body>
e <footer>
.
Sumário do Artigo
O que é uma tag em HTML?
Entendendo o HTML: Tags head, body e footer, Antes de nos aprofundarmos, é importante relembrar o conceito de tag.
Tags em HTML são comandos que indicam ao navegador como exibir determinado conteúdo.
Elas são delimitadas por colchetes angulares (< >
) e muitas vezes têm uma tag de abertura e outra de fechamento, como em <p>
e </p>
.
Algumas são auto fechadas, como <img />
.
Agora que relembramos o básico, vamos falar das tags específicas.
Confira também:
A tag head: Entendendo o HTML
A tag <head>
contém metadados sobre a página.
Esses dados não são visíveis diretamente ao usuário, mas são essenciais para que o navegador e os motores de busca entendam o conteúdo da página.
Dentro dela, podemos incluir:
- Título da página: O título é exibido na aba do navegador e é definido pela tag
<title>
.
<head> <title>Meu Site Incrível</title> </head>
- Metadados: Usamos a tag
<meta>
para especificar informações como codificação de caracteres, descrição da página e palavras-chave para SEO.
<meta charset="UTF-8">
<meta name="description" content="Um blog sobre tecnologia">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="João Silva">
- Links para estilos e fontes externas: Se você deseja estilizar a página, é no
<head>
que serão definidos os arquivos CSS externos.
<link rel="stylesheet" href="styles.css">
- Scripts necessários para carregamento inicial: Alguns scripts que precisam ser lidos antes do corpo da página são colocados no
<head>
.
<script src="script.js"></script>
Esses elementos ajudam a definir como a página é exibida, como ela é encontrada por motores de busca e como ela interage com outros arquivos.
A tag <head>
é, literalmente, a “cabeça” de uma página HTML. Ela controla diversas interações e define as regras e o significado da página.
Dominar os elementos e tags utilizados dentro da <head>
é essencial para garantir um SEO eficiente e poderoso.
A tag body: Entendendo o HTML
O <body>
é o coração visível do HTML. Tudo o que você vê em uma página é definido dentro dessa tag.
É aqui que os elementos de conteúdo são organizados, incluindo textos, imagens, vídeos, links e muito mais.
Exemplo básico:
<body>
<h1>Bem-vindo ao Meu Site</h1>
<p>Este é um exemplo simples de página HTML.</p>
<img src="imagem.jpg" alt="Uma bela paisagem">
</body>
Dentro do <body>
, você pode usar diversas outras tags para estruturar o conteúdo:
Títulos e textos:
- Use
<h1>
até<h6>
para títulos.
<h1>Titulo 01</h1>
<h2>Titulo 02</h2>
<h3>Titulo 03</h3>
<h4>Titulo 04</h4>
<h5>Titulo 05</h5>
<h6>Titulo 06</h6>
- Para parágrafos, use
<p>
.
<p></p>
<img src="caminho.jpg" alt="Descrição">
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
Links e botões:
- Para links, utilize
<a>
. - Para botões interativos, use
<button>
.
<form action="submit.php" method="post">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<button type="submit">Enviar</button>
</form>
A tag <body>
tem a função de definir o “corpo” de uma página HTML.
Ela é responsável por apresentar o conteúdo visível de uma página web, mas depende de suas tags filhas para funcionar adequadamente.
Essas tags filhas incluem seções, títulos, parágrafos, links, botões e muitos outros elementos.
A tag footer: Entendendo o HTML
A tag <footer>
é usada para incluir informações adicionais no final de uma página.
Embora ela não seja obrigatória, sua utilização melhora a organização e a experiência do usuário.
Dentro do <footer>
, é comum encontrar:
- Créditos e direitos autorais:
<footer>
<p>© 2025 Meu Site Incrível. Todos os direitos reservados.</p>
</footer>
- Links de navegação: Inclua links para outras páginas ou seções relevantes do site.
<footer>
<nav>
<a href="sobre.html">Sobre</a> |
<a href="contato.html">Contato</a>
</nav>
</footer>
- Ícones de redes sociais: Utilize imagens ou ícones para redirecionar para redes sociais.
<footer>
<a href="https://facebook.com">
<img src="facebook-icon.png" alt="Facebook">
</a>
</footer>
- Informações de contato: Como e-mail ou número de telefone.
<footer>
<p>Email: contato@meusite.com</p>
<p>Telefone: (11) 1234-5678</p>
</footer>
Estrutura Completa de uma Página HTML: Entendendo o HTML
Agora que entendemos cada uma das tags, vejamos como elas funcionam juntas em uma estrutura completa:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo Completo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Bem-vindo ao Meu Site</h1>
<nav>
<a href="#sobre">Sobre</a>
<a href="#servicos">Serviços</a>
<a href="#contato">Contato</a>
</nav>
</header>
<section id="sobre">
<h2>Sobre Nós</h2>
<p>Somos uma empresa dedicada à tecnologia.</p>
</section>
<section id="servicos">
<h2>O que fazemos</h2>
<ul>
<li>Desenvolvimento Web</li>
<li>Design Gráfico</li>
<li>Consultoria em TI</li>
</ul>
</section>
<footer>
<p>© 2025 Meu Site Incrível. Todos os direitos reservados.</p>
</footer>
</body>
</html>
Missão cumprida! Agora essas três tags fazem parte do seu conhecimento.
Este é apenas o primeiro passo para dominar as tags HTML.
Para continuar explorando as demais tags, não deixe de conferir Entendendo o HTML parte 2, continuação deste conteúdo.
Conclusão: Entendendo o HTML
Compreender o papel das tags <head>
, <body>
e <footer>
é essencial para criar páginas web bem estruturadas e funcionais.
Cada uma delas desempenha uma função específica que, juntas, garantem uma experiência completa para o usuário e um bom desempenho nos navegadores e motores de busca.
Esperamos que este guia tenha ajudado você a entender melhor como utilizá-las!