O que é HTML? Entenda de forma descomplicada

HTML é a linguagem que estrutura o conteúdo de toda página da web. Ele define o que é título, o que é parágrafo, onde entra uma imagem e para onde leva cada link — e é a primeira coisa que o navegador lê ao abrir um site.

A sigla vem de HyperText Markup Language, ou Linguagem de Marcação de Hipertexto. E a palavra “marcação” é a chave: o HTML não executa nada, ele descreve.

Neste guia você vai entender como o HTML funciona, o que são tags, a estrutura de um documento, a relação com CSS e JavaScript, e por que ele não é uma linguagem de programação.

O que é HTML?

Criada pelo britânico Tim Berners-Lee, o acrônimo HTML significa HiperText Markup Language, traduzindo ao português: Linguagem de Marcação de Hipertexto.  O HTML é o componente básico da web, ele permite inserir o conteúdo e estabelecer a estrutura básica de um website. Portanto, ele serve para dar significado e organizar as informações de uma página na web. Sem isso, o navegador não saberia exibir textos como elementos ou carregar imagens e outros conteúdos.

Os hipertextos são conjuntos de elementos conectados. Esses podem ser palavras, imagens, vídeos, documentos, etc. Quando conectados, formam uma rede de informações que permite a comunicação de dados, organizando conhecimentos e guardando informações.

Ao visitar uma página simples na web, você pode perceber que existem diferentes distribuições e tamanhos para títulos, parágrafos, imagens, vídeos e qualquer outro elemento. Essa estrutura é estabelecida através do HTML. No início da web, era comum encontrar sites apenas contendo textos e imagens simples, com estrutura básica e sem estilizações. Porém, nos dias atuais, muito dificilmente você encontrará sites que possuam apenas elementos HTML. Portanto, podemos considerar o HTML o “esqueleto” da sua página.

Imagine então que, além do esqueleto, é necessário ter o corpo. Para isso, temos então as linguagens CSS e JavaScript, que em conjunto com HTML, formam a base para todos os websites atuais. Veremos mais à frente o que significam essas linguagens.

Como funciona o HTML

Através de um documento HTML, ou seja, um documento com a extensão .html ou .htm., o navegador faz a leitura do arquivo e renderiza o seu conteúdo para que o usuário final possa visualizá-lo. Os arquivos .html podem ser visualizados em qualquer navegador (como Google Chrome, Safari, ou Mozilla Firefox).

Geralmente, um site é composto por diversas páginas HTML, como por exemplo: um website que contenha três páginas (uma homepage, uma página de contato e uma página de produtos) receberá ao menos três documentos .html distintos, sendo um para cada página do website.

O código pode ser escrito através de qualquer editor de texto, como o próprio bloco de notas. Cada página consiste em uma série de tags (também chamadas de elementos) que podem ser considerados os blocos de construção das páginas. Portanto, esses blocos são a maneira com a qual o HTML faz a marcação dos conteúdos, criando a hierarquia e a estrutura do mesmo, dividido entre seções, parágrafos, cabeçalhos, e outros.

O que são tags

Através de qualquer editor de texto, como o Sublime Text, o NotePad++ ou até mesmo o Bloco de Notas, é possível criar um documento com a extensão .html que será renderizado pelos navegadores.

Conforme explicado anteriormente, este documento consiste em uma série de tags. As tags são códigos que definem toda a estrutura da página, tais como o seu tamanho, a fonte da letra, as cores, as quebras de linha e etc. A maioria dos elementos do documento HTML é composta por uma estrutura de abertura e uma de fechamento, como <tag> e </tag>. Há também tags de estrutura única, como a  tag <br/> que realiza uma quebra de linha.

Digamos que você queira escrever um parágrafo. Chamamos então a tag <p>, escrevemos o parágrafo e finalmente fechamos a tag com </p>:

<p>Meu primeiro parágrafo.</p>

Dessa forma, ao salvar o arquivo com a extensão .html e abri-lo em um navegador, você verá o parágrafo escrito na tela do navegador.

Algumas tags não têm fechamento, e são chamadas de elementos vazios: elas não envolvem conteúdo nenhum, então não faz sentido fechá-las. As mais comuns são <img>, <br>, <hr>, <input> e <meta>.

