🧱 HTML

HTML: Introdução, o que é e como funciona?

Tutorial com passos estruturados

• 5 min de leitura

HTML: Introdução, o que é e como funciona?

O HTML (Hypertext Markup Language) é a linguagem de marcação fundamental para a criação de páginas na web. Com ele você estrutura todo o conteúdo de um site — textos, imagens, links, vídeos e muito mais. Neste tutorial você vai entender o que é HTML, como ele funciona, como se relaciona com CSS e JavaScript, e quais ferramentas usar para dar os seus primeiros passos.

O que é HTML?

O HTML, ou Hypertext Markup Language, é uma linguagem de marcação usada para criar a estrutura e o conteúdo de páginas web. Diferente de linguagens de programação como Python ou JavaScript, o HTML não executa lógica nem cria funcionalidades interativas por conta própria. Ele organiza os elementos da página de forma hierárquica por meio de tags, que informam ao navegador o que cada trecho de conteúdo representa e como deve ser exibido.

Como o HTML estrutura as páginas web?

O HTML utiliza tags (ou etiquetas) para definir os elementos de uma página. A maioria das tags funciona em par: uma de abertura (<tag>) e uma de fechamento (</tag>), com o conteúdo no meio. Existem também tags autossuficientes que não precisam ser fechadas, como <img> e <br>.

<p>Isso é um parágrafo.</p>
<img src="foto.jpg" alt="Foto de exemplo">

Estrutura básica de uma página HTML

Todo documento HTML segue uma estrutura padrão. Veja o modelo completo com as principais tags de configuração:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Descrição do site">
    <meta name="keywords" content="palavra-chave, outra palavra-chave">
    <meta name="author" content="Nome do autor">
    <title>Título do documento</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Escreva o conteúdo da página aqui</h1>
    <script src="script.js" defer></script>
</body>
</html>

Explicação da estrutura

  • <!DOCTYPE html>: Declara que o documento segue o padrão HTML5.
  • <html lang="pt-br">: Elemento raiz do documento; o atributo lang define o idioma como português do Brasil.
  • <head>: Cabeçalho do documento — contém metadados, título e links para recursos externos. Seu conteúdo não é exibido na página.
  • <meta charset="UTF-8">: Define a codificação de caracteres como Unicode, garantindo que acentos e símbolos apareçam corretamente.
  • <meta name="viewport" ...>: Configura o layout responsivo para dispositivos móveis.
  • <meta name="description" ...>: Fornece ao Google e outros buscadores uma descrição resumida da página.
  • <meta name="keywords" ...>: Define palavras-chave para os mecanismos de busca.
  • <meta name="author" ...>: Identifica o autor do documento.
  • <title>: Define o título da página, exibido na aba do navegador e nos resultados de busca.
  • <link rel="stylesheet" href="styles.css">: Conecta uma folha de estilos CSS externa ao documento.
  • <body>: Corpo da página — tudo que está aqui é visível para o usuário.
  • <script src="script.js" defer></script>: Carrega um arquivo JavaScript externo; o atributo defer faz o script ser executado somente após o carregamento completo da página.

Exemplos de tags essenciais

Além das tags estruturais, existem várias outras que você usará com frequência:

Títulos e parágrafo:

<h1>Título principal</h1>
<h2>Subtítulo</h2>
<p>Este é um parágrafo de texto.</p>

Listas — utilizadas para organizar informações:

<!-- Lista não ordenada (marcadores) -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Lista ordenada (numerada) -->
<ol>
  <li>Passo 1</li>
  <li>Passo 2</li>
  <li>Passo 3</li>
</ol>

Imagem — exibe uma imagem na página:

<img src="imagem.jpg" alt="Descrição da imagem">

Link — navega para outra página:

<a href="https://www.example.com">Clique aqui</a>

Atributos das tags HTML

