Curso Completo de HTML5: Semântica, Acessibilidade & SEO
Do zero ao nível profissional avançado. Aprenda a escolher o elemento HTML5 exato pelo significado do conteúdo. Estrutura de documentos, formulários validados, acessibilidade WCAG, metadados OpenGraph/SEO, segurança web e integração com CSS e JS.
Módulo 1 — Fundamentos da Web
Cliente, servidor, protocolo HTTP, diferenças entre HTML, CSS e JS, DevTools e validação.
Módulo 2 — Estrutura do Documento
<!DOCTYPE html>, <html>, <head>, <body>, meta charset, viewport e metadados essenciais.
O Esqueleto de um Documento HTML5
Compreenda a função de cada tag na estrutura base do HTML5.
Módulo 3 — Textos e Conteúdo
Títulos (h1-h6), parágrafos, <strong>, <em>, <blockquote>, <time>, entidades HTML e marcas.
Semântica de Texto: <strong> vs <b> e <time>
Aprenda a diferença entre destaque estético e relevância semântica.
Módulo 4 — Links e Navegação
Tag <a>, URLs absolutas/relativas, âncoras internas, target="_blank", rel="noopener" e downloads.
Segurança & Boas Práticas em Links Externos
Proteja sua aplicação contra ataques Tabnabbing ao abrir links em novas abas.
Módulo 5 — Listas
Listas não ordenadas (ul), ordenadas (ol), de descrição (dl, dt, dd) e estruturas hierárquicas.
Listas de Descrição (dl, dt, dd)
Estruture pares de chave-valor como glossários, FAQs e atributos de produtos.
Módulo 6 — Imagens & Conteúdo Visual
<img>, atributo alt, formatos (WebP, AVIF, SVG), <picture>, srcset, sizes, loading="lazy" e <figure>.
Imagens Responsivas com <picture> e srcset
Entregue imagens leves em formato WebP/AVIF adaptadas à tela do usuário.
Módulo 7 — Áudio, Vídeo e Incorporações
<audio>, <video>, <source>, <track> para legendas, <iframe>, segurança e SVG.
Vídeos Nativos e Legendas Acessíveis com <track>
Construa players de vídeo nativos acessíveis para deficientes auditivos.
Módulo 8 — HTML Semântico Avançado
<header>, <footer>, <main>, <nav>, <section>, <article>, <aside>, <details>, <summary>, <dialog>.
Article vs Section: A Regra Definitiva
Nunca mais confunda a escolha entre estas duas tags semânticas fundamentais.
Módulo 9 — Tabelas Semânticas & Acessíveis
<table>, <thead>, <tbody>, <tfoot>, <th>, <caption>, colspan, rowspan e atributo scope.
Tabelas Acessíveis com Atributo scope
Como associar cabeçalhos a dados para leitores de tela.
Módulo 10 — Formulários & Validação Nativa
Estrutura de formulários, GET vs POST, tipos de input, <label>, <textarea>, <select>, <datalist>, <fieldset>, <legend> e validação.
Associação Correta de Labels e Inputs
Melhore a usabilidade do formulário e garanta 100% de acessibilidade.
Módulo 11 — Metadados, SEO & Compartilhamento Social
Meta description, URL canônica, Open Graph (og:image), Twitter Cards, JSON-LD para dados estruturados e Core Web Vitals.
Open Graph e Cartões Sociais (og:title, og:image)
Faça seu site exibir previas bonitas ao ser compartilhado no WhatsApp e redes sociais.
Módulo 12 — Acessibilidade Web (WCAG & ARIA)
Diretrizes WCAG, ordem de foco, tabindex, idioma (lang), padrões ARIA quando necessários e testes.
As 5 Regras de Ouro do ARIA
A primeira regra do ARIA: Se puder usar um elemento HTML5 nativo semântico, NÃO USE ARIA!
Módulo 13 — Segurança e Privacidade na Camada HTML
Vulnerabilidades XSS, rel="noopener", atributos de iframe (sandbox), Content Security Policy (CSP) e LGPD.
Isolando IFrames com o Atributo sandbox
Impeça que conteúdo incorporado de terceiros execute scripts maliciosos.
Módulo 14 — Integração com CSS e JavaScript
Carregamento com defer e async, atributos data-*, Web Components, <template> e Progressive Enhancement.
Atributos defer vs async em Scripts
Otimize o carregamento de arquivos JavaScript sem bloquear a renderização do HTML.
Módulo 15 — Performance e Otimização de Recursos
Preload, prefetch, preconnect, lazy loading nativo, auditorias com Lighthouse e DevTools.
Diferença entre Preload, Prefetch e Preconnect
Avise o navegador com antecedência sobre os recursos críticos que serão baixados.
Módulo 16 — Organização Profissional & Qualidade de Código
Convenções de nomenclatura, Prettier, HTML Linters, controle de versão Git e revisões de código.
Linters de HTML & Validação W3C
Garanta que seu código HTML siga os padrões universais sem erros de marcação.
Módulo 17 — Projetos Práticos do Mundo Real
Construção de receitas, currículo digital, formulários acessíveis, landing pages e e-commerce.
Projeto Prático: Landing Page de E-Commerce Semântica
Estruture uma página de vendas completa com header, hero, grid de produtos e footer.
Módulo 18 — Preparação Profissional & Figma to HTML
Do Figma ao HTML semântico, refatoração de código legado, portfólio e preparação para entrevistas.
Como Transformar Telas do Figma em HTML Semântico
Metodologia para ler o design visual e extrair a arquitetura semântica correta.