O que é HTML

docs.scrimba.com

Cada site que você já visitou começa 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 nesta única linguagem. Antes de poder estilizar uma página ou torná-la interativa, você descreve o que está nela, e essa descrição é HTML.

Uma página é apenas texto estruturado

HTML significa HyperText Markup Language (Linguagem de Marcação de Hipertexto). A palavra importante é marcação: HTML é uma forma de pegar texto simples e marcar quais partes são títulos, quais são parágrafos, quais são links, e assim por diante. Você não está dando ao computador instruções para seguir. Você está etiquetando conteúdo para que o navegador saiba o que cada peça é e como exibi-la.

Pense nisso como formatar um documento à mão. Você circula o título, sublinha os títulos da seção e desenha uma caixa ao redor de uma foto. HTML é como você faz esse círculo e sublinhado de uma forma que um navegador entende.

HTML é uma linguagem declarativa: você descreve a estrutura que quer, não os passos para produzi-la. Não há lógica, sem loops, sem variáveis. Você afirma "isto é um título, isto é um parágrafo, isto é uma lista de três itens", e o navegador é responsável por transformar essa descrição em algo na tela.

É por isso que HTML não é uma linguagem de programação no sentido usual. Não calcula nada. Estrutura conteúdo. Essa distinção é importante uma vez que você adiciona CSS e JavaScript, porque cada um dos três tem um trabalho em que é bom, e o trabalho de HTML é estrutura.

HTML é uma linguagem de marcação declarativa que o navegador analisa em uma árvore de objetos chamada DOM (Document Object Model: a representação ao vivo, em memória da página que CSS estiliza e JavaScript manipula). Seu texto fonte é a entrada; o DOM é o que o navegador realmente renderiza e com o que toda outra tecnologia web se comunica.

Esse enquadramento explica muito do comportamento de HTML. A análise de HTML é deliberadamente permissiva: uma tag de fechamento ausente ou um elemento aninhado incorretamente raramente lança um erro, porque o analisador segue um algoritmo de recuperação definido e constrói uma árvore válida mesmo assim. Isso é uma característica, não negligência. Manteve duas décadas de páginas imperfeitas funcionando. Isso também significa que "renderiza" é um teste fraco de correção: o navegador construirá um DOM de quase qualquer coisa, então estruturar bem sua marcação é responsabilidade sua, não do analisador.

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

Duas linhas, duas peças de estrutura: um título e um parágrafo. O navegador lê as etiquetas e mostra a primeira linha grande e em negrito, a segunda como texto de corpo ordinário.

JunoUma página é apenas texto estruturado HTML é como você etiqueta 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: este pedaço é um título, este pedaço é um parágrafo. Essa é toda a ideia, e tudo mais é construído sobre ela.

JunoUma página é apenas texto estruturado HTML é declarativo: você descreve estrutura, o navegador cuida do resto. Nenhuma lógica vive aqui, o que é exatamente por que funciona bem com CSS e JavaScript. Mantenha o trabalho de HTML claro em sua mente e os outros dois ficam mais fáceis de posicionar.

JunoUma página é apenas texto estruturado O navegador analisa sua marcação no DOM, e essa árvore é o que tudo mais age sobre. A análise é permissiva por design, então renderiza prova quase nada. Estrutura bem formada é sua responsabilidade, e se paga no momento em que CSS e JavaScript começam a ler a árvore que você construiu.

Elementos, tags e atributos

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

<p>Olá aí.</p>

<p> é a tag de abertura, </p> é a tag de fechamento (note a barra), e "Olá aí." é o conteúdo entre elas. Juntos fazem um elemento de parágrafo. As tags são as etiquetas; o conteúdo é o que o visitante lê.

Você também pode dar a uma tag informações extras com um atributo. Um link precisa saber para onde vai, então você diz com um atributo href:

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

Um elemento é uma tag de abertura, seu conteúdo e uma tag de fechamento. Atributos vão dentro da tag de abertura como pares name="value" e configuram o elemento: href em um link define seu destino, src em uma imagem define seu arquivo, alt define o texto de fallback.

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