E a ordem do fechamento importa. Tags podem ficar dentro de outras — é assim que a estrutura se forma —, mas precisam ser fechadas na ordem inversa da abertura:

✅ <p>Um <strong>destaque</strong> aqui.</p>
❌ <p>Um <strong>destaque</p></strong>

O navegador tenta consertar o segundo caso, mas o resultado é imprevisível.

Os atributos

Muitas tags aceitam atributos — informações extras escritas dentro da tag de abertura, no formato nome="valor".

<a href="https://exemplo.com">clique aqui</a>
<img src="foto.jpg" alt="Descrição da foto">

No primeiro caso, o href diz para onde o link leva. No segundo, o src diz onde está a imagem e o alt descreve o que ela mostra.

A tag diz o que é; o atributo diz os detalhes. Sem o href, um <a> não leva a lugar nenhum; sem o src, um <img> não mostra imagem nenhuma.

⚠️ O alt merece atenção especial: ele é o texto lido por leitores de tela e exibido quando a imagem não carrega. Imagem sem alt é imagem invisível para quem não enxerga — e para o Google.

Para exibir símbolos que não estão no teclado — ou os próprios < e > sem que virem tags —, o HTML usa entidades. Nosso guia de caracteres especiais em HTML traz a tabela completa.

Principais tags do HTML

Atualmente existem mais de 140 tags, mas o uso diário gira em torno de umas vinte. Vale conhecê-las agrupadas por função — e prestar atenção especial ao terceiro grupo.

Estrutura do documento

• <html> — envolve todo o documento
• <head> — informações que não aparecem na tela: título, metadados, links externos
• <title> — o título que aparece na aba do navegador e nos resultados de busca
• <body> — tudo que é exibido na tela

Texto

• <h1> a <h6> — títulos e subtítulos, do mais importante ao menos
• <p> — parágrafo
• <br> — quebra de linha
• <strong> e <em> — destaque forte e ênfase

Tags semânticas

Estas são as que descrevem o papel do conteúdo, e não apenas o marcam. Foram a grande novidade do HTML5.

• <header> — o cabeçalho da página ou de uma seção
• <nav> — a área de navegação, como o menu
• <main> — o conteúdo principal, único por página
• <article> — um conteúdo que faz sentido sozinho, como um post
• <section> — uma seção temática dentro do conteúdo
• <aside> — conteúdo lateral ou complementar
• <footer> — o rodapé

⚠️ Por que elas importam: um <header> e uma <div class="header"> produzem exatamente a mesma aparência na tela — mas só a primeira informa ao navegador, ao buscador e ao leitor de tela que aquilo é um cabeçalho. É a diferença entre marcar e significar.

Genéricas

• <div> — uma divisão sem significado próprio
• <span> — um trecho de texto sem significado próprio

As duas existem para quando nenhuma tag semântica se aplica. Se existe uma que descreve melhor o conteúdo, use ela.

Links, mídia, listas e tabelas

• <a> — o link, com o atributo href. É a tag que define a web
• <img> — insere uma imagem
• <ul>, <ol>, <li> — lista não ordenada, ordenada, e o item
• <table> — tabela

Formulários

