O que é HTML? Guia com Estrutura, Tags e Exemplos

Atualizado em: 17 de julho de 2026

HTML é a linguagem de marcação que define o conteúdo, a estrutura e o significado de uma página web. Ela informa ao navegador quais partes são títulos, parágrafos, links, imagens, listas, formulários, áreas de navegação e outros elementos.

HTML não é uma linguagem de programação. Ele não executa lógica como condições, repetições ou cálculos. Sua função principal é organizar o conteúdo para que navegadores, mecanismos de busca e tecnologias assistivas consigam interpretá-lo.

Resposta rápida: HTML significa HyperText Markup Language, ou Linguagem de Marcação de Hipertexto. É a base estrutural da web e normalmente trabalha junto com CSS, responsável pelo visual, e JavaScript, responsável pelo comportamento.

O que significa HTML?

HyperText: conteúdo conectado por links que levam a outras páginas, arquivos ou partes do mesmo documento.
Markup: marcações que identificam a função e o significado das partes do conteúdo.
Language: conjunto de regras usado para escrever documentos que navegadores conseguem interpretar.

Um título não deve ser identificado apenas por estar grande e em negrito. Em HTML, ele recebe um elemento como <h1> ou <h2>. Isso comunica seu significado, não apenas sua aparência.

HTML5 ainda existe?

O termo HTML5 continua sendo usado informalmente, mas o padrão atual é mantido como um Living Standard, ou padrão vivo, pelo WHATWG. Isso significa que a especificação é atualizada continuamente, em vez de esperar por grandes versões numeradas como HTML6.

A declaração <!DOCTYPE html> continua sendo usada no início do documento para ativar o modo de padrões dos navegadores.

Elemento, tag, atributo e conteúdo

Esses termos são relacionados, mas não significam exatamente a mesma coisa.

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

Parte	Exemplo	Função
Tag de abertura	`<a>`	Inicia o elemento
Atributo	`href="https://exemplo.com"`	Fornece informação adicional
Conteúdo	Visitar o site	Texto ou elementos internos
Tag de fechamento	`</a>`	Encerra o elemento
Elemento completo	Todo o código	Representa o link no documento

Alguns elementos são vazios e não possuem conteúdo interno ou tag de fechamento, como <img>, <meta>, <link> e <input>.

Estrutura completa de uma página HTML

Este é um ponto de partida mais completo do que o exemplo mínimo encontrado em muitos tutoriais:

<!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 HTML</title>
  <meta
    name="description"
    content="Uma página simples criada para aprender HTML."
  >
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Minha primeira página</h1>
  </header>

  <main>
    <p>Olá! Este conteúdo está dentro da área principal.</p>
  </main>

  <footer>
    <p>Criado para praticar HTML.</p>
  </footer>

  <script src="app.js" defer></script>
</body>
</html>

O que cada parte faz?

<!DOCTYPE html> informa que o documento usa a sintaxe HTML moderna.
<html lang="pt-BR"> é o elemento raiz e declara o idioma principal do conteúdo.
<head> contém metadados, título, arquivos externos e configurações do documento.
<meta charset="UTF-8"> define a codificação de caracteres.
<meta name="viewport"> ajuda a página a se adaptar corretamente a telas móveis.
<title> define o título da aba e participa da apresentação da página em mecanismos de busca.
<body> contém o conteúdo exibido e utilizado pelo visitante.
O atributo defer permite baixar o JavaScript sem bloquear a análise normal do HTML e executá-lo após o documento ser interpretado.

Você pode testar códigos semelhantes no Editor HTML online.

Tags HTML mais usadas

Elemento	Uso principal
`<h1>` a `<h6>`	Títulos e subtítulos hierárquicos
`<p>`	Parágrafo
`<a>`	Link
`<img>`	Imagem
`<ul>`, `<ol>` e `<li>`	Listas
`<strong>` e `<em>`	Importância e ênfase
`<button>`	Controle acionável
`<form>`, `<label>` e `<input>`	Formulários
`<table>`, `<tr>`, `<th>` e `<td>`	Dados tabulares
`<div>` e `<span>`	Contêineres genéricos sem significado específico

HTML semântico

HTML semântico significa escolher o elemento de acordo com o significado do conteúdo. Em vez de criar toda a página com <div>, use elementos que descrevem a função de cada região.

