Introdução ao HTML

HTML é o esqueleto da web. Sem HTML, a internet não seria como a conhecemos hoje.

O que é HTML?

HTML (HyperText Markup Language — Linguagem de Marcação de Hipertexto) é a linguagem padrão para criar páginas web. Não é uma linguagem de programação, mas sim uma linguagem de marcação — ela usa tags para dizer ao navegador como exibir o conteúdo.

Toda página web que você acessa, desde um blog simples até plataformas complexas de e-commerce, é construída com HTML por baixo dos panos. HTML define a estrutura da página: títulos, parágrafos, imagens, links, tabelas... o "esqueleto" de tudo é criado pelo HTML.

💡 Analogia fácil: Pense em uma página web como uma casa. HTML é a estrutura (paredes, portas, janelas), CSS é a decoração (cores, estilo), e JavaScript é a instalação elétrica e hidráulica (funcionalidades interativas).

Um Documento HTML Simples

Todo documento HTML é composto por uma série de tags. Abaixo está a estrutura mais básica de um documento HTML:

Exemplo

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Meu Primeiro Site</title>
</head>
<body>
  <h1>Olá, Mundo!</h1>
  <p>Este é o meu primeiro parágrafo.</p>
</body>
</html>

▶ Experimente

Explicação do Código

<!DOCTYPE html> — Declaração do tipo de documento, informa ao navegador que se trata de um documento HTML5
<html> — Elemento raiz do documento HTML, tudo fica dentro desta tag
<head> — Área do cabeçalho do documento, contém metadados (título, codificação, etc.)
<title> — Define o título da página exibido na aba do navegador
<body> — Área do corpo do documento, todo conteúdo visível fica aqui
<h1> — Título de nível 1, geralmente o maior texto da página
<p> — Tag de parágrafo, usada para envolver um bloco de texto

Sintaxe das Tags HTML

As tags HTML geralmente vêm em pares: uma tag de abertura e uma tag de fechamento:

HTML

<tagname>O conteúdo vai aqui</tagname>

Tag de abertura: <tagname> — sinais de menor e maior envolvendo o nome da tag
Tag de fechamento: </tagname> — igual à de abertura, mas com uma barra inclinada
Conteúdo: O texto ou outras tags entre a tag de abertura e a de fechamento

Algumas tags não possuem conteúdo e são chamadas de tags vazias (void tags). Exemplos incluem a tag de quebra de linha <br> e a tag de linha horizontal <hr>.

✅ Boa Prática: Sempre escreva os nomes das tags em letras minúsculas. Embora <TAGNAME> funcione tecnicamente, minúsculas é o padrão mais utilizado e mais legível.

Atributos HTML

As tags podem ter atributos para fornecer informações adicionais. Os atributos são escritos na tag de abertura no formato nome="valor":

HTML

<a href="https://www.example.com">Este é um link</a>
<img src="/assets/images/tutorials/html-example-photo.webp" alt="Uma foto de exemplo">

href — A URL de destino de um link
src — O caminho do arquivo de uma imagem
alt — Texto alternativo quando a imagem não carrega (importante para acessibilidade)

⚠️ Atenção: Os valores dos atributos devem estar entre aspas. Aspas duplas " " são recomendadas para manter a consistência.

Versões do HTML

O HTML passou por várias versões desde a sua criação. Atualmente utilizamos o HTML5, o padrão mais recente. O HTML5 introduziu muitos recursos novos:

Tags semânticas (<header>, <nav>, <article>, etc.)
Suporte nativo a áudio e vídeo (<audio>, <video>)
API Canvas para desenho
Armazenamento local (localStorage)
Suporte a imagens responsivas

📌 Fique tranquilo: Este tutorial é totalmente baseado no padrão HTML5. Todos os conceitos que você aprender estão atualizados e prontos para uso.

Ferramentas de Desenvolvimento

Você só precisa de duas coisas para escrever HTML:

Um editor de texto — VS Code (gratuito e leve), Sublime Text ou Notepad++
Um navegador — Chrome, Edge ou Firefox, todos funcionam. Escreva o código no seu editor, salve como um arquivo .html e abra no navegador — é simples assim.

🚀 Experimente: Abra seu editor de texto, copie o código de exemplo acima, salve como meu-primeiro.html e dê um duplo clique para abrir no navegador — você acabou de criar sua primeira página web!

❓ Perguntas Frequentes

P Qual é a diferença entre HTML e linguagens de programação? Por que HTML não é considerado uma linguagem de programação？

R Linguagens de programação como Python e Java possuem variáveis, loops e lógica condicional — elas podem fazer cálculos e tomar decisões. HTML simplesmente descreve a estrutura da página usando tags. Ele não tem lógica, não faz cálculos, não muda seu próprio comportamento. Resumindo: linguagens de programação fazem coisas, HTML descreve coisas.

P Preciso de algum conhecimento prévio para aprender HTML? Posso aprender mesmo sem saber inglês?

R HTML é a porta de entrada mais fácil para a programação — não precisa de conhecimento prévio. Inglês fraco não vai te atrapalhar. As tags HTML usam apenas algumas dezenas de palavras comuns (como p para parágrafo, h para heading), e você vai memorizar com a prática. O mais importante é entender a semântica das tags e a lógica de aninhamento, não o inglês.

P Por que <!DOCTYPE html> deve estar na primeira linha? O que acontece se eu não colocar?

R Sem o DOCTYPE, o navegador entra no "Quirks Mode" — um mecanismo de renderização dos anos 1990 que pode causar problemas de layout e falhas de CSS. O DOCTYPE diz ao navegador para usar o modo de renderização moderno. Não é uma tag HTML; é uma instrução que deve vir antes de tudo.

📖 Resumo

HTML é uma linguagem de marcação que usa tags para descrever a estrutura da página, não é uma linguagem de programação
Todo documento HTML segue um esqueleto fixo: <!DOCTYPE html>, <html>, <head> + <body>
As tags geralmente vêm em pares (abertura e fechamento), algumas tags vazias não possuem tag de fechamento
Os atributos fornecem configuração extra para as tags e são escritos na tag de abertura
Atualmente utilizamos o HTML5, que adiciona tags semânticas, áudio/vídeo e outros recursos novos

📝 Atividades

Crie sua primeira página web: Abra seu editor de texto (ou VS Code), copie o primeiro exemplo de código deste capítulo, salve como meu-primeiro.html e dê um duplo clique para abrir no navegador. Modifique o conteúdo dentro das tags <h1> e <p> para se apresentar, depois salve e atualize o navegador para ver as alterações.
Observe uma página real: Abra qualquer site (como a Wikipedia), clique com o botão direito e selecione "View Page Source" (ou "Código-fonte"), e veja quantas tags você consegue reconhecer!