História e versões do HTML

HTML não caiu pronto do céu

Cada tag que você escreve hoje é resultado de décadas de necessidades científicas, disputas técnicas, evolução dos navegadores e mudanças na forma como a humanidade compartilha informação.

Estudar a história do HTML não é decorar datas. É entender por que a Web funciona do jeito que funciona.

Entender evolução, não decorar cronologia

A missão é enxergar cada versão como resposta a um problema real: documentos conectados, formulários, organização visual, separação entre estrutura e estilo, acessibilidade, semântica, multimídia e aplicações web.

O erro invisível dos iniciantes

Muitos pensam que HTML5 substituiu tudo e que o passado não importa. Errado. O HTML é incremental. Navegadores modernos ainda interpretam muito código antigo. Entender isso evita bugs e ajuda na manutenção.

Tim Berners-Lee, CERN e o problema da informação

A Web nasceu no CERN, na Suíça, em um ambiente científico. Pesquisadores precisavam compartilhar documentos espalhados por sistemas diferentes. O problema não era beleza visual, era acesso, conexão e navegação entre informações.

A evolução das versões do HTML

HTML5 não foi só atualização: foi revolução

O HTML5 transformou a Web em uma plataforma de desenvolvimento. Antes, muitos recursos dependiam de plugins, como Flash. Com HTML5, áudio, vídeo, gráficos e APIs passaram a ser parte do ecossistema nativo do navegador.

O que mudou com HTML5

• Semântica com header, nav, main, section, article e footer.
• Multimídia nativa com audio e video.
• Canvas e SVG para gráficos.
• Geolocalização com permissão do usuário.
• Web Storage para dados locais.
• Menos dependência de plugins externos.

A diferença está na intenção semântica

Estrutura antiga ruim

<div id="cabecalho">
  <h1>Título do Site</h1>
</div>

<div id="conteudo">
  <div class="post">
    <p>Texto do artigo...</p>
  </div>
</div>

<div id="rodape">
  <p>Direitos reservados</p>
</div>

Estrutura moderna semântica

<header>
  <h1>Título do Site</h1>
</header>

<main>
  <article>
    <p>Texto do artigo...</p>
  </article>
</main>

<footer>
  <p>Direitos reservados</p>
</footer>

Tabela evolutiva do HTML

O que ficou obsoleto, o que permanece e o que importa

O aluno não precisa decorar

Não precisa decorar todos os anos ou sintaxe de tags obsoletas. Precisa entender a ordem evolutiva, os problemas resolvidos e por que o HTML5 é o padrão moderno.

Teste legado, semântica e resiliência do HTML

1. Crie um arquivo chamado teste.html.
2. Adicione uma tag <b> e uma tag <strong>.
3. Abra no navegador e compare o visual.
4. Inspecione com F12 e observe os elementos.
5. Crie uma tag inexistente como <balao>.
6. Veja que o navegador tenta renderizar, mas sem significado semântico real.
7. Escreva uma nota explicando a diferença entre funcionar visualmente e ter significado.

Exercício guiado

Crie uma lista não ordenada com marcos históricos do HTML. Para cada item, use <strong> no ano e um parágrafo explicando a conquista.

Exercício independente

Escreva um parágrafo explicando por que um desenvolvedor moderno deve preferir APIs nativas do HTML5, como <video>, em vez de plugins antigos.

Erros comuns e correções

Você realmente entendeu a evolução?

• Consigo citar quem criou o HTML e onde.
• Sei explicar por que o HTML nasceu no CERN.
• Entendo o papel dos formulários no HTML 2.0.
• Sei por que tabelas para layout ficaram obsoletas.
• Diferencio XHTML e HTML5.
• Consigo explicar por que HTML5 foi uma revolução.
• Criei minha linha do tempo com estrutura semântica.

15 perguntas para provar domínio

1. Quem criou o HTML? Tim Berners-Lee.
2. Onde o HTML nasceu? No CERN, na Suíça.
3. Qual era o objetivo original? Compartilhar documentos científicos.
4. Qual foi a primeira versão oficial? HTML 2.0.
5. O que o HTML 2.0 consolidou? Títulos, links, listas e formulários.
6. O que marcou o HTML 3.2? Tabelas e applets.
7. Qual versão trouxe maturidade com CSS e acessibilidade? HTML 4.01.
8. O que foi XHTML? Uma versão mais rígida baseada em XML.
9. Quando o HTML5 foi lançado oficialmente? 2014.
10. Cite duas tags do HTML5. header, nav, main, section, article, footer, video ou audio.
11. Por que HTML5 eliminou plugins como Flash? Porque trouxe mídia nativa.
12. HTML novo apaga HTML antigo? Não. O HTML é incremental e retrocompatível.
13. Por que usar semântica? Para SEO, acessibilidade e manutenção.
14. HTML é programação? Não, é linguagem de marcação.
15. O conhecimento de versões antigas ajuda em quê? Manutenção, legado e entendimento da Web moderna.

Perguntas de entrevista

• Por que devemos preferir HTML5?
• Como a retrocompatibilidade ajuda a Web?
• Por que tabelas para layout são má prática?
• Como a semântica do HTML5 ajuda SEO?
• Como a história do HTML ajuda em sistemas legados?

Acessibilidade, SEO, mercado e manutenção

Aplicação em projeto real

No mercado, você encontrará sistemas antigos em HTML 4.01 ou estruturas cheias de div. Entender a história permite refatorar para HTML5 sem quebrar o que já existe.

Conexão com acessibilidade

A evolução do HTML caminhou para inclusão. Tags semânticas ajudam leitores de tela a navegar com clareza.

Conexão com SEO

Buscadores entendem melhor páginas que usam semântica moderna, hierarquia clara e metadados corretos.

Conexão com mercado

Empresas valorizam quem entende legado, compatibilidade e evolução técnica. Isso diferencia quem só copia de quem toma decisões profissionais.

Registre sua linha do tempo

git status
git add .
git commit -m "aula-02: cria linha do tempo do html"
git push

• git status: confirma arquivos modificados.
• git add .: prepara a entrega.
• git commit: registra a aula com mensagem clara.
• git push: envia a evidência para o GitHub.

Evidência para portfólio

• Arquivo linha-do-tempo-html.html.
• Print da página no navegador.
• Print do código.
• Commit no GitHub.
• Explicação curta sobre a evolução do HTML.

Registro de progresso

Aprendi:
Pratiquei:
Versão que mais entendi:
Erro que corrigi:
Evidência criada:
Próxima ação: