<h2>1. O que é o HTML? (Markup vs Programming)</h2> O HTML (HyperText Markup Language) não é uma linguagem de programação; é uma linguagem de marcação.&nbsp;<ul><li>Linguagens de Programação: Executam lógica de controle (condicionais, laços de repetição, manipulação de estado na memória, algoritmos computacionais).</li><li>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.</li></ul>HTML é puramente declarativo. Você diz o que a informação é, e não como ela deve ser processada logicamente pelo processador.<h2>2. Uma Breve História: Do SGML ao Living Standard</h2>Para entender as esquisitices do HTML moderno, precisamos entender de onde ele veio.<h2>A Era SGML (Standard Generalized Markup Language)</h2>O HTML foi originalmente baseado em **SGML** (uma linguagem de marcação meta-padrão dos anos 80). Por ser derivado do SGML:<ul><li>HTML inicial era muito flexível.</li><li>Navegadores criavam suas próprias regras para lidar com tags abertas ou erros.</li><li>Isso causou a famosa "Guerra dos Navegadores" (Netscape vs. Internet Explorer), onde cada um criava tags proprietárias (como `&lt;marquee&gt;` e `&lt;blink&gt;`).</li></ul><h2>A Era XML e a Tentativa do XHTML</h2>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).<ul><li>Assim surgiu o XHTML 1.0 e posteriormente o XHTML 2.0.</li><li>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).</li><li>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.</li></ul><h2>A Revolta do WHATWG e o HTML5</h2>Em 2004, representantes da Opera, Mozilla e Apple formaram o WHATWG (Web Hypertext Application Technology Working Group).&nbsp;<ul><li>Eles decidiram criar um padrão focado na realidade dos desenvolvedores e da compatibilidade reversa.</li><li>Esse esforço gerou o HTML5.</li><li>O W3C eventualmente cedeu, cancelou o XHTML 2.0 e adotou o trabalho do WHATWG.</li></ul><h2>O Padrão Vivo (Living Standard)</h2>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).<ul><li>O HTML é atualizado continuamente.</li><li>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.</li></ul><h2>3. Como os Navegadores Interpretam o HTML</h2>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 ModeOs navegadores mantêm compatibilidade com sites desenvolvidos nos anos 90 através de dois modos de renderização principais:<ol><li>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.</li><li>Standards Mode (Modo Padrão): O navegador renderiza a página seguindo estritamente as especificações modernas do HTML e CSS.</li></ol> Nota: Mais à frente na quarta-feira, você aprenderá como a declaração do DOCTYPE chaveia entre esses modos.<h3>Correção Automática de Erros (Tag Soup Parsing)</h3>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.<ul><li>Se você abrir uma tag `&lt;div&gt;` e nunca fechá-la, o navegador a fechará no final do documento.</li><li>Se você aninhar tags de forma inválida, como `&lt;b&gt;&lt;i&gt;texto&lt;/b&gt;&lt;/i&gt;`, o navegador reestruturará a árvore DOM implicitamente para torná-la válida (`&lt;b&gt;&lt;i&gt;texto&lt;/i&gt;&lt;/b&gt;`).</li></ul>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.<h2>4. Regras de Escrita Limpa e Padrões de Código</h2>Mesmo que o parser perdoe erros, para atingir o nível de especialista, você deve seguir diretrizes rígidas de escrita:<ol><li>Tags em Letras Minúsculas: Escreva sempre `&lt;div class="box"&gt;` e nunca `&lt;DIV CLASS="BOX"&gt;`. Embora o HTML seja case-insensitive, letras minúsculas são o padrão da especificação e facilitam a leitura.</li><li>Sempre Feche as Tags: Elementos não-vazios devem sempre conter sua tag de fechamento correspondente.</li><li>Use Aspas Duplas nos Atributos: Embora o HTML permita atributos sem aspas (ex: `&lt;div class=box&gt;`), o uso de aspas duplas (`"`) é uma boa prática universal para evitar bugs quando o valor contém espaços.</li><li>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.</li></ol>

Pontapé inicial na sua jornada profunda pelo HTML

Blog de Estudos e Aprendizado

Posts sobre

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

Categorias

Posts Populares

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