O que é HTML

Todo site que você já visitou começa a vida como um documento de texto simples escrito em HTML. Os títulos, parágrafos, botões, imagens e links que você vê em uma página são todos descritos nessa única linguagem.

Antes de poder estilizar uma página ou fazer com que ela se mova, você precisa dizer o que existe nela. Essa descrição é o HTML.

Uma página é texto estruturado

HTML significa HyperText Markup Language (Linguagem de Marcação de Hipertexto). A palavra que importa é marcação.

Você pega texto simples e marca quais partes são títulos, quais são parágrafos, quais são links. Você não está dando instruções para o computador seguir. Você está rotulando o conteúdo para que o navegador saiba o que cada parte é.

Pense em formatar um documento à mão. Você circula o título, sublinha os títulos de seção, desenha uma caixa em volta de uma foto. O HTML é a forma de fazer esse tipo de marcação de um jeito que o navegador entenda.

<h1>Bem-vindo</h1>
<p>Este é um parágrafo de texto na minha primeira página web.</p>

Duas linhas, duas partes de estrutura: um título e um parágrafo. O navegador lê os rótulos e mostra a primeira linha grande e em negrito, e a segunda como texto comum.

JunoUma página é texto estruturado HTML é a forma de rotular as partes de uma página para que o navegador saiba o que elas são. Você não está escrevendo instruções, está marcando conteúdo: esta parte é um título, esta parte é um parágrafo. Essa é a ideia inteira, e todo o resto se constrói a partir dela.

Se isso parece simples demais para ser a resposta de verdade, não é. Passei minha primeira semana procurando a parte complicada, e não havia nenhuma.

JunoUma página é texto estruturado A palavra para isso é declarativo: você descreve a estrutura que quer, e o navegador descobre como produzi-la. Não há lógica aqui, nem loops, nem variáveis.

É por isso que o HTML não é uma linguagem de programação no sentido usual. Ele não computa nada, ele estrutura conteúdo. Mantenha essa função clara na sua cabeça e o CSS e o JavaScript ficam muito mais fáceis de posicionar, porque quando você se pegar perguntando "como faço o HTML fazer X", esse geralmente é o sinal de que você entrou em um dos outros dois territórios.

JunoUma página é texto estruturado O navegador interpreta sua marcação e transforma em uma árvore de objetos chamada **DOM**, o Document Object Model: a representação viva, em memória, da página. Seu texto de origem é a entrada, e o DOM é o que de fato é renderizado e o que toda outra tecnologia web consulta.

Esse enquadramento explica boa parte do comportamento do HTML. A interpretação é deliberadamente tolerante, então uma tag de fechamento faltando ou um elemento mal encaixado raramente gera um erro. O interpretador segue um algoritmo de recuperação definido e constrói uma árvore válida de qualquer forma, o que foi o que manteve duas décadas de páginas imperfeitas funcionando.

Isso também significa que funcionar visualmente é um teste fraco de correção. O navegador vai construir um DOM a partir de quase qualquer coisa, então uma estrutura bem formada é responsabilidade sua, não do interpretador. É a diferença entre uma página que sobrevive ao segundo desenvolvedor que a toca e uma que não sobrevive.

Elementos, tags e atributos

A maior parte do HTML é feita de elementos. Um elemento geralmente tem uma tag de abertura, algum conteúdo e uma tag de fechamento:

<p>Olá.</p>

<p> é a tag de abertura, </p> é a tag de fechamento (observe a barra), e "Olá." é o conteúdo entre elas. Juntas, elas formam um elemento de parágrafo. As tags são os rótulos, e o conteúdo é o que seu visitante de fato lê.

Você também pode dar a uma tag informações extras com um atributo, escrito como um par nome="valor" dentro da tag de abertura. Um link precisa saber para onde vai, então você diz isso com href:

<a href="https://scrimba.com">Visite o Scrimba</a>

