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!
