Linguagem HTML: estrutura, tags e primeiros passos

O que é HTML? É a linguagem de marcação usada para estruturar o conteúdo de páginas web. A sigla vem de HyperText Markup Language, e ela diz ao navegador o que é um título, um parágrafo, uma lista, um link ou uma imagem. HTML não é uma linguagem de programação: ele não faz cálculos nem toma decisões, apenas descreve a estrutura do documento.

Toda página que você abre no navegador tem HTML por baixo. Neste guia você vai entender como ele funciona, o que são tags e atributos, como ele se relaciona com CSS e JavaScript e como escrever sua primeira página, com exemplos curtos e um caminho de estudo realista.

O que é HTML e para que serve na prática

Pense no HTML como o esqueleto de uma página. Ele organiza o conteúdo em blocos com significado. Um resumo desse papel aparece em o que é HTML e para que serve exatamente, e a definição curta é esta: HTML, ou Linguagem de Marcação de Hipertexto, é o padrão que todos os navegadores entendem para montar documentos na web.

Com ele você:

• define títulos e subtítulos hierárquicos;
• cria parágrafos, listas e tabelas;
• insere links entre páginas (o “hipertexto” do nome);
• incorpora imagens, vídeos e áudio;
• monta formulários para o usuário enviar dados.

Buscadores e leitores de tela também leem o HTML. Uma estrutura bem feita ajuda a página a ser encontrada e a ser usada por pessoas com deficiência.

Tags, elementos e atributos

A dúvida mais comum de quem começa é o que são tags em HTML e como funcionam. Tags são os comandos que você usa no HTML para marcar o conteúdo. Elas ficam entre sinais de menor e maior e, na maioria dos casos, vêm em pares: uma de abertura e outra de fechamento.

<p>Este é um parágrafo.</p>
<a href="https://exemplo.com">Um link</a>

Elemento

O elemento é o conjunto completo: tag de abertura, conteúdo e tag de fechamento. Alguns elementos são vazios, como a quebra de linha, e não têm fechamento.

Atributo

Atributos ficam na tag de abertura e dão informações extras. No link acima, href indica o endereço. Em uma imagem, src aponta o arquivo e alt descreve o conteúdo para quem não consegue vê-lo.

Hierarquia de títulos

Existem seis níveis de título. Use h1 para um título principal ou h2 para uma seção, e assim por diante, sem pular níveis só por causa do tamanho da fonte. Tamanho é assunto de CSS.

Estrutura básica de um documento HTML

Todo arquivo HTML segue um esqueleto parecido. Salve o código abaixo como index.html e abra no navegador:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <title>Minha primeira página</title>
  </head>
  <body>
    <h1>Olá, mundo</h1>
    <p>Estou aprendendo HTML.</p>
  </body>
</html>

• DOCTYPE: avisa que o documento usa HTML5.
• html: envolve tudo e define o idioma.
• head: metadados, título da aba, links para CSS.
• body: tudo o que aparece na tela.

As tags estruturais html, head e body aparecem em qualquer página, do blog mais simples ao sistema mais complexo.

HTML, CSS e JavaScript: como se complementam

Outra pergunta frequente é HTML, CSS e JavaScript: qual a relação? Na prática, eles são um trio inseparável no desenvolvimento web, cada um com uma função.

Se quiser seguir para a próxima etapa, veja nosso guia sobre o que é CSS. Para colocar a página no ar, você vai precisar entender o que é hospedagem de site.

HTML semântico e acessibilidade

O HTML5 trouxe elementos semânticos, que descrevem o papel de cada bloco: header, nav, main, article, section e footer. Um trecho de dicas sobre isso está em prática, ferramentas e semântica. Em vez de empilhar div genéricas, prefira a tag que diz o que o conteúdo é.

<header>
  <nav>...</nav>
</header>
<main>
  <article>
    <h2>Título do post</h2>
    <p>Texto...</p>
  </article>
</main>
<footer>...</footer>

Benefícios diretos: leitores de tela navegam melhor, buscadores entendem a página e o código fica mais fácil de manter.

Como começar a estudar HTML

1. Instale um editor de código. O VS Code é gratuito e tem realce de sintaxe e autocompletar.
2. Escreva páginas pequenas. Um currículo, uma receita, uma lista de filmes.
3. Use o inspetor do navegador. Clique com o botão direito em qualquer site e escolha “Inspecionar” para ver o HTML real.
4. Valide o código. O validador do W3C aponta tags mal fechadas e atributos errados.
5. Teste em mais de um navegador. Chrome, Firefox e Edge podem exibir detalhes de forma diferente.

Depois de dominar o básico, estude formulários, tabelas acessíveis e boas práticas de imagens responsivas.

Erros comuns de quem está começando

Alguns deslizes aparecem em quase todo primeiro projeto. Conhecê-los economiza horas de depuração:

• Esquecer de fechar tags: o navegador tenta corrigir sozinho, mas o resultado pode ficar diferente do esperado.
• Aninhar errado: se abriu strong dentro de p, feche o strong antes do p.
• Usar títulos pelo tamanho: escolha o nível do título pela hierarquia do conteúdo, não pela aparência.
• Omitir o atributo alt em imagens: ele é essencial para acessibilidade e aparece quando a imagem não carrega.
• Esquecer o charset: sem UTF-8, acentos podem virar símbolos estranhos.
• Colocar estilo dentro do HTML: separar a aparência em CSS deixa o código mais limpo e fácil de manter.

Uma boa prática é abrir o inspetor do navegador sempre que algo parecer fora do lugar. Ele mostra como o navegador interpretou o seu código, o que muitas vezes revela a tag mal fechada na hora.

Perguntas frequentes

Reunimos aqui as dúvidas frequentes de quem está começando.

HTML é linguagem de programação?

Não. HTML é uma linguagem de marcação: descreve a estrutura do conteúdo, mas não tem variáveis, condições ou laços. A lógica fica com JavaScript ou com linguagens do servidor.

Quanto tempo leva para aprender HTML?

O básico dá para aprender em poucos dias de prática. Escrever HTML semântico e acessível com segurança leva mais tempo e vem com projetos reais.

Preciso instalar algo para usar HTML?

Não. Basta um editor de texto e um navegador. Um editor de código só deixa o trabalho mais confortável.

Qual a diferença entre HTML e HTML5?

HTML5 é a versão atual do padrão. Ele trouxe tags semânticas, suporte nativo a áudio e vídeo e novos tipos de campo de formulário.

Dá para fazer um site só com HTML?

Dá, mas ele ficará sem estilo e sem interatividade. Para um site apresentável, combine com CSS e, se precisar, JavaScript.

O que levar dessa leitura

Entender o que é HTML é o primeiro passo para qualquer pessoa que quer criar ou editar páginas web. Ele estrutura o conteúdo, o CSS cuida da aparência e o JavaScript do comportamento. Comece com páginas simples, use tags semânticas e pratique com frequência.