Os atributos fornecem informações adicionais sobre um elemento, alterando seu comportamento ou aparência. Eles são escritos dentro da tag de abertura no formato nome="valor". Confira os mais comuns:

id — identifica um elemento único na página, usado para estilização ou manipulação via JavaScript:

<div id="conteudo">Conteúdo principal</div>

class — atribui uma classe ao elemento, permitindo aplicar o mesmo estilo a vários elementos:

<p class="destaque">Texto em destaque</p>

style — aplica estilos CSS diretamente no elemento (uso pontual):

<p style="color: red;">Texto vermelho</p>

href (em links) — define o destino do link:

<a href="https://www.exemplo.com">Visitar site</a>

src e alt (em imagens) — src aponta para o arquivo da imagem; alt descreve a imagem para acessibilidade e SEO:

<img src="logo.jpg" alt="Logo da empresa">

title — texto descritivo exibido quando o usuário passa o cursor sobre o elemento:

<button title="Clique para enviar o formulário">Enviar</button>

target (em links) — define onde o link será aberto; _blank abre em uma nova aba:

<a href="https://www.exemplo.com" target="_blank">Abrir em nova aba</a>

placeholder (em campos de formulário) — texto de dica exibido antes do usuário digitar:

<input type="text" placeholder="Digite seu nome">

disabled — desabilita um elemento de formulário, tornando-o não interativo:

<button disabled>Enviar</button>

Relação entre HTML, CSS e JavaScript

Sozinho, o HTML produz páginas funcionais, mas sem visual atraente nem interatividade. As três tecnologias trabalham juntas:

  • HTML — estrutura o conteúdo (o esqueleto da página).
  • CSS — define a aparência visual: cores, fontes, espaçamentos e layout.
  • JavaScript — adiciona comportamento e dinamismo: menus, validações, animações etc.

Exemplo de CSS integrado:

<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
  }
  h1 {
    color: #333;
  }
</style>

Exemplo de JavaScript integrado:

<script>
  function exibirMensagem() {
    alert('Olá, mundo!');
  }
</script>

<button onclick="exibirMensagem()">Clique aqui</button>

Essas três tecnologias formam a base do desenvolvimento web front-end e são o ponto de partida de qualquer desenvolvedor.

Ferramentas necessárias para começar

Para escrever e visualizar páginas HTML você precisará de apenas duas ferramentas:

  • Editor de Código — onde você vai escrever o HTML:
  • Navegador Web — onde você vai visualizar e testar o resultado:
    • Google Chrome, Mozilla Firefox ou Microsoft Edge (todos funcionam bem).

Extensão recomendada para o quem usa o VS Code: instale o Live Server para ver as alterações no navegador em tempo real, sem precisar recarregar a página manualmente.

Criando e testando sua primeira página HTML

1. Baixe e instale um dos editores de código mencionados acima, se ainda não tiver um.

2. Crie uma pasta para o projeto e abra-a no editor de código escolhido.

3. Crie um arquivo chamado index.html e escreva o código abaixo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minha Primeira Página</title>
</head>
<body>
  <h1>Minha Primeira Página</h1>
  <p>Este é um exemplo simples de HTML. Parabéns por chegar até aqui!</p>
  <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML" target="_blank">
    Saiba mais sobre HTML
  </a>
</body>
</html>

4. Abra o arquivo no navegador clicando duas vezes sobre ele, ou use o Live Server no VS Code para visualizar em tempo real.

Referências oficiais

Com este guia você tem a base necessária para começar a criar páginas web com HTML. Explore as tags, experimente combinações com CSS e JavaScript, e vá construindo projetos cada vez mais completos!

A prática leva à evolução e à perfeição

Experimente criar seus próprios documentos HTML baseados nos exemplos deste guia e compartilhe seus resultados e dúvidas nos comentários do blog!

Comentários

Não foi possível carregar os comentários no momento.

Deixe seu comentário

Posts Relacionados

Continue sua leitura com conteúdos parecidos.