Criar um site em HTML do zero envolve abrir um editor de texto, escrever a estrutura básica do HTML5, salvar com extensão .html e abrir no navegador. Em menos de 10 minutos, você tem o primeiro site funcionando no seu computador, sem precisar instalar nenhum servidor ou pagar por hospedagem para começar.
A vantagem de aprender HTML antes de partir para WordPress ou ferramentas de arrastar-e-soltar é entender como os sites funcionam por dentro. Toda página web é HTML no fim: o WordPress gera HTML, o Elementor gera HTML, qualquer construtor visual gera HTML. Quem sabe a base entende o que está fazendo e consegue resolver problemas que ferramentas visuais não resolvem.
O que você precisa antes de começar
Você precisa de três coisas, todas gratuitas: um editor de código (VS Code é o mais recomendado), um navegador moderno (Chrome, Firefox ou Edge) e a disposição de criar um arquivo com extensão .html. Nada precisa ser pago e nenhum hardware especial é exigido.
Detalhes de cada um:
Editor de código: O Visual Studio Code é gratuito, leve e tem extensões úteis para HTML como Live Server (mostra alterações em tempo real). Alternativas: Sublime Text, Notepad++ (Windows) ou até o Bloco de Notas comum se for só para começar.
Navegador: Qualquer navegador moderno consegue abrir um arquivo .html direto. Para entender o que é o navegador na prática, veja o que é um web browser.
Conhecimento prévio: Zero programação necessária. HTML é linguagem de marcação, não de programação — você organiza conteúdo usando tags, sem lógica condicional ou variáveis.
A estrutura básica de qualquer site HTML
Todo site HTML começa com a declaração <!DOCTYPE html> seguida das tags <html>, <head> e <body>. O conteúdo visível para o usuário vai dentro do <body>, e as configurações da página (título, charset, links para CSS) ficam dentro do <head>.
A estrutura mínima para um site HTML5 válido:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu Primeiro Site</title>
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Este é meu primeiro site em HTML.</p>
</body>
</html>
Cole esse código em um editor, salve como index.html, abra no navegador e você verá seu primeiro site. As linhas dentro do <head> configuram codificação de caracteres (UTF-8 para suportar acentos), responsividade no mobile (viewport) e o título que aparece na aba do navegador.
Como criar seu primeiro site em HTML passo a passo
Crie um arquivo index.html, cole a estrutura HTML5 base, adicione tags de conteúdo dentro do <body> (<h1> para título, <p> para parágrafos, <img> para imagens, <a> para links). Salve e abra no navegador.
Passo a passo detalhado:
1. Crie a pasta do projeto em qualquer lugar do computador. Pode chamar de meu-site ou qualquer nome sem espaços.
2. Abra o VS Code e arraste a pasta para dentro dele. Crie um novo arquivo dentro da pasta chamado index.html (esse nome é importante — é o arquivo padrão que navegadores procuram primeiro).
3. Cole a estrutura HTML5 base (a do tópico anterior).
4. Adicione conteúdo dentro do <body>:
<header>
<h1>Meu Portfólio</h1>
<nav>
<a href="#sobre">Sobre</a>
<a href="#projetos">Projetos</a>
<a href="#contato">Contato</a>
</nav>
</header>
<main>
<section id="sobre">
<h2>Sobre mim</h2>
<p>Sou desenvolvedora aprendendo HTML e CSS.</p>
</section>
<section id="projetos">
<h2>Meus Projetos</h2>
<ul>
<li>Site pessoal em HTML</li>
<li>Blog com WordPress</li>
</ul>
</section>
</main>
<footer>
<p>© 2026 Meu Portfólio</p>
</footer>
5. Salve com Ctrl + S.
6. Abra no navegador: clique duas vezes no arquivo index.html no explorador de arquivos. Ele abre direto no navegador padrão.
7. Faça alterações e atualize a página (F5 ou Ctrl + R) para ver mudanças. Para entender melhor os comandos do navegador durante o desenvolvimento, veja qual o comando para atualizar a página do navegador.
As 10 tags HTML essenciais que você vai usar
As tags mais usadas no dia a dia são <h1> a <h6> (títulos), <p> (parágrafo), <a> (link), <img> (imagem), <ul>/<li> (lista), <div> (container), <header>, <main> e <footer> (estrutura semântica). Com essas você constrói 90% de qualquer site.
A tabela abaixo mostra o que cada uma faz e como usar:
| Tag | Para que serve | Exemplo |
|---|---|---|
<h1> a <h6> | Títulos (hierárquicos) | <h1>Título principal</h1> |
<p> | Parágrafo de texto | <p>Texto aqui</p> |
<a> | Link | <a href="pagina.html">Clique aqui</a> |
<img> | Imagem | <img src="foto.jpg" alt="Descrição"> |
<ul> + <li> | Lista com bolinhas | <ul><li>Item 1</li></ul> |
<ol> + <li> | Lista numerada | <ol><li>Primeiro</li></ol> |
<div> | Container genérico | <div class="card">conteúdo</div> |
<header> | Cabeçalho da página | <header>Logo + menu</header> |
<main> | Conteúdo principal | <main>texto do post</main> |
<footer> | Rodapé | <footer>©2026</footer> |
A referência completa de tags HTML da MDN lista todas as 100+ tags existentes com exemplos.
Como deixar seu site bonito com CSS
Adicione uma tag <style> dentro do <head> para CSS interno, ou crie um arquivo style.css separado e linke com <link rel="stylesheet" href="style.css">. CSS controla cores, fontes, tamanhos e espaçamento dos elementos HTML.
Exemplo de CSS interno (mais simples para começar):
<head>
<meta charset="UTF-8">
<title>Meu Site</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #0066cc;
}
a {
color: #0066cc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
Esse CSS centraliza o conteúdo, define fonte, cor de fundo cinza claro, cor de texto escura e formata links. Cada propriedade CSS (color, background-color, font-family) controla um aspecto visual específico.
Quando o CSS começar a crescer, vale separar em arquivo próprio. Para entender opções avançadas de alinhamento de texto, veja como deixar o texto justificado no CSS.
Como hospedar seu site HTML grátis com GitHub Pages
A forma mais fácil de publicar é via GitHub Pages: crie conta no GitHub, suba seus arquivos para um repositório, ative GitHub Pages nas configurações do repositório. Em até 10 minutos seu site fica online em usuario.github.io/nome-do-repositorio.
Passo a passo:
1. Criar conta no GitHub em github.com (gratuito).
2. Criar um repositório novo. No canto superior direito, clique no + → “New repository”. Dê o nome, marque “Public” e clique “Create”.
3. Subir os arquivos. Clique em “uploading an existing file” e arraste index.html, style.css e qualquer outro arquivo do seu projeto. Confirme o upload.
4. Ativar GitHub Pages. Vá em “Settings” do repositório → “Pages” no menu lateral → em “Source” escolha “main branch” → Save.
5. Aguardar 1-10 minutos e seu site aparece em https://seu-usuario.github.io/nome-do-repositorio.
O vídeo abaixo, do Curso em Vídeo (referência brasileira em ensino de programação), mostra todo o processo de criar projeto HTML do zero e publicar:
Alternativas ao GitHub Pages também gratuitas: Netlify, Vercel e Cloudflare Pages. Todos hospedam HTML estático sem custo.
Estrutura semântica do HTML5: por que importa
Use tags semânticas como <header>, <nav>, <main>, <section>, <article>, <aside> e <footer> em vez de <div> para tudo. Isso melhora SEO, acessibilidade e organiza o código de forma legível.
Tags semânticas são tags que descrevem o significado do conteúdo, não só o visual. Um <header> sinaliza “essa parte é o cabeçalho”, e leitores de tela para pessoas cegas, motores de busca como Google e outros programas conseguem entender a estrutura sem adivinhar.
Estrutura recomendada para qualquer página:
<body>
<header>
<h1>Título do site</h1>
<nav>
<a href="#">Início</a>
<a href="#">Sobre</a>
<a href="#">Contato</a>
</nav>
</header>
<main>
<article>
<h2>Título do post</h2>
<p>Conteúdo principal...</p>
</article>
<aside>
<h3>Conteúdo lateral</h3>
<p>Posts relacionados</p>
</aside>
</main>
<footer>
<p>Direitos autorais</p>
</footer>
</body>
Erros comuns ao criar site em HTML
Os 5 erros mais comuns são: esquecer de fechar tags (<div> sem </div>), salvar com extensão errada (.txt em vez de .html), não declarar <!DOCTYPE html>, esquecer charset UTF-8 (acentos viram caracteres estranhos) e usar tags obsoletas como <font> ou <center>.
Detalhamento:
Tags não fechadas: O navegador tenta renderizar mesmo assim, mas o resultado fica imprevisível. Use a extensão Auto Close Tag no VS Code para fechar automaticamente.
Extensão errada: Se você salvar como “index.html.txt”, o navegador trata como texto puro. Confira o nome do arquivo no explorador, com extensões visíveis ativadas.
Sem DOCTYPE: Sem <!DOCTYPE html> no topo, o navegador entra em modo “quirks” e renderiza CSS de forma diferente. Sempre inclua essa primeira linha.
Charset faltando: Sem <meta charset="UTF-8">, acentos viram caracteres tipo “ção”. Sempre inclua dentro do <head>.
Tags obsoletas: <font>, <center>, <marquee> foram descontinuadas. Use CSS para o que essas tags faziam.
HTML, CSS e JavaScript: qual a diferença
HTML é a estrutura (textos, imagens, links). CSS é a aparência (cores, fontes, espaçamento). JavaScript é a interatividade (botões que fazem ações, formulários que validam, animações). Os três trabalham juntos em qualquer site moderno.
Analogia comum: HTML é o esqueleto, CSS é a pele/roupa, JavaScript é o sistema nervoso.
HTML define o quê: “isso é um título, isso é um parágrafo, isso é uma imagem”.
CSS define o como visual: “o título é azul, em fonte Arial, com fundo cinza”.
JavaScript define o comportamento: “quando o usuário clicar no botão, mostre uma mensagem”.
Para um site simples (portfólio, currículo online, landing page única), HTML + CSS resolvem 100% das necessidades. JavaScript entra quando você precisa de interatividade real (calculadora, validação de formulário, slider de imagens).
Quando criar site em HTML puro vs WordPress
HTML puro é melhor para sites simples (portfólio, currículo, landing page única, site institucional pequeno) e para aprender. WordPress é melhor para sites com muito conteúdo (blogs, lojas, sites institucionais grandes) ou quando você não quer programar para fazer atualizações.
Comparação direta:
| Critério | HTML puro | WordPress |
|---|---|---|
| Velocidade | Mais rápido | Rápido com cache |
| Curva de aprendizado | Precisa saber código | Visual, sem código |
| Atualização de conteúdo | Editar arquivos | Painel administrativo |
| Custo | Hospedagem grátis (GitHub Pages) | Hospedagem ~R$20-50/mês |
| Funcionalidades | O que você programar | Milhares de plugins |
| Manutenção | Nenhuma (não tem banco de dados) | Atualizações regulares |
| SEO | Total controle | Plugins facilitam |
Para blog com posts frequentes, WordPress. Para portfólio que muda pouco, HTML puro. Para loja online, WordPress com WooCommerce ou plataforma especializada.
Perguntas frequentes
Preciso saber programação para criar site em HTML?
Não. HTML é linguagem de marcação, não de programação. Você organiza conteúdo usando tags pré-definidas, sem precisar de lógica condicional, variáveis ou algoritmos. Qualquer pessoa consegue aprender o básico em algumas horas.
Quanto tempo leva para aprender HTML?
Para o básico necessário para criar um site simples, 5 a 10 horas de prática. Para dominar todas as tags e boas práticas, semanas. HTML5 tem cerca de 100 tags, mas as 20 mais usadas resolvem quase tudo.
Posso criar site HTML pelo celular?
Sim, mas com limitações. Apps como Acode (Android) ou Koder (iOS) funcionam como editores. Mas o desenvolvimento sério é muito mais produtivo em computador, pelo teclado e tela maior.
HTML serve para criar e-commerce?
Tecnicamente sim, mas não é recomendado. E-commerce precisa de carrinho, pagamento, cadastro de clientes — coisas que exigem banco de dados e processamento no servidor. Para loja, use WooCommerce, Shopify, Nuvemshop ou similar.
Preciso de domínio para criar site HTML?
Não para começar. GitHub Pages dá uma URL gratuita do tipo seuusuario.github.io. Para domínio próprio (tipo meusite.com.br), aí sim você compra um e aponta para a hospedagem. Custa cerca de R$ 40/ano para .com.br.
HTML é gratuito?
Completamente. HTML é um padrão aberto mantido pelo W3C. Não tem licença, não tem assinatura. Qualquer pessoa pode usar para criar quantos sites quiser, comercial ou pessoalmente.
Qual a diferença entre HTML e HTML5?
HTML5 é a versão mais recente do HTML, lançada em 2014 e atualizada continuamente. Adiciona suporte nativo a vídeo, áudio, gráficos (canvas), tags semânticas (<header>, <nav>, <footer>) e APIs modernas. Hoje, “HTML” e “HTML5” são tratados como sinônimos na prática.
