Introdução ao HTML, História e Padrões da Web

1. O que é o HTML? (Markup vs Programming)

O HTML (HyperText Markup Language) não é uma linguagem de programação; é uma linguagem de marcação. 

• Linguagens de Programação: Executam lógica de controle (condicionais, laços de repetição, manipulação de estado na memória, algoritmos computacionais).
• Linguagens de Marcação: Utilizam um sistema de anotações (tags) para definir a estrutura, a semântica e a apresentação de um documento de texto plano para que um software (neste caso, o navegador web) saiba como renderizá-lo.

HTML é puramente declarativo. Você diz o que a informação é, e não como ela deve ser processada logicamente pelo processador.

2. Uma Breve História: Do SGML ao Living Standard

Para entender as esquisitices do HTML moderno, precisamos entender de onde ele veio.

A Era SGML (Standard Generalized Markup Language)

O HTML foi originalmente baseado em **SGML** (uma linguagem de marcação meta-padrão dos anos 80). Por ser derivado do SGML:

• HTML inicial era muito flexível.
• Navegadores criavam suas próprias regras para lidar com tags abertas ou erros.
• Isso causou a famosa "Guerra dos Navegadores" (Netscape vs. Internet Explorer), onde cada um criava tags proprietárias (como `<marquee>` e `<blink>`).

A Era XML e a Tentativa do XHTML

Para resolver a bagunça, o W3C (World Wide Web Consortium) decidiu migrar a web para o XML (uma linguagem de marcação extremamente rígida baseada em SGML, mas com regras estritas).

• Assim surgiu o XHTML 1.0 e posteriormente o XHTML 2.0.
• A Regra Crítica: Se houvesse um único erro de sintaxe (como uma tag não fechada ou uma aspa faltando), o navegador era instruído a abortar a renderização e exibir uma tela amarela de erro (o chamado Draconian Error Handling).
• O Fracasso: A comunidade de desenvolvedores rejeitou o XHTML 2.0. Os navegadores não queriam exibir páginas quebradas para os usuários finais apenas por causa de pequenos erros de digitação.

A Revolta do WHATWG e o HTML5

Em 2004, representantes da Opera, Mozilla e Apple formaram o WHATWG (Web Hypertext Application Technology Working Group). 

• Eles decidiram criar um padrão focado na realidade dos desenvolvedores e da compatibilidade reversa.
• Esse esforço gerou o HTML5.
• O W3C eventualmente cedeu, cancelou o XHTML 2.0 e adotou o trabalho do WHATWG.

O Padrão Vivo (Living Standard)

Hoje, não existe oficialmente um "HTML6". Em 2011, o WHATWG e o W3C concordaram que o HTML seria um Living Standard (Padrão Vivo).

• O HTML é atualizado continuamente.
• Novos elementos e atributos são adicionados de acordo com a necessidade prática da web e a adoção dos motores de renderização, sem a necessidade de lançamentos de novas versões de tempos em tempos.

3. Como os Navegadores Interpretam o HTML

O parser de HTML do navegador possui um comportamento único na computação: ele nunca lança uma exceção que quebra o programa por erro de sintaxe.

Quirks Mode vs. Standards Mode

Os navegadores mantêm compatibilidade com sites desenvolvidos nos anos 90 através de dois modos de renderização principais:

1. Quirks Mode (Modo de Compatibilidade): O navegador emula bugs de renderização antigos (do Netscape 4 e IE 5) para que sites antigos não quebrem visualmente.
2. Standards Mode (Modo Padrão): O navegador renderiza a página seguindo estritamente as especificações modernas do HTML e CSS.

Nota: Mais à frente na quarta-feira, você aprenderá como a declaração do DOCTYPE chaveia entre esses modos.

Correção Automática de Erros (Tag Soup Parsing)

Se você escrever um código HTML incorreto, o motor do navegador (como Blink do Chrome, Gecko do Firefox ou WebKit do Safari) tentará corrigi-lo ativamente.

• Se você abrir uma tag `<div>` e nunca fechá-la, o navegador a fechará no final do documento.
• Se você aninhar tags de forma inválida, como `<b><i>texto</b></i>`, o navegador reestruturará a árvore DOM implicitamente para torná-la válida (`<b><i>texto</i></b>`).

Atenção: Embora o navegador perdoe esses erros na tela, o custo de processamento para reescrever a árvore DOM inválida prejudica a performance e pode quebrar seletores CSS e scripts JS que dependem da estrutura exata.

4. Regras de Escrita Limpa e Padrões de Código

Mesmo que o parser perdoe erros, para atingir o nível de especialista, você deve seguir diretrizes rígidas de escrita:

1. Tags em Letras Minúsculas: Escreva sempre `<div class="box">` e nunca `<DIV CLASS="BOX">`. Embora o HTML seja case-insensitive, letras minúsculas são o padrão da especificação e facilitam a leitura.
2. Sempre Feche as Tags: Elementos não-vazios devem sempre conter sua tag de fechamento correspondente.
3. Use Aspas Duplas nos Atributos: Embora o HTML permita atributos sem aspas (ex: `<div class=box>`), o uso de aspas duplas (`"`) é uma boa prática universal para evitar bugs quando o valor contém espaços.
4. Indentação Consistente: Use 2 ou 4 espaços para demarcar os níveis de aninhamento dos elementos, facilitando a depuração visual do esqueleto da página.