Alguns elementos não têm conteúdo nenhum, então também não têm tag de fechamento. Esses são os elementos vazios, e você vai encontrá-los o tempo todo: <img>, <br>, <input>, <hr>. Tudo o que precisam fica em seus atributos, então não há nada para envolver e nada para fechar.

<img src="labrador-retriever.jpg" alt="Um labrador retriever sentado na grama alta">

JunoElementos, tags e atributos Um elemento é uma tag de abertura, algum conteúdo e uma tag de fechamento, como <p>...</p>. Os atributos ficam na tag de abertura e adicionam detalhes, como para onde um link aponta.

Por favor, não tente memorizar cada tag. Existem mais de cem, e ninguém guarda todas na cabeça. Você vai absorver as poucas que precisa e vai consultar o resto para sempre, assim como todo mundo.

JunoElementos, tags e atributos Vale a pena fixar esse vocabulário agora, porque as pessoas o usam de forma solta. Uma **tag** é o texto que você digita, <p> ou </p>. Um **elemento** é a coisa inteira que o interpretador produz: as tags, o conteúdo delas e quaisquer descendentes. Um **atributo** configura esse elemento.

No momento em que você está lendo a marcação de outra pessoa em uma revisão de código, "a tag" e "o elemento" deixam de ser intercambiáveis. Os elementos vazios são os que costumam pegar as pessoas de surpresa: sem conteúdo, sem tag de fechamento, tudo nos atributos.

JunoElementos, tags e atributos Tag, elemento e atributo são três coisas diferentes, e mantê-los bem distintos na cabeça compensa na primeira vez que você estiver lendo um stack trace rapidamente.

Nesse nível, os valores de atributo são strings, sempre, incluindo os números e os booleanos. disabled é um atributo booleano cuja mera presença já significa verdadeiro, e <input value="5"> guarda a string "5" até que algo a leia como número. Então, na primeira vez que sua conta aritmética virar uma concatenação em JavaScript, você já vai saber por quê.

A barra final que você às vezes vê em <br /> é opcional e não faz absolutamente nada, um resquício do XHTML. Ignore-a, e não deixe ninguém te dizer o contrário.

Como HTML, CSS e JavaScript dividem o trabalho

Uma página web finalizada geralmente é construída a partir de três linguagens, e cada uma tem uma função:

• HTML é a estrutura: os títulos, textos, imagens e botões.
• CSS é o estilo: as cores, fontes, espaçamentos e o layout.
• JavaScript é o comportamento: o que acontece quando você clica, digita ou rola a página.

Aqui está a imagem à qual sempre volto. O HTML são as paredes e os cômodos de uma casa, o CSS é a pintura e a mobília, e o JavaScript é a eletricidade que faz as coisas ligarem.

Você está aprendendo as paredes primeiro, porque não há nada para pintar ou fiar antes de a estrutura existir.

Manter os três separados é um hábito que vale a pena construir desde já. Quando o seu conteúdo mora no HTML, sua apresentação no CSS e o seu comportamento no JavaScript, você pode mudar qualquer um deles sem perturbar os outros dois.

JunoComo HTML, CSS e JavaScript dividem o trabalho Três linguagens, três funções: HTML é estrutura, CSS é estilo, JavaScript é comportamento. Você está começando pelo HTML porque é a parte sobre a qual tudo o resto se apoia.

Uma vez que essas paredes estejam de pé, a pintura e a fiação têm onde ir. E você já consegue construir uma página real e útil só com essa camada, o que é bom saber quando as outras duas ainda parecem distantes.

JunoComo HTML, CSS e JavaScript dividem o trabalho Essa divisão em camadas é deliberada. O HTML fornece estrutura e significado, o CSS lê essa estrutura e descreve como ela deve parecer, o JavaScript lê e altera tudo isso em resposta a eventos.