<body>
  <header>
    <a href="/">Nome do site</a>
    <nav aria-label="Navegação principal">
      <ul>
        <li><a href="/artigos">Artigos</a></li>
        <li><a href="/contato">Contato</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>Como aprender HTML</h1>
      <p>Introdução do artigo.</p>

      <section>
        <h2>Primeiros passos</h2>
        <p>Conteúdo da seção.</p>
      </section>
    </article>
  </main>

  <footer>
    <p>Informações do site.</p>
  </footer>
</body>

<header> representa conteúdo introdutório ou cabeçalho de uma região.
<nav> identifica uma área importante de navegação.
<main> contém o conteúdo principal e deve representar a parte central da página.
<article> representa conteúdo independente, como uma publicação ou notícia.
<section> agrupa uma parte temática do documento, normalmente com um título.
<aside> contém informação relacionada, mas não central.
<footer> representa o rodapé da página ou de uma seção.

Elementos semânticos ajudam a tornar a estrutura compreensível para leitores de tela, navegadores, ferramentas de manutenção e mecanismos de busca.

Como colocar imagens em HTML

Uma imagem simples utiliza o elemento <img>:

<img
  src="equipe-trabalhando.webp"
  alt="Três pessoas trabalhando em notebooks em uma mesa"
  width="1200"
  height="800"
  loading="lazy"
>

src informa o endereço do arquivo.
alt fornece uma alternativa textual quando a imagem transmite informação.
width e height reservam a proporção da imagem e ajudam a reduzir mudanças inesperadas no layout.
loading="lazy" pode adiar o carregamento de imagens que estão fora da área visível inicial.

Imagens puramente decorativas devem usar alt="". Não repita no texto alternativo informações que já aparecem ao lado da imagem e não comece com expressões como “imagem de”, pois o leitor de tela normalmente já informa que se trata de uma imagem.

Imagem responsiva com picture

<picture>
  <source
    srcset="banner-mobile.webp"
    media="(max-width: 600px)"
  >
  <img
    src="banner-desktop.webp"
    alt="Painel de uma aplicação web"
    width="1400"
    height="700"
  >
</picture>

O elemento <picture> permite oferecer arquivos diferentes conforme características da tela ou formatos suportados.

Links em HTML

<a href="/curso-html">Aprender HTML do zero</a>

O texto do link deve indicar o destino. Evite usar apenas “clique aqui”, porque essa expressão perde o sentido quando lida fora do parágrafo.

<a
  href="https://site-externo.com"
  target="_blank"
  rel="noopener noreferrer"
>
  Abrir documentação em uma nova aba
</a>

Use target="_blank" apenas quando abrir uma nova aba realmente ajudar o usuário. Quando usado, rel="noopener noreferrer" adiciona proteção e privacidade para o contexto de navegação.

Formulários acessíveis

Campos precisam de rótulos visíveis e associados corretamente. O atributo for do <label> deve corresponder ao id do campo.

<form action="/contato" method="post">
  <div>
    <label for="nome">Nome</label>
    <input
      type="text"
      id="nome"
      name="nome"
      autocomplete="name"
      required
    >
  </div>

  <div>
    <label for="email">Email</label>
    <input
      type="email"
      id="email"
      name="email"
      autocomplete="email"
      required
    >
  </div>

  <button type="submit">Enviar mensagem</button>
</form>

O atributo placeholder não substitui um <label>. O texto do placeholder desaparece durante a digitação e pode ter contraste insuficiente.

Para exemplos de controles estilizados, consulte os botões CSS com código pronto.

Diferença entre HTML, CSS e JavaScript

Tecnologia	Responsabilidade	Exemplos
HTML	Estrutura e significado	Títulos, links, imagens e formulários
CSS	Apresentação e layout	Cores, fontes, tamanhos e responsividade
JavaScript	Comportamento e lógica	Validação dinâmica, menus e requisições

Uma comparação simples é pensar no HTML como a estrutura de uma casa, no CSS como acabamento e decoração, e no JavaScript como os sistemas que respondem a ações. A analogia ajuda no início, mas aplicações reais podem dividir responsabilidades de formas mais complexas.

Veja também o que é CSS e o que é JavaScript.

HTML, acessibilidade e SEO

Uma grande parte da acessibilidade de uma página pode ser construída usando os elementos HTML corretos para cada finalidade. Um <button> já possui comportamento de teclado e significado que uma <div> não oferece automaticamente.

Declare o idioma com o atributo lang.
Use títulos em uma hierarquia que represente a organização do conteúdo.
Escreva textos de links que façam sentido fora do parágrafo.
Forneça texto alternativo adequado para imagens informativas.
Associe rótulos aos campos de formulário.
Use elementos interativos nativos antes de recriá-los com <div> e ARIA.
Mantenha uma ordem de conteúdo lógica para teclado e leitores de tela.

