Introdução

HTML, CSS e JavaScript formam a base do desenvolvimento front-end, ou seja, tudo o que acontece no navegador do usuário. Mas afinal, qual é a diferença entre essas três tecnologias? Será que todas são linguagens de programação? Neste artigo, vou explicar de forma simples o que cada uma faz e como elas trabalham juntas para criar sites incríveis.

Um pouco da história de cada uma

Tente imaginar como eram as coisas anos atrás, quando empresas que queriam compartilhar documentos entre si ou com seus funcionários não tinham como fazer isso de forma rápida e prática. Era necessário usar outras ferramentas que tomavam muito mais tempo.

Foi assim que, em 1991, Tim Berners-Lee teve uma ideia revolucionária: ele criou o HTML.

Essa linguagem de marcação foi desenvolvida para facilitar o compartilhamento de documentos. No ano seguinte, surgiu a World Wide Web (WWW), uma rede global, e o HTML se tornou a base para a criação de páginas na internet.

Com o crescimento do uso do HTML, os desenvolvedores começaram a usar muita criatividade para deixar as páginas mais bonitas e estilosas. Porém, tudo isso era feito misturando o conteúdo e o estilo no mesmo arquivo, deixando os códigos grandes e difíceis de entender.

Por isso, em 1995, surgiu o CSS, uma linguagem criada para cuidar da parte estética da página, separando o estilo da estrutura.

Já o JavaScript tem uma história ligada a uma competição entre gigantes da tecnologia: Microsoft e Netscape.

A Netscape criou uma linguagem para seus servidores web, e a Microsoft respondeu com uma linguagem similar chamada JScript. Para competir, a Netscape desenvolveu uma tecnologia que rodava diretamente no navegador, tornando tudo mais rápido. A Microsoft também criou sua versão.

Duas tecnologias para o lado do cliente surgiram: JScript da Microsoft e JavaScript da Netscape, cada uma funcionando em seus próprios navegadores.

Para acabar com essa confusão, a Netscape enviou o JavaScript para a ECMA (entidade que padroniza linguagens), que criou o ECMAScript — o nome oficial do JavaScript, embora quase ninguém o chame assim.

HTML

O nome HTML vem do inglês Hyper Text Markup Language, que significa “linguagem de marcação de hipertexto”.

Mas o que significa “linguagem de marcação”?

Diferente de linguagens de programação, o HTML não executa lógica nem cálculos — ele simplesmente organiza o conteúdo da página.

Pense na página web como uma casa com vários cômodos e objetos. O HTML é a planta que diz onde fica cada coisa: cabeçalho, títulos, parágrafos, imagens, links…

Para isso, o HTML usa tags, etiquetas que definem o papel de cada pedaço do conteúdo.

Por exemplo, para criar um parágrafo, usamos a tag <p></p>:

<p>Este é um parágrafo</p>

Existem várias tags para diferentes elementos, e juntas, elas formam o esqueleto da página.

Mas, como fazer esse parágrafo ficar azul? Ou mudar a fonte? Para isso, usamos o CSS.

CSS

Cascading Style Sheets, ou CSS, é uma linguagem de estilos que não é considerada programação, mas é essencial para deixar a página bonita.

Ele separa a estrutura (HTML) da aparência (CSS).

A sintaxe básica é:

{
  propriedade: valor;
}

O seletor é o elemento que queremos estilizar (uma tag, uma classe, um id), a propriedade é o que queremos mudar (cor, tamanho, espaçamento), e o valor é o novo estilo.

Por exemplo, para deixar todos os parágrafos azuis:

{
  color: blue;
}

Isso faz com que todo texto dentro da tag <p> fique azul.

O nome “folha de estilo em cascata” vem da possibilidade de usar vários arquivos CSS que vão “caindo” um sobre o outro, e o último estilo pode sobrescrever o anterior. Podemos escrever CSS dentro do arquivo HTML, dentro da tag <style>, ou em arquivos separados que são importados pelo HTML:

<link rel="stylesheet" href="estilos.css">

JavaScript

Para completar a tríade do front-end, temos o JavaScript, a única linguagem de programação dessa lista.

Já criamos a estrutura da página com o HTML e a aparência com o CSS. Mas e as funcionalidades dinâmicas? Como fazem as páginas responderem ao usuário, atualizarem conteúdo sem recarregar, mostrarem alertas, etc.?

É o JavaScript que faz isso.

Ele adiciona movimento, interatividade e lógica às páginas.

Exemplo clássico, uma caixa de alerta:

alert('Hello World');

Assim como o CSS, o JavaScript pode ficar dentro do HTML:

<script>
  alert('Hello World');
</script>

Ou em arquivo separado, importado no HTML:

<script src="script.js"></script>

Importante: o JavaScript pode rodar no navegador (lado cliente) ou no servidor, com tecnologias como Node.js.

O papel de cada uma na aplicação

Resumindo:

• HTML: linguagem de marcação que cria a estrutura da página (parágrafos, títulos, links, imagens).
• CSS: linguagem de estilos que define a aparência (cores, fontes, tamanhos, posicionamento).
• JavaScript: linguagem de programação que cria interatividade, atualiza conteúdo e processa dados.

Comparação com o corpo humano

Para facilitar o entendimento, pense na página web como um corpo humano:

• HTML é o esqueleto, os ossos que dão forma e sustentação.
• CSS é a pele, cabelo e roupas, o visual que a gente vê e que dá identidade.
• JavaScript são os músculos, que fazem o corpo se mexer e reagir.