Resista à tentação de simular layout no HTML: tags <br> empilhadas para criar espaçamento, uma <div> vazia para empurrar algo para baixo. Isso funciona no começo e vira um problema rapidamente. É barato criar o hábito certo agora, e caro desaprender o errado em um código que já foi para produção.

JunoComo HTML, CSS e JavaScript dividem o trabalho Essa separação é mais do que organização, é o que torna as páginas resilientes. Uma página cujo significado é totalmente carregado pelo seu HTML se degrada de forma graciosa: se o CSS falhar ao carregar, o conteúdo continua legível e ordenado, e se o JavaScript estiver desabilitado ou apresentar erro, o conteúdo principal ainda está ali. Esse é todo o argumento para o **progressive enhancement** (aprimoramento progressivo), e ele se sustenta há vinte anos enquanto muitas ideias mais ruidosas não se sustentaram.

É também um argumento de acessibilidade e desempenho. Tecnologias assistivas leem o DOM, então o significado que mora no HTML está disponível para elas, enquanto o significado simulado com CSS ou injetado tardiamente pelo JavaScript muitas vezes não está. O HTML também é o que o navegador consegue interpretar e pintar primeiro, e conteúdo que espera uma ida e volta ao JavaScript é conteúdo que seu usuário fica esperando.

Quando estiver em dúvida sobre onde algo deveria ficar, comece na base da pilha e só suba quando a estrutura por si só não conseguir resolver. Todas as equipes que já vi se arrependerem dessa decisão se arrependeram na mesma direção.

Seu primeiro olhar para uma página completa

Aqui está uma página web completa, pequena, mas real. Você vai conhecer cada parte dela em detalhe nos próximos capítulos, então não se preocupe com os detalhes agora. Por ora, note que ela é toda construída a partir das tags e atributos que você já viu:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Minha primeira página</title>
  </head>
  <body>
    <h1>Bem-vindo</h1>
    <p>Este é um parágrafo de texto na minha primeira página web.</p>
  </body>
</html>

Leia de cima para baixo. A primeira linha diz ao navegador que essa é uma página HTML moderna. <html> envolve tudo. <head> guarda informações de bastidores, como o título da página, e <body> guarda o que você de fato vê.

O título e o parágrafo de antes ficam dentro do body, porque são conteúdo para o seu visitante. Essa divisão, informações sobre a página contra conteúdo da página, é a primeira decisão estrutural que todo documento toma.

O próximo capítulo, sobre sua primeira página HTML, desmonta esse esqueleto linha por linha.

JunoSeu primeiro olhar para uma página completa Toda página é construída a partir do mesmo pequeno esqueleto: um doctype, depois <html> envolvendo um <head> e um <body>. O head são informações de bastidores, o body é o que as pessoas veem.

Você vai desmontar isso com calma no próximo capítulo, então uma olhada rápida é tudo o que você precisa agora. Parece muita coisa na primeira vez, e para de parecer qualquer coisa por volta da quinta.

JunoSeu primeiro olhar para uma página completa A divisão central é metadados no head, conteúdo visível no body. Quase todo documento que você vai escrever começa exatamente com esse formato, então vale a pena reconhecê-lo de longe.

Seu editor vai gerar esse esqueleto para você, e ainda assim vale a pena conseguir identificar o que está faltando quando esse esqueleto vem errado.

JunoSeu primeiro olhar para uma página completa O esqueleto é ordenado por um motivo. <meta charset> vem primeiro no head para que o interpretador saiba como decodificar os bytes do resto do documento antes de lê-los, e o lang em <html> diz aos leitores de tela e às ferramentas de tradução com qual idioma eles estão lidando.

Nada disso é enchimento. O head configura como o documento é interpretado e entendido, e o body é o conteúdo ao qual essa configuração se aplica. Entenda isso uma vez e você vai começar a editá-lo com confiança, o que importa, porque o head é onde uma parcela surpreendente dos bugs de produção mora silenciosamente.