HTML semântico também ajuda mecanismos de busca a entender relações entre títulos, textos, links, navegação e conteúdo principal. Isso não garante posicionamento, mas cria uma base mais clara para indexação e apresentação.

Erros comuns em HTML

usar <br> repetidamente para criar espaçamento visual;
usar <div> no lugar de botão, link, lista ou título;
esquecer o atributo lang no elemento raiz;
usar o mesmo id em vários elementos;
escrever caminhos de arquivos incorretos em src e href;
deixar imagens informativas sem texto alternativo;
usar placeholder como único rótulo de um campo;
aninhamento inválido, como colocar elementos em posições não permitidas;
usar tabelas para montar o layout da página;
depender de elementos obsoletos para aparência, em vez de usar CSS.

Como validar o código HTML

Validadores ajudam a encontrar problemas de sintaxe, atributos incorretos, elementos obsoletos e aninhamento inválido. O Nu HTML Checker, mantido como parte do ecossistema do padrão, permite enviar uma URL, arquivo ou trecho de código.

Abra o documento no navegador e teste os links e formulários.
Use as ferramentas de desenvolvimento para inspecionar a estrutura.
Execute a validação do HTML.
Navegue apenas com o teclado.
Teste em tamanhos de tela e navegadores diferentes.

Um documento válido ainda pode ter problemas de conteúdo, usabilidade ou acessibilidade. A validação é uma etapa importante, mas não substitui testes reais.

Como o navegador interpreta HTML

O navegador baixa o documento HTML.
O analisador transforma a marcação em uma árvore de objetos chamada DOM.
Arquivos CSS são processados para definir estilos e layout.
JavaScript pode consultar e modificar o DOM.
O navegador calcula o layout e desenha o resultado na tela.

Navegadores tentam recuperar documentos com erros, por isso uma página pode parecer funcionar mesmo quando o HTML é inválido. Essa recuperação pode produzir resultados diferentes do esperado e dificultar manutenção.

Como aprender HTML

Aprenda a estrutura do documento e a anatomia dos elementos.
Pratique títulos, parágrafos, listas, links e imagens.
Crie formulários com rótulos e validação nativa.
Use elementos semânticos e teste a navegação por teclado.
Aprenda CSS para estilizar a estrutura.
Adicione JavaScript somente quando precisar de comportamento dinâmico.
Construa projetos pequenos e valide o código.

Uma boa prática inicial é criar uma página pessoal, uma receita, uma lista de estudos ou uma landing page simples antes de partir para frameworks.

Perguntas frequentes

HTML é uma linguagem de programação?

Não. HTML é uma linguagem de marcação. Ela estrutura e descreve o conteúdo, mas não executa lógica de programação por conta própria.

Qual é a versão atual do HTML?

O HTML é mantido como um Living Standard, atualizado continuamente. O termo HTML5 ainda é comum, mas o padrão não depende mais de grandes versões numeradas.

Preciso aprender HTML antes de CSS e JavaScript?

Sim. HTML fornece a estrutura que o CSS estiliza e que o JavaScript consulta ou modifica. É possível estudar as três tecnologias em paralelo após entender a base do documento.

É necessário fechar todas as tags?

Muitos elementos possuem tag de abertura e fechamento. Elementos vazios, como <img>, <input> e <meta>, não possuem conteúdo interno nem tag final.

Posso criar um site usando somente HTML?

Sim. Um documento somente com HTML pode apresentar textos, links, imagens, tabelas e formulários. CSS e JavaScript são adicionados quando o projeto precisa de apresentação mais elaborada ou comportamento dinâmico.

Fontes e verificação

Conteúdo revisado em 17 de julho de 2026 com base no HTML Living Standard do WHATWG, na documentação de HTML da MDN e nos materiais do W3C sobre estrutura de páginas acessíveis.

Conclusão

HTML é a base estrutural da web. Aprendê-lo corretamente significa mais do que memorizar tags: é entender o significado dos elementos, organizar o documento, criar links e imagens úteis, construir formulários acessíveis e fornecer uma estrutura que possa ser interpretada por pessoas e ferramentas.

Comece com documentos simples, use elementos nativos de acordo com sua finalidade e valide o código. Essa base facilita o aprendizado de CSS, JavaScript, frameworks e qualquer outra tecnologia de desenvolvimento web.