Entendendo o HTML: Tags head, body e footer

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>.

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.

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> é 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>&copy; 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>&copy; 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!

Marcos R.S
Marcos R.S

Olá, pessoal! Sou Marcos, apaixonado por aprender, especialmente sobre tecnologia. Estou sempre em busca de lapidar os conhecimentos que já possuo e adquirir novos. Atuo com análise e desenvolvimento de sistemas, sou graduando em Sistemas de Informação e tenho formação técnica em Informática.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *