HTML é a espinha dorsal da internet atual. Milhões de sites juntos formaram a internet. Onde HTML é a base de todos esses sites. Vinte anos atrás, mesmo que você fosse apenas um blogueiro amador, precisava saber um pouco de programação web para se proteger ou para adicionar uma função simples ao seu site. Mas agora existem tantos editores e plugins disponíveis que nem mesmo saber o básico de HTML é mais necessário.
O problema é que, se você não souber algumas noções básicas, pode facilmente ter problemas sérios no seu blog e ter que contratar um desenvolvedor caro para consertar o que pode ser um problema menor. Além disso, fazer alterações no seu blog, como adicionar um widget de texto personalizado, exige um pouco de conhecimento.
E se você perceber que o layout do conteúdo não parece correto, o conhecimento de HTML pode ajudar você a voltar ao caminho certo.
Antes de começar – O básico do HTML
O que é HTML?
HTML é a abreviação de HYper Text MArkupe LLinguagem. É a linguagem padrão para marcação de conteúdo em navegadores da web.
HTML é representado por “Elementos”. Elementos também são conhecidos como “Tags”.
Por que o HTML é necessário?
Os navegadores da web só conseguem renderizar um site quando ele é escrito na linguagem de marcação suportada. HTML é a linguagem de marcação mais comum e tem a maior aceitação entre os navegadores da web.
É por isso que você precisa de HTML.
O HTML diferencia maiúsculas de minúsculas?
HTML não diferencia maiúsculas de minúsculas. Mas a melhor prática é escrever HTML com as letras maiúsculas e minúsculas corretas.
Etapas para criar seu primeiro arquivo HTML
Você pode criar um arquivo HTML básico usando o Bloco de Notas do seu computador. Mas será trabalhoso escrever muitas linhas de código.
Você precisa de um editor de código. Um bom editor de código facilitará a escrita e a organização de códigos grandes. Eu uso e recomendo o Notepad++ (gratuito e de código aberto) para escrever linguagens web. Existem outros editores que você pode usar, como Sublime Text, Atom etc.
Aqui está o que você precisa fazer:
- Instalar um editor de código
- Abra-se
- Crie um novo arquivo
- Salve-o como um arquivo .html
1. Olá, mundo!
Copie e cole o código a seguir no seu novo arquivo HTML e salve-o. Agora execute-o no seu navegador.
Código HTML
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Saída:
Parabéns! Você criou seu primeiro arquivo HTML. Você não precisa entender nada sobre ele neste momento. Abordaremos isso em breve.
Compreendendo a estrutura HTML
Todo arquivo HTML tem uma estrutura básica comum. É aqui que tudo começa. E cada página grande de código chegará a essa estrutura após ser reduzida.
Então, vamos tentar entender a partir do código "Hello World!". Os seguintes elementos são partes obrigatórias de todo arquivo HTML.
- = É uma declaração ao navegador de que este é um arquivo HTML. Você deve especificá-lo antes do marcação.
- = Este é o elemento raiz de um arquivo HTML. Tudo o que você escreve vai entre e .
- = Esta é a parte de meta informações de um navegador. Os códigos dentro desta tag não têm saída visual.
- = Esta é a parte que um navegador da web renderiza. O que você vê exatamente em um site é a renderização de códigos entre e .
2. Tags HTML
HTML é a colaboração de centenas de tags diferentes. Você precisa aprender como elas funcionam. Você também precisa garantir que elas sejam utilizadas da maneira correta.
As tags HTML geralmente têm uma tag de abertura e uma de fechamento. A tag de abertura tem a palavra-chave cercada por um sinal de menor que (<) e um sinal de maior que (>). A tag de fechamento tem tudo igual, exceto por uma barra (/) extra após o sinal de menor que (<).
Etiquetas de cabeça
Todas as tags de cabeça vão entre e . Eles contêm metadados para navegadores da web e mecanismos de busca. Basicamente, não têm saída visual.
A tag de título define o título de uma página da web, visível na aba do navegador. Essa informação é usada por programas da web e mecanismos de busca. Você pode ter no máximo um título por arquivo HTML.
Código:
<title>My first web page</title>
A tag Link vincula sua página HTML a recursos externos. Seu principal uso é vincular páginas HTML a folhas de estilo CSS. É uma tag de fechamento automático e não precisa de finalização. . Aqui rel significa relação com o arquivo e src significa a fonte.
Código:
<link rel="stylesheet" type="text/css" src="style.css">Meta é outra tag de fechamento automático que fornece meta informações de um arquivo HTML. Mecanismos de busca e outros serviços da web usam essas informações. Meta tags são essenciais se você deseja otimizar sua página para mecanismos de busca.
Código:
<meta name="description" content="This is the short description that search engines show"A tag de script é usada para incluir um script do lado do servidor ou criar um link para um arquivo de script externo. Pode ter dois atributos na tag de abertura. Um é o tipo e outro é a fonte (src).
Código:
<script type="text/javascript" src="scripts.js"></script>A tag Noscript funciona quando os scripts estão desabilitados em um navegador. Ela torna a página compatível para quem não permite scripts em seus navegadores.
Código:
<noscript><p>Alas! Scripts are disabled.</p></noscript>Etiquetas corporais
Todas as etiquetas do corpo vão entre e . Elas têm saídas visuais. É aqui que a maior parte do trabalho é feita. Você precisa usar essas tags para estruturar o conteúdo da sua página principal.
para
Estas são as tags de título. O título mais importante é marcado com e o menos importante com . Você deve usá-los na hierarquia correta.
Código:
<h1>This is a h1 heading</h1>
<h2>This is a h2 heading </h2>
<h3>This is a h3 heading </h3>
<h4>This is a h4 heading </h4>
<h5>This is a h5 heading </h5>
<h6>This is a h6 heading </h6>Saída:
Tags de formatação
O texto em um arquivo HTML pode ser formatado usando diversas tags de formatação. Isso será necessário quando você quiser destacar uma palavra ou linha do seu conteúdo.
Código:
<p>You can highlight your text in many ways.</p>
<p>You can <strong>bold</strong>, <u>underline</u>, <em>italic</em>, <mark>mark</mark>, <sub>subscript</sub>, <sup>superscript</sup> and more!</p>Saída:
Você pode desviar alguns códigos da renderização usando a tag comment. O código aparecerá no código-fonte, mas não será renderizado. O principal uso desta tag é criar documentação de arquivos HTML para referência futura.
Exemplo:
<!-- <p>You can comment out any code by surrounding them in this way</p> -->Outras tags HTML importantes
Âncora é uma tag inestimável usada em quase todos os lugares. Você não verá nenhuma página da web sem pelo menos um link de âncora.
A estrutura é a mesma. Possui uma parte de abertura e uma parte de fechamento . O texto que você deseja ancorar fica entre e .
Existem alguns atributos que definem para onde e como o usuário vai depois de clicar nele.
- ahref=” “ = Define o link de destino. O link fica entre aspas duplas.
- alvo=” “ = Define se a URL será aberta em uma nova aba do navegador ou na mesma aba. target=”_blank” é para a nova aba e target=”_self” é para abrir na mesma aba.
- rel=” “ = Define a relação da página atual com a página vinculada. Se você não confia na página vinculada, pode definir rel="nofollow".
Código:
<p><a target="_blank" href="https://www.google.com/">Click here</a> to go to Google.
It will open in a new tab.</p>
<p><a target="_self" href="https://www.google.com/">Click here</a>.
It will also take you to Google but will open in the current tab.</p>Saída:
A tag de imagem é outra tag importante sem a qual você não consegue imaginar muitos sites baseados em imagens.
é uma tag de fechamento automático. Não precisa do fechamento tradicional como . Há alguns atributos que você precisa saber antes de poder usá-lo corretamente.
- origem=” “ = Isto serve para definir o link de origem da imagem. Coloque o link entre aspas duplas.
- alt=” “ = Significa texto alternativo. Quando sua imagem não estiver carregando, este texto dará aos usuários uma ideia sobre a imagem ausente.
- largura=” “ = Define a largura de uma imagem em pixels.
- Altura=” “ = Define a altura de uma imagem em pixels.
<p>This is the Googleplex in August 2014.</p>
<p>This image has a width of 500 pixels and a height of 375 pixels.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG"
alt="Google's Headquarter in August 2014" width="500" height="375" />Saída:
Dicas: Quer inserir uma imagem clicável? Envolva o código da imagem com uma tag. Veja como funciona.
ou
A tag List serve para criar uma lista de itens. significa listas ordenadas (lista numerada) e significa listas não ordenadas (marcadores).
Os itens da lista dentro do ou está marcado com . li significa lista. Você pode ter quantas como você quer dentro do pai ou marcação.
Código:
<p>This is an ordered list:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>This is an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Saída:
A tag Table serve para criar uma tabela de dados. Existem algumas tags de nível interno que definem cabeçalhos, linhas e colunas da tabela.
é o código pai externo. Nesta tag, significa fileira de mesa, significa coluna de tabela e significa cabeçalho de tabela.
Código:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
<tr>
<td>Jo
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</table>Saída:
Nota: Valores dentro do primeiro são títulos. Então, usamos que aplica efeito de texto em negrito ao texto.
Agrupamento de Tabelas
Você pode estender a funcionalidade de uma tabela usando elementos de agrupamento de tabelas. Haverá momentos em que você precisará criar tabelas grandes que podem ser divididas em várias páginas.
Ao agrupar os dados da sua tabela em cabeçalho, corpo e rodapé, você pode permitir a rolagem independente. O cabeçalho e o corpo serão impressos em todas as páginas em que a tabela estiver localizada.
As tags de agrupamento de tabelas são:
- = Para quebrar os títulos de uma tabela. Imprime em todas as páginas divididas da tabela.
- = Para encapsular os dados principais de uma tabela. Você pode ter quantos conforme você precisa. A tag significa um grupo separado de dados.
- = Para encapsular as informações de rodapé de uma tabela. Imprime em todas as páginas divididas da tabela.
Observe que o uso de agrupamento não é obrigatório. Você pode usá-lo para tornar tabelas maiores mais legíveis. Alguns desenvolvedores utilizam essas tags como seletores CSS.
Aqui está como podemos agrupar nossa tabela exemplificada em , e :
Código:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Persons:</td>
<td>3</td>
</tr>
</tfoot>
</table>Saída:
O elemento Form é usado para criar formulários interativos para páginas da web. Um formulário HTML contém vários elementos consecutivos. Por exemplo : , etc.
O atributo action no formulário é muito importante. Ele aponta para uma página do lado do servidor ou de terceiros para processamento das informações. Para o processamento, você precisa primeiro definir um método.
Você pode usar um dos dois métodos: get ou post. Get envia todas as informações no formato de URL, enquanto Post envia as informações no corpo da mensagem.
Existem muitos tipos de entrada para formulários. O tipo de entrada mais básico é o texto. Ele é escrito como . Os tipos também podem ser rádio, caixa de seleção, e-mail e assim por diante. Deve haver uma entrada de tipo de envio na parte inferior para criar um botão de envio.
A tag é usada para criar rótulos e associá-los às entradas. A regra para associar rótulos às entradas é que eles tenham o mesmo valor no atributo for=” ” do rótulo e no atributo id=” ” da entrada.
Código:
<form action="#">
<label for="firstname">First Name: </label>
<input type="text" id="firstname"><br>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname"><br>
<label for="bio">Short Bio: </label>
<textarea id="bio" rows="10" cols="30" placeholder="Enter your bio here..."></textarea><br>
<label>Gender:</label><br>
<label for="male">Male</label>
<input type="radio" name="gender" id="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female"><br>
<input type="submit" value="Submit">
<form>Saída:
Nota: Apontei a ação para um valor nulo porque ela não estava conectada a nenhum servidor para processar as informações.
3. Atributos HTML
Atributos são um tipo de modificador para tags HTML. Eles adicionam novas configurações às tags HTML.
Um atributo se parece com attributename="" e fica na tag HTML de abertura. O valor do atributo fica entre aspas duplas.
id=”” e classe=””
id e class são os identificadores de tags HTML. Nomes diferentes são atribuídos a diferentes elementos HTML usando identificadores. Você pode usar um identificador de classe para vários elementos. Mas não pode usar um identificador id para vários elementos.
Código:
<h1 class="heading">This is the main title</h1>href=””
href significa Referência de Hipertexto. Ela direciona os usuários para links de referência. A tag âncora usa href para direcionar os usuários a uma URL de destino.
Código:
<a href="https://www.google.com/">Google</a>fonte=””
src significa fonte. Define a fonte de uma mídia ou recurso que você está usando no arquivo HTML. A fonte pode ser uma URL local ou de terceiros.
Código:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />alt=””
alt significa alternativa. É um texto de backup que é usado quando um elemento HTML não pode ser carregado.
Código:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter" />estilo=””
O atributo style é frequentemente usado em tags HTML. Ele faz o trabalho do CSS dentro da tag HTML. Suas propriedades de estilo ficam entre aspas duplas.
Código:
<h2 style="color:red">This is another title</h2>4. Exibição de código: bloco vs. em linha
Alguns elementos sempre começam em uma nova linha e ocupam toda a largura disponível. São os elementos "Bloco".
Ex: , , - , formulário etc.
Alguns elementos ocupam apenas o espaço necessário e não começam em uma nova linha. São os elementos "Inline".
Exemplo: , , , , etc.
Você precisará diferenciar elementos de bloco de elementos inline ao usar estilos CSS. Neste guia de HTML, isso não é muito necessário.
Código:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h2>This is a H2 heading. It has Block display.</h2>
<h2>This is <u>another</u> H2 heading. Here the underline tag has Inline display.</h2>
</body>
</html>Saída:
5. Aspas duplas vs aspas simples em HTML
Esta pergunta é bastante óbvia. O que usar em HTML? Aspas simples ou duplas? As pessoas parecem usar as duas, mas qual é a correta?
Em HTML, aspas simples e duplas são a mesma coisa. Elas não fazem diferença no resultado final.
Você pode usar qualquer um que preferir. Mas misturar os dois em uma página de códigos é considerado uma má prática. Você deve ser consistente com qualquer um deles.
6. HTML semântico vs. HTML não semântico
HTML semântico é a versão mais recente do HTML, também chamado de HTML5. É a versão desenvolvida do HTML não semântico e do XHTML.
Por que o HTML5 é melhor? Em versões anteriores, os elementos HTML eram identificados por nomes de id/classe. Por exemplo: foi considerado um artigo.
Em HTML5, tag se representa como um artigo sem precisar de nenhum id/identificador de classe.
Graças ao HTML5, mecanismos de busca e outros aplicativos da web agora conseguem entender melhor uma página. Sites semânticos comprovadamente têm melhor desempenho em SEO.
Aqui está uma lista de algumas tags HTML5 populares:
- = Isso serve para encapsular o conteúdo principal que você deseja mostrar aos seus espectadores.
- = Isto serve para marcar a parte do cabeçalho de um conteúdo, como título ou meta do autor.
- = Especifica um conteúdo definido pelo usuário ou independente para seus espectadores.
- = Pode agrupar qualquer código, como cabeçalho, rodapé ou barra lateral. Pode-se dizer que é a forma semântica de uma div.
- = É aqui que o conteúdo do rodapé, o aviso de isenção de responsabilidade ou o texto de direitos autorais devem ficar.
- = Permite que você insira arquivos de áudio sem ter nenhum problema com plugins.
- = Curtir , você pode inserir vídeos usando esta tag sem problemas de plugin.
Uma estrutura HTML5 simples seria assim:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first web page</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>This is the title of the article</h2>
<p>Posted by John Doe</p>
</header>
<p>Content of the article goes here</p>
</article>
</main>
<footer>
<p>Copyright 2025 John Doe</p>
</footer>
</body>
</html>7. Validação HTML
A maioria dos profissionais da web valida seu código após finalizá-lo. Por que é necessário validar um código quando ele está funcionando bem?
Há dois motivos possíveis para validar seus códigos:
- Isso ajudará você a tornar seu código compatível com vários navegadores e plataformas. O código pode não apresentar erros no seu navegador atual, mas pode apresentar em outro. A validação de código corrigirá o problema.
- Mecanismos de busca e outros programas da web podem parar de rastrear sua página se houver erros. Você pode confirmar por meio da validação que não há nenhum erro grave.
O W3C Validator é o serviço mais popular para validação de código. Eles oferecem diversos métodos para validar códigos. Você pode enviar um arquivo ou inserir o código diretamente no mecanismo de validação.
Dando o próximo passo: da escrita em HTML à construção e hospedagem do seu site
Agora que você tem um conhecimento sólido dos fundamentos do HTML, está no caminho certo para criar páginas web funcionais e bem estruturadas. Quer você continue codificando manualmente ou prefira uma abordagem mais simplificada, existem diversas ferramentas para ajudar você a dar vida aos seus projetos.
Se você está procurando construir sites sem se aprofundar no código, considere explorar nossa lista dos melhores construtores de sites sem código. Essas plataformas permitem que você crie e lance sites profissionais com facilidade, usando interfaces intuitivas de arrastar e soltar — perfeitas para transformar rapidamente suas ideias em realidade sem sacrificar a flexibilidade.
Para quem está pronto para colocar seus projetos HTML no ar, escolher o serviço de hospedagem certo é crucial. Confira alguns dos melhores provedores de hospedagem de sites estáticos neste guia para encontrar opções acessíveis que complementem perfeitamente seus sites codificados manualmente.
Seja qual for o caminho que você escolher, combinar suas habilidades em HTML com as ferramentas e soluções de hospedagem certas estabelecerá a base para sua presença online. Boa programação!