Alguns elementos não têm conteúdo e nenhuma tag de fechamento. Estes são elementos void: <img>, <br>, <input>, <hr>. Eles carregam tudo o que precisam em seus atributos, então não há nada para envolver e nada para fechar.

O vocabulário vale a pena deixar exato, porque as pessoas o usam frouxamente e causa confusão depois. Uma tag é o texto que você digita, <p> ou </p>. Um elemento é a coisa toda que o analisador produz: as tags mais seu conteúdo mais qualquer descendente. Um atributo é um par name="value" na tag de abertura que define uma propriedade do elemento.

Elementos void (<img>, <input>, <br>, <hr>, <meta>, <link>) não têm modelo de conteúdo e, portanto, nenhuma tag de fechamento; a barra no final que você às vezes vê (<br />) é opcional em HTML e não tem efeito, uma relíquia do XHTML. Valores de atributo são strings, mesmo quando representam números ou booleans: disabled é um atributo boolean cuja mera presença é verdadeira, e <input value="5"> contém a string "5" até algo a ler como número. Saber que o DOM é stringly-typed nesta camada salva você de uma classe de bugs quando JavaScript começar a ler valores de atributo novamente.

JunoElementos, tags e atributos Um elemento é uma tag de abertura, algum conteúdo e uma tag de fechamento, como <p>...</p>. Atributos vão na tag de abertura e adicionam detalhes, como para onde um link aponta. Não se preocupe em memorizar cada tag. Você as aprenderá alguns de cada vez conforme precisar delas.

JunoElementos, tags e atributos Tags são o texto, o elemento é a coisa toda, atributos a configuram. Cuidado com elementos void como <img> e <input>: sem conteúdo, sem tag de fechamento, tudo vive nos atributos. Obter o vocabulário certo agora torna o resto dos documentos mais limpo.

JunoElementos, tags e atributos Tag, elemento e atributo significam três coisas diferentes, e mantê-los retos se paga quando você depura. Valores de atributo são strings nesta camada, mesmo os números e os booleans, então na primeira vez que value volta como uma string em JavaScript, você já saberá por quê. A barra opcional em elementos void não faz nada; ignore-a.

Como HTML, CSS e JavaScript dividem o trabalho

Uma página web acabada é geralmente construída a partir de três linguagens, e cada uma tem um trabalho:

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

Uma forma comum de visualizar: HTML são as paredes e salas de uma casa, CSS é a tinta e móveis, e JavaScript é a eletricidade que faz as coisas ligarem. Você está aprendendo as paredes primeiro, porque não há nada para pintar ou fiação até a estrutura existir.

As três linguagens formam uma pilha em camadas, e a estratificação é intencional. HTML fornece estrutura e significado. CSS lê essa estrutura e descreve como ela deve ficar. JavaScript lê e muda a estrutura em resposta a eventos.

Mantê-las separadas é uma disciplina que vale a pena construir cedo. Quando seu conteúdo vive em HTML, sua apresentação em CSS e seu comportamento em JavaScript, você pode mudar cada um sem perturbar os outros. Misturá-los, por exemplo forçar layout com tags <br> ou estilos inline em toda parte, funciona no início e se torna doloroso rapidamente.

A separação de preocupações entre os três não é apenas limpeza, é o que torna as páginas resilientes. Uma página cujo significado é totalmente transportado por seu HTML degrada graciosamente: se CSS falhar ao carregar, o conteúdo ainda é legível e ordenado; se JavaScript estiver desabilitado ou erro, o conteúdo principal ainda está lá. Este é o argumento prático para aprimoramento progressivo: construa um documento funcionando em HTML primeiro, então coloque estilo e comportamento em cima.

