14 capítulos · 73 aulas

Curso de HTML

Aprenda a construir a estrutura de páginas web do zero, cobrindo desde a história do HTML até suas principais tags, formulários, semântica e acessibilidade. Ideal para quem nunca programou antes.

1

A História do HTML

Entenda de onde veio o HTML, como ele evoluiu ao longo dos anos e por que ele ainda é a base de tudo na web.

  1. O nascimento da web e o surgimento do HTML
  2. A evolução do HTML: do HTML 1.0 ao HTML5
  3. Como o navegador lê e interpreta o HTML
2

Primeiros Passos com HTML

Configure seu ambiente, crie seu primeiro arquivo e entenda como um documento HTML é montado por dentro.

  1. O que é HTML e para que ele serve
  2. Configurando o ambiente: editor de código e navegador
  3. Estrutura básica de um documento HTML
  4. O que são tags, atributos e elementos
  5. Comentários no HTML: anotações invisíveis no código
3

Tags de Texto e Tipografia

Aprenda as tags responsáveis por apresentar e formatar textos de todos os tipos em uma página HTML.

  1. Títulos: as tags h1 a h6
  2. Parágrafos: a tag p
  3. Ênfase e importância: strong, b, em e i
  4. Marcação e alterações de texto: mark, del, ins e small
  5. Citações e referências: blockquote, q, cite e abbr
  6. Código e texto técnico: code, pre, kbd e samp
  7. Sobrescrito, subscrito e quebras: sup, sub, br e hr
5

Imagens e Mídias

Enriqueça suas páginas com imagens, vídeos, áudios e conteúdos externos de forma nativa e responsiva.

  1. Inserindo imagens com a tag img: src e alt
  2. Formatos de imagem para a web: JPG, PNG, GIF, SVG e WebP
  3. Vídeos nativos com a tag video
  4. Áudios nativos com a tag audio
  5. Incorporando conteúdo externo com iframe
6

Listas

Aprenda a organizar informações em listas de diferentes tipos, do simples ao mais detalhado.

  1. Listas não ordenadas: ul e li
  2. Listas ordenadas: ol, li e o atributo type
  3. Listas de definição: dl, dt e dd
7

Tabelas

Aprenda a organizar dados em linhas e colunas com tabelas HTML, de forma estruturada e acessível.

  1. Estrutura básica de uma tabela: table, tr, td e th
  2. Cabeçalho, corpo e rodapé da tabela: thead, tbody e tfoot
  3. Mesclando células: colspan e rowspan
  4. Legendas e acessibilidade em tabelas: caption e scope
  5. Quando usar (e quando não usar) tabelas
8

Estrutura e Layout com HTML

Aprenda a agrupar e organizar o conteúdo da página em blocos e regiões, preparando o terreno para o CSS.

  1. A tag div: agrupando conteúdo em blocos
  2. A tag span: agrupando conteúdo em linha
  3. Elementos de bloco vs. elementos inline
  4. IDs e classes: identificando e agrupando elementos
9

HTML Semântico

Dê significado real ao seu código usando tags que descrevem o papel de cada parte da página — tornando o HTML mais organizado, acessível e amigável para buscadores.

  1. O que é HTML semântico e por que ele importa
  2. Cabeçalho e rodapé da página: header e footer
  3. Navegação e conteúdo principal: nav e main
  4. Seções e artigos: section e article
  5. Conteúdo complementar e expansível: aside, details e summary
  6. Figuras, legendas e tempo: figure, figcaption e time
  7. Montando uma página completa com HTML semântico
10

Formulários

Aprenda a criar formulários completos para coletar dados dos usuários — de campos simples até seletores, botões e validações nativas.

  1. Introdução aos formulários: a tag form e seus atributos
  2. Campos de texto: input text, password e email
  3. Mais tipos de input: number, date, tel, url e search
  4. Seleção de opções: checkbox e radio
  5. Listas suspensas: select, option e optgroup
  6. Área de texto livre: textarea
  7. Botões: button e os tipos submit, reset e button
  8. Organizando formulários: fieldset, legend e label
  9. Autocompletar e sugestões: datalist e autocomplete
  10. Validação nativa de formulários: required, min, max e pattern
11

O Elemento Head: Meta Tags e SEO Básico

Conheça as configurações que ficam nos bastidores da página — invisíveis para o usuário, mas essenciais para o navegador e os buscadores.

  1. O que vai dentro do head: title, meta e link
  2. Meta tags essenciais: charset, viewport e description
  3. Open Graph: como sua página aparece nas redes sociais
  4. Favicon e ícones para dispositivos móveis
  5. Carregando estilos e scripts: link e script no head
12

Tags Especiais e Menos Conhecidas

Explore um conjunto de tags HTML que aparecem menos no dia a dia, mas que resolvem problemas específicos com elegância.

  1. Conteúdo editável: contenteditable e spellcheck
  2. Elementos interativos nativos: dialog
  3. Medidas e progresso: meter e progress
  4. Textos com direção e idioma: bdo, bdi e lang
  5. Uma introdução ao canvas e ao svg
13

Acessibilidade no HTML

Aprenda os fundamentos para criar páginas que possam ser usadas por todas as pessoas, independentemente de limitações físicas ou tecnologias assistivas.

  1. O que é acessibilidade web e por que ela importa
  2. O atributo alt em imagens: muito além da descrição
  3. Labels e formulários acessíveis
  4. Hierarquia de títulos e estrutura lógica da página
  5. Introdução ao ARIA: role, aria-label e aria-hidden
  6. Boas práticas de acessibilidade no HTML do dia a dia
14

Boas Práticas e Próximos Passos

Finalize o curso com dicas de organização, erros comuns a evitar e um mapa de onde continuar sua jornada.

  1. Boas práticas de escrita de código HTML
  2. Erros comuns no HTML e como evitá-los
  3. Validando seu HTML com o W3C Validator
  4. O que vem depois do HTML: CSS e JavaScript