• <form> — envolve o formulário
• <input> — os campos
• <[textarea](https://www.homehost.com.br/blog/criar-sites/textarea-html/)> — área de texto longo
• <button> — botão

A estrutura básica de um documento HTML

Agora que já sabemos como funciona e quais as suas principais tags, vamos entender como é formada a estrutura básica de um documento HTML.

O documento deve conter uma declaração informando o doctype, que no caso do HTML5, basta declarar com o elemento <!DOCTYPE html>.

Ele não é decoração. Sem o DOCTYPE, o navegador entra no chamado quirks mode — um modo de compatibilidade com páginas dos anos 90, em que o layout se comporta de forma diferente e frequentemente quebra.

Após isso, iniciamos nosso documento com a tag <html> que deverá ser fechada ao final do documento com </html>.

Posteriormente, nosso documento deverá ter um elemento <head> que receberá todas as informações básicas da sua página, como o título, links de elementos externos, metadados, etc. Declaramos então um título para a página através da tag <title>. 

Finalmente abrimos então a tag <body> que consiste no corpo do nosso documento, onde ficarão todos os elementos que serão renderizados na tela do navegador. Dessa forma, temos a estrutura básica do nosso documento HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>

    <body>

    </body>
</html>

Para que os acentos e caracteres especiais sejam exibidos corretamente, é preciso declarar a codificação de caracteres. O padrão universal da web é o UTF-8, e ele se declara pela tag <meta> com o atributo charset.

Dessa forma, através da tag de metadados <meta/>, vamos declarar dentro de um atributo charset que nosso padrão é o UTF-8. Temos assim a estrutura básica de nosso documento HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8"/>
    </head>

    <body>

    </body>
</html>

Vamos agora aprender um pouco sobre a história do HTML e como evoluiu para se tornar o que é hoje.

Como surgiu o HTML

Em 1980, o físico britânico Tim Berners-Lee, iniciou um projeto baseado na Marcação de HiperTexto, denominado ENQUIRE. Este projeto foi realizado inicialmente por meio da linguagem de programação Pascal. Anos mais tarde, em 1989, Tim Berners-Lee e o estudante Robert Cailliau conseguiram implementar a primeira comunicação entre o usuário e servidor através do protocolo HTTP. Com isso, surgia então a World Wide Web (www), a web que conhecemos hoje.

Com o objetivo de facilitar a comunicação e a disseminação de documentos entre pesquisadores, ele criou então a linguagem de marcação de hipertexto, o HTML. A sua primeira versão foi publicada em 1991 e foi baseada na SGML, uma linguagem de marcação utilizada para a estruturação de documentos. O SGML já possuía diversas tags que foram herdadas pelo HTML. Contudo, a maior diferença entre essas duas linguagens, é que o HTML implementava a tag <a>, permitindo a ligação de uma página a outra, conhecida como link.  A interligação entre documentos é a base do funcionamento de toda a Web.

A linguagem de marcação de hipertexto ficou bastante conhecida quando começou a ser utilizada para formar a rede pública daquela época. Alguns anos mais tarde, se tornaria a linguagem padrão da internet que conhecemos hoje.

A evolução do HTML

Conforme visto anteriormente, a primeira versão do HTML surgiu no início da década de 90. Entre 1990 e 1995, passou por várias atualizações e modificações em sua estrutura. Até então, quem supervisionava e controlava o padrão da linguagem era o CERN. Desse ano em diante, a entidade que regula os padrões da web,  W3C (The World Wide Web Consortium), passou a supervisionar e controlar a linguagem de marcação de hipertextos, tornando-a uma linguagem padrão da web.

Em 1993, Dave Raggett propôs uma evolução do padrão, denominada HTML+. Entretanto, tal proposta nunca foi implementada e a primeira versão sucessora só surgiria em 1995.

1995 – Versão 2.0

Apesar de diversas atualizações e modificações, a primeira versão após a criação do HTML puro só foi surgir em 1995, a versão 2.0. Seu surgimento ocorreu no primeiro evento mundial sobre a Web, o World Wide Web Conference. O seu objetivo era formalizar todas as características do HTML que já eram utilizadas.

1997 – Versão 3.2

A versão 3.2, lançada em 1997, além de trazer novas funcionalidades à linguagem, corrigiu diversos problemas de compatibilidade da versão 2.0. Foi lançada pelo grupo de trabalho do W3C, fazendo com que ela fosse tratada como prática comum. O HTML 3.2 implementou características como tabelas, applets e texto flutuante ao redor de imagens.

1999 – Versão 4.0.1

Em 1999, a versão 4.0.1 foi lançada, trazendo a compatibilidade com as suas versões anteriores através de três implementações:

• Strict  – implementação na qual fica proibida a utilização de elementos obsoletos da linguagem;
• Transitional  – implementação na qual os elementos obsoletos são permitidos;
• Frameset – implementação direcionada para sites que usam frames.

Acrescentou novas funcionalidades com suporte para opções de multimídia e folhas de estilo. Também foi construído pensando em melhorar as práticas de programação. O HTML4 ocupou lugar de destaque no mundo web por muitos anos e até hoje ainda é utilizado por alguns desenvolvedores da web.

2000 – XHTML 1.0

No ano 2000, pouco tempo após incrementar a versão 4.0.1, foi lançada a primeira versão do XHTML, que combinava as vantagens do HTML com as do XML. O XHTML trazia uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de ser processado.

2004 – a fundação da WHATWG

Em 2004, foi fundado o WHATWG (Web Hypertext Application Technology Working Group) por desenvolvedores de grandes empresas como Mozilla, Apple e Opera. A partir desse momento, teve início o trabalho de criação da nova versão do HTML.

2014 – A grande mudança: a versão 5 do HTML

A versão 5 do HTML foi desenvolvida para aperfeiçoar a experiência da World Wide Web para os desenvolvedores e usuários finais. Ela trouxe grandes avanços para a linguagem. O HTML 5 fornece o suporte de áudio e vídeo em alto nível que, até então, não existia nas versões anteriores sem o uso de plug-ins. Essa nova versão também nasceu com uma proposta marcante: ela não é uma versão final, ou seja, seguirá recebendo mudanças ao longo do tempo.

Anteriormente, as versões não eram padronizadas para criação de seções comuns e específicas, como rodapés, cabeçalhos,  menus, artigos, etc. Com a introdução de tags como <header>, <footer>, <section>, <article>, <nav>, etc., o HTML5 trouxe uma forma semântica de se trabalhar com a linguagem. Com esse avanço, foi possível aumentar a interatividade sem a necessidade de instalação de plug-ins. É um código pronto para futuros dispositivos, facilitando a reutilização da informação de diferentes maneiras. Portanto, possibilita diversas funcionalidades que antes só eram possíveis com plugins, sem que isso sobrecarregasse o website, mantendo-o leve e rápido.

Com isso, as novas tags semânticas trouxeram grandes avanços para técnicas de SEO e para a leitura, pois informam ao navegador sobre o significado do conteúdo.

A relação entre HTML, CSS e JavaScript

Conforme explicado anteriormente, no início do artigo, o HTML servirá para marcar todos os elementos da nossa página. Ele funciona como se fosse o esqueleto de uma página. Porém, sozinho, o HTML é limitado a essa função, mesmo em sua versão mais atual.

Sendo assim, podemos definir que uma página web é composta por três camadas. O HTML formará a primeira camada que apresenta o conteúdo ao usuário. O CSS formará a segunda camada que dará forma aos elementos. Finalmente, o Javascript formará a terceira camada, que adicionará comportamentos dinâmicos à página.

CSS

Para poder dar forma ao nosso documento, é necessário trabalhar com o estilo em cascata, o CSS. Com isso, podemos estilizar todos os nossos elementos, aplicando espaçamentos, cores, posicionamentos, tamanhos de fontes, famílias de fontes, bordas e outros efeitos visuais que dão forma ao documento. Durante muito tempo, o estilo era aplicado diretamente na tag html. Hoje em dia, é possível utilizar um espaço dentro do seu documento html, através da tag <style></style> que deve ser declarada dentro do head, onde irá conter todo o CSS. Da mesma forma, pode-se utilizar uma folha de estilos externa, geralmente de extensão .css , o que deixa o código muito mais limpo e organizado. Atualmente, a versão mais recente do CSS é o CSS 3. Podemos considerar que o CSS é o corpo do nosso documento.

JavaScript

O JavaScript, diferentemente do HTML e do CSS, é uma linguagem de programação, e em conjunto com esses, ele é capaz de dar vida, gerar movimento ao site. Ele é o que tornará os elementos mais dinâmicos, pois é o JavaScript que permite a execução de scripts na nossa página. Dessa forma, quando o usuário está navegando em uma página e executa uma ação que resulta em um comportamento na página, muito provavelmente será um script que executará esse comportamento. Portanto, o JavaScript pode ser comparado com o movimento do corpo (e do esqueleto) da nossa página.

Perguntas frequentes

O que significa HTML?

HTML é a sigla de HyperText Markup Language — Linguagem de Marcação de Hipertexto, em português. Ela foi criada por Tim Berners-Lee no início dos anos 1990 e é a linguagem que estrutura o conteúdo de toda página da web.

HTML é uma linguagem de programação?

Não. HTML é uma linguagem de marcação: ela descreve e organiza o conteúdo, mas não executa lógica, não faz cálculos e não toma decisões. Quem cumpre esse papel numa página é o JavaScript, que é uma linguagem de programação de verdade.

Qual a diferença entre HTML, CSS e JavaScript?

Cada um cuida de uma camada. O HTML define o que existe na página — títulos, parágrafos, imagens, links. O CSS define como isso aparece — cores, tamanhos, espaçamentos, posições. O JavaScript define o que acontece — cliques, animações, validações, atualizações sem recarregar. A analogia comum é esqueleto, corpo e movimento.

O que são tags HTML?

São os códigos que marcam cada elemento da página, escritos entre sinais de menor e maior. A maioria vem em par — uma de abertura e uma de fechamento, como <p> e </p> —, mas algumas são únicas, como a <br> de quebra de linha. Existem mais de 140 tags, embora o uso diário gire em torno de umas vinte.

Qual a versão atual do HTML?

A última versão numerada foi o HTML5, de 2014 — e desde então, o HTML deixou de ter versões. Ele passou a ser um padrão vivo, mantido pelo WHATWG e atualizado continuamente. Na prática, quando alguém fala em “HTML5” hoje, está falando do HTML atual.

Preciso saber HTML para ter um site?

Não necessariamente. Plataformas como WordPress, Wix e construtores visuais geram o HTML para você. Mas conhecer o básico ajuda bastante em situações comuns: ajustar algo que o editor não permite, entender por que um elemento não aparece, ou colar um código de terceiros sem quebrar a página.

Onde escrevo o código HTML?

Em qualquer editor de texto — até o Bloco de Notas funciona. Basta salvar o arquivo com a extensão .html e abri-lo no navegador. Para trabalhar de verdade, editores como VS Code, Sublime Text e Notepad++ ajudam com destaque de sintaxe e autocompletar.

Para que serve a tag <meta charset="utf-8">?

Ela declara a codificação de caracteres do documento. Sem essa linha, acentos e caracteres especiais podem aparecer como símbolos estranhos — informação em vez de informação. O UTF-8 é o padrão universal da web e cobre praticamente todos os idiomas.

Qual a diferença entre HTML e HTML5?

HTML5 é a quinta e última versão numerada, lançada em 2014. Ela trouxe suporte nativo a áudio e vídeo, sem plugins, e as tags semânticas como <header>, <nav>, <article> e <footer>, que dizem ao navegador e aos buscadores o significado de cada parte da página — não só a aparência.

O que são tags semânticas e por que importam para SEO?

São tags que descrevem o papel do conteúdo em vez de apenas marcá-lo visualmente. Usar <header> em vez de uma <div> genérica informa ao buscador que aquele bloco é o cabeçalho. Isso ajuda os mecanismos de busca a entender a estrutura da página, e é essencial para leitores de tela usados por pessoas com deficiência visual.

O que são atributos HTML?

São informações extras escritas dentro da tag de abertura, no formato nome="valor". O href diz para onde um link leva, o src diz onde está uma imagem, e o alt descreve o que ela mostra. A tag diz o que é; o atributo diz os detalhes.

Para que serve o <!DOCTYPE html>?

Ele informa ao navegador qual versão do HTML esperar. Não é decoração: sem ele, o navegador entra no chamado quirks mode — um modo de compatibilidade com páginas dos anos 90, em que o layout se comporta de forma diferente e frequentemente quebra.

Conclusão

O HTML é a camada mais antiga e mais estável da web: a mesma tag <p> que Tim Berners-Lee usou nos anos 1990 continua funcionando hoje, em qualquer navegador, sem nenhuma adaptação. Poucas tecnologias podem dizer o mesmo.

Três ideias resumem o que vimos aqui. A primeira é que HTML não é programação — ele descreve e organiza o conteúdo, e quem executa lógica é o JavaScript. A segunda é que ele nunca trabalha sozinho: HTML estrutura, CSS dá forma, JavaScript dá movimento, e é a combinação dos três que forma qualquer página moderna. E a terceira é que as tags têm significado, não só aparência — usar <header>, <nav> e <article> em vez de <div> genéricas é o que permite a buscadores e leitores de tela entenderem a página, e essa foi a grande mudança que o HTML5 trouxe.

Se você está começando, o caminho mais rápido é prático: abra o Bloco de Notas, escreva a estrutura básica que mostramos aqui, salve como .html e abra no navegador. A partir daí, cada tag nova que você aprender já tem onde ser encaixada.