O arquivo index.html é a página inicial do seu site — é ele que aparece quando alguém digita o endereço do seu domínio no navegador. Por isso, criar esse arquivo costuma ser o primeiro passo de qualquer site feito do zero.
Neste guia, você vai aprender o passo a passo para criar um arquivo index.html, montar sua estrutura básica, adicionar conteúdo e fazer o upload para a sua hospedagem.
Conteúdo
Entendendo o arquivo index.html
O index.html é o arquivo que o servidor procura e exibe automaticamente quando alguém acessa o seu site. Quando você digita seusite.com.br, o navegador carrega o conteúdo desse arquivo como página inicial — sem precisar informar o nome dele no endereço.
É por isso que o nome precisa ser exatamente “index”: é uma convenção que praticamente todos os servidores web seguem. Se o arquivo tivesse outro nome, o visitante teria que digitá-lo manualmente na URL para acessá-lo.
E funciona em qualquer pasta, não só na raiz. Um arquivo em public_html/sobre/index.html é exibido quando alguém acessa seusite.com.br/sobre — sem .html no endereço.
É assim que se criam URLs limpas num site estático: uma pasta por página, cada uma com o seu index.html.
Ferramentas Necessárias
Antes de começarmos, certifique-se de ter um editor de texto instalado, como Visual Studio Code ou Sublime Text. Além disso, você precisará de um navegador web para visualizar seu trabalho à medida que avança.
⚠️ Se você usar o Bloco de Notas do Windows, mude “Salvar como tipo” de “Documentos de texto” para “Todos os arquivos” antes de salvar. Sem isso, o Windows acrescenta .txt ao nome — o arquivo vira index.html.txt e o navegador não o reconhece como página.
Estrutura Básica do HTML
Vamos começar criando a estrutura básica do HTML. Abra seu editor de texto e insira o seguinte código:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minha Página</title>
</head>
<body>
<!-- Seu conteúdo vai aqui -->
</body>
</html>
Esta estrutura inclui elementos essenciais como a tag <html>, <head>, <title>, e <body>.
Adicionando Conteúdo
Agora que temos a estrutura, vamos adicionar alguns elementos de conteúdo simples:
<!-- Seu conteúdo vai aqui -->
<h1>Bem-vindo ao Meu Site</h1>
<p>Este é um exemplo de parágrafo.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<a href="https://www.exemplo.com">Visite Exemplo.com</a>
Estilo com CSS (opcional)
Para adicionar um toque de estilo, você pode incorporar uma seção CSS:
<!-- Dentro da tag <head> -->
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
/* Adicione mais estilos conforme necessário */
</style>
O template completo, comentado
A estrutura acima é o mínimo. Este é o index.html que vale usar como ponto de partida — cada linha comentada, tudo que uma página real precisa:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<!-- Codificação: garante acentos corretos -->
<meta charset="UTF-8">
<!-- Responsividade: essencial para celular -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Título: aparece na aba e no Google -->
<title>Minha Empresa — o que fazemos</title>
<!-- Descrição: o texto abaixo do título nos resultados de busca -->
<meta name="description" content="Descrição de até 155 caracteres sobre a página.">
<!-- Compartilhamento em redes sociais -->
<meta property="og:title" content="Minha Empresa">
<meta property="og:description" content="A mesma descrição, ou uma versão adaptada.">
<meta property="og:image" content="https://seusite.com.br/imagem.jpg">
<!-- Ícone da aba -->
<link rel="icon" href="/favicon.png">
<!-- Estilos em arquivo separado -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Minha Empresa</h1>
<nav>
<a href="/">Início</a>
<a href="/sobre">Sobre</a>
<a href="/contato">Contato</a>
</nav>
</header>
<main>
<p>O conteúdo principal da página.</p>
</main>
<footer>
<p>© 2026 Minha Empresa</p>
</footer>
</body>
</html>⚠️ Três linhas que fazem diferença e quase todo mundo esquece: a meta description, que é o texto exibido no Google; as tags og:, que definem como o link aparece no WhatsApp e nas redes; e o lang="pt-BR", que informa o idioma a leitores de tela e buscadores.
Visualizando no Navegador
Salve o arquivo como index.html e abra-o em um navegador. Você verá sua página com o conteúdo e estilo que adicionou.
Adicionando em seu site através do Gerenciador de Arquivos
Após criar o index.html, é necessário subi-lo em sua hospedagem de site. Aqui na Homehost os planos possuem o painel de Gerenciamento de Arquivos e você pode realizar o upload por lá, mas vamos lhe ensinar através do cPanel.
Como alternativa, o arquivo index.html pode ser enviado também através de FTP.
Acesse gerenciador de arquivos da sua hospedagem
Faça login no seu Gerenciador de arquivos de seu domínio. Normalmente, você encontra isso pelo Painel de Controle, ou através de seu domínio seguido por /cpanel, como, por exemplo, http://seusite.com/cpanel
Navegue até o Gerenciador de Arquivos:
Em outros sistemas, você precisa encontrar o WebUpload, “gerenciamento de html” ou “gerenciador de arquivos”. No cPanel, procure por “Gerenciador de Arquivos” “Gerenciador de Ficheiros”, ou “File Manager” e clique nele.
Encontre a pasta public_html:
No “Gerenciador de Arquivos”, localize a pasta “public_html”. É aqui que você armazena os arquivos do seu site.
Acessando a área de Upload do Arquivo HTML (index.html):
Com a pasta “public_html” aberta, clique em “Carregar”, “Upload” ou “Enviar”, localizado na parte superior. Ao clicar, você irá acessar uma nova página.
Faça o Upload
Clicando em carregar, você irá verificar um campo com seleção do arquivo.
Após o upload, o arquivo “index.html” estará listado na pasta public_html.
Visualize seu Site
Acesse o seu site digitando o endereço do seu domínio no navegador. O arquivo “index.html” será carregado como a página inicial.
Obs: Caso seu site tenha um outro arquivo nesta mesma pasta com nome de index.html ou index.php, renomeie o arquivo antes de enviar o criado com este tutorial.
Pronto! Você adicionou com sucesso um arquivo HTML chamado “index.html” à sua pasta public_html usando o gerenciador de arquivos web no cPanel. Este arquivo será a página inicial padrão do seu site. Lembre-se de que o procedimento pode variar um pouco dependendo do seu provedor de hospedagem específico.
Se o seu site usa PHP (como o WordPress), o arquivo equivalente é o index.php — veja as diferenças.
Dicas para o seu index.html
- Mantenha o nome exato: o arquivo precisa se chamar
index.html, tudo em minúsculas. Nomes comoIndex.htmlouindex.htmpodem não ser reconhecidos como página inicial pelo servidor.
- Use
lang="pt-BR"na tag<html>para páginas em português. Isso ajuda navegadores, leitores de tela e os mecanismos de busca a entenderem o idioma do seu conteúdo.
- Valide seu código no validador oficial do W3C. Ele aponta erros de HTML que podem passar despercebidos e quebrar a exibição da página em alguns navegadores.
- Mantenha o
<meta charset="UTF-8">no cabeçalho. É ele que garante a exibição correta de acentos e caracteres especiais do português, evitando aqueles símbolos estranhos no lugar de “ç” e “ã”.
- Separe o CSS quando o site crescer: para uma página simples, o estilo dentro do
<head>funciona bem. Mas conforme o site aumenta, o ideal é mover o CSS para um arquivo separado (comostyle.css), deixando o código mais organizado.
- Faça backup antes de substituir: se já existe um arquivo
index.htmlouindex.phpna pastapublic_html, baixe uma cópia antes de enviar o novo, para não perder o conteúdo anterior.
Perguntas frequentes
Para que serve o arquivo index.html?
É o arquivo que o servidor exibe automaticamente como página inicial do site. Quando alguém digita o endereço do seu domínio, é o conteúdo do index.html que aparece, sem precisar informar o nome do arquivo na URL.
Onde devo salvar o arquivo index.html?
Na pasta public_html, que é a raiz pública do seu site na hospedagem. Arquivos colocados fora dela não aparecem — é a causa mais comum de “subi o arquivo e nada mudou”.
Por que meu index.html não abre como página inicial?
Três causas, nesta ordem: o nome do arquivo está diferente de index.html, existe um index.php na mesma pasta com prioridade, ou o arquivo não está dentro da public_html. Confira as três antes de mexer em qualquer configuração.
Qual a diferença entre index.html e index.php?
O index.html exibe conteúdo estático, sempre igual. O index.php gera conteúdo dinâmico, processado pelo servidor a cada acesso. Se os dois existirem na mesma pasta, o servidor geralmente prioriza o index.php — e o HTML é ignorado.
O nome do arquivo pode ter maiúscula?
Não convém. Em servidores Linux — a maioria das hospedagens —, Index.html e index.html são arquivos diferentes, e só o segundo é reconhecido como página inicial. Use sempre minúsculas.
Posso usar .htm em vez de .html?
Funciona na maioria dos servidores, mas não é o padrão. A extensão .htm é herança de sistemas antigos que limitavam nomes a três caracteres, e alguns servidores não a incluem na lista de arquivos de índice. Prefira .html.
Preciso saber programar para criar um index.html?
Não. HTML não é linguagem de programação — é linguagem de marcação, que descreve conteúdo sem executar lógica. Para uma página simples, basta um editor de texto e a estrutura básica mostrada neste guia.
Como faço o upload do index.html para o meu site?
Pelo Gerenciador de Arquivos do painel de controle — cPanel ou DirectAdmin —, enviando o arquivo para a pasta public_html. A alternativa é um programa de FTP, como o FileZilla, que é mais prático quando você envia muitos arquivos de uma vez.
Preciso de um servidor para testar meu index.html?
Não para testar. Basta abrir o arquivo com dois cliques e ele carrega no navegador, direto do seu computador. O servidor só é necessário quando você quiser que outras pessoas acessem a página pela internet.
Meu site já tem um index.html. Posso substituir?
Pode, mas baixe uma cópia do atual antes. Enviar um arquivo com o mesmo nome sobrescreve o anterior sem aviso, e o conteúdo antigo se perde — a menos que exista backup da hospedagem.
Por que os acentos aparecem como símbolos estranhos?
Falta a linha <meta charset="UTF-8"> no <head>, ou o arquivo foi salvo em outra codificação. Verifique as duas coisas: a tag no cabeçalho, e a codificação do arquivo no editor de texto, que deve ser UTF-8.
Posso criar o index.html pelo celular?
Dá para escrever num aplicativo de notas e enviar pelo Gerenciador de Arquivos do painel, acessando pelo navegador. Mas não é confortável — alguns aplicativos de notas salvam em formatos que não são texto puro, e o arquivo pode não funcionar. Para um arquivo só, funciona; para mais que isso, use o computador.
Conclusão
Criar um index.html é a coisa mais simples que se pode fazer na web — um arquivo de texto, um nome específico, e uma pasta certa. E é também o momento em que um site deixa de ser uma ideia e passa a existir num endereço.
Três coisas decidem se ele funciona. O nome exato, tudo em minúsculas — Index.html ou index.htm podem não ser reconhecidos. A pasta public_html, que é onde o servidor procura. E a ausência de um index.php na mesma pasta, que teria prioridade sobre ele.
Se a página não abrir depois do upload, é quase sempre uma dessas três. E se abrir, você acabou de publicar um site — que é um passo pequeno com uma diferença grande.