É também um argumento de acessibilidade e performance. A tecnologia assistiva lê o DOM, então significado que vive em HTML está disponível para ela, enquanto significado falsificado com CSS ou injetado tarde por JavaScript geralmente não está. E HTML é o que o navegador pode analisar e pintar primeiro; conteúdo que depende de uma viagem redonda de JavaScript para aparecer é conteúdo que o usuário espera. Quando está decidindo onde uma peça da página deve viver, a resposta padrão é HTML, e você só sobe na pilha quando estrutura sozinha não consegue fazer o trabalho.

JunoComo HTML, CSS e JavaScript dividem o trabalho Três linguagens, três trabalhos: HTML é estrutura, CSS é estilo, JavaScript é comportamento. Você está começando com HTML porque é a parte em que tudo mais fica. Uma vez que essas paredes estão em pé, a tinta e a fiação têm um lugar para ir.

JunoComo HTML, CSS e JavaScript dividem o trabalho Estrutura em HTML, apresentação em CSS, comportamento em JavaScript, mantidos separados de propósito. Mude um sem quebrar os outros, e resista ao impulso de falsificar layout em HTML. Esse hábito é barato de construir agora e caro de desaprender depois.

JunoComo HTML, CSS e JavaScript dividem o trabalho Coloque significado em HTML e a página degrada graciosamente quando CSS ou JavaScript cai, o que também é o que a torna acessível e rápida. Esse é o caso inteiro para aprimoramento progressivo. Quando está inseguro sobre para onde algo pertence, comece no fundo da pilha e suba apenas quando estrutura sozinha não consegue carregá-lo.

Seu primeiro olhar em uma página completa

Aqui está uma página web completa, se pequena. Você conhecerá adequadamente cada parte dela nos próximos capítulos, então não se preocupe com os detalhes ainda. Por enquanto, perceba que é feita de todas as tags e atributos que você já viu:

Abaixo está um documento HTML mínimo mas completo. Toda página real começa de aproximadamente esta forma: um doctype, uma raiz <html>, um <head> para informações sobre a página, e um <body> para o conteúdo que o visitante vê.

Um documento completo tem um esqueleto obrigatório, e vale a pena ler de perto mesmo que pareça boilerplate. Cada linha tem um trabalho, e os próximos capítulos explicam por que cada uma merece seu lugar em vez de tratá-la como uma incantação mágica para copiar.

<!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 esta é uma página HTML moderna, <html> envolve tudo, <head> contém informações nos bastidores como o título da página, e <body> contém o que você realmente vê. O título e parágrafo de antes vivem dentro do body, porque são conteúdo para o visitante.

O <head> contém metadados: coisas sobre a página que não são mostradas no corpo da página, como seu título (que aparece na aba do navegador) e sua codificação de caracteres. O <body> contém o conteúdo visível. Essa divisão, informação sobre a página versus conteúdo da página, é a primeira decisão estrutural que cada documento faz.

Note a ordenação e por que importa: <meta charset> vem primeiro no head para o analisador saber como decodificar os bytes do resto do documento antes de os ler. O atributo lang em <html> informa leitores de tela e ferramentas de tradução. Nada disso é decoração. O head configura como o documento é analisado e entendido, e o body é o conteúdo ao qual essa configuração se aplica. O próximo capítulo, em sua primeira página HTML, desconstrói esse esqueleto linha por linha.

JunoSeu primeiro olhar em uma página completa Cada página é construída a partir de um pequeno esqueleto repetido: um doctype, então <html> envolvendo um <head> e um <body>. O head é informação nos bastidores, o body é o que as pessoas veem. Você desmontará isso adequadamente em seguida, então uma olhada rápida é tudo o que você precisa agora.

JunoSeu primeiro olhar em uma página completa A divisão principal é metadados no head, conteúdo visível no body. Quase toda página que você escreve começa dessa forma exata, então vale a pena reconhecer à primeira vista. O próximo capítulo explica cada linha.

JunoSeu primeiro olhar em uma página completa O esqueleto é ordenado por uma razão: charset antes do conteúdo para o analisador decodificar o resto, lang para tecnologia assistiva e tradução. Não trate nada disso como preenchimento. Estruture e entenda agora e o head para de parecer um bloco mágico que você cola.