HTML do zero: estrutura e semântica para a web

Conteúdo da trilha

1. 1
   

   1 Nível 1 · 5 tutoriais · 56 min

   Seu primeiro documento HTML

   Apresenta o papel do HTML e a estrutura mínima de uma página. É o ponto de partida para criar, abrir e modificar documentos antes de trabalhar com conteúdos mais elaborados.

   O que você vai aprender

   • Distinguir as funções de HTML, CSS e JavaScript em uma página web.
   • Criar um arquivo HTML em um editor, abri-lo no navegador e conferir alterações.
   • Escrever elementos e atributos com aninhamento adequado, reconhecendo elementos que não possuem tag de fechamento.
   • Montar a estrutura básica com doctype, html, head e body.
   • Definir idioma, codificação de caracteres, título da página e configuração inicial de viewport.

   1. 1 Tutorial 1: HTML, CSS e JavaScript: o papel de cada um Distinguir a estrutura do conteúdo, a apresentação visual e os comportamentos de uma página, identificando o papel do HTML nesse conjunto. Iniciante 8 min
   2. 2 Tutorial 2: Criar e atualizar um arquivo HTML no navegador Criar um arquivo local com extensão .html e executar o ciclo de editar, salvar e atualizar para conferir mudanças no navegador. Iniciante 10 min
   3. 3 Tutorial 3: Elementos, atributos e aninhamento em HTML Escrever a sintaxe de elementos e atributos, organizar elementos dentro de outros e reconhecer quando não existe tag de fechamento. Iniciante 14 min
   4. 4 Tutorial 4: Montar a estrutura básica do documento HTML Montar a estrutura-base de um documento com doctype, html, head e body, separando informações sobre a página do conteúdo que será exibido. Iniciante 10 min
   5. 5 Tutorial 5: Configurar idioma, codificação, título e viewport Completar a configuração inicial de uma página em português do Brasil, preservando os caracteres, identificando a aba do navegador e ajustando o viewport para celulares. Iniciante 14 min
2. 2
   

   2 Nível 2 · 7 tutoriais · 1h 24min

   Texto e navegação

   Transforma o documento básico em conteúdo legível e navegável. Introduz a organização textual e os endereços de recursos, necessários para conectar páginas e inserir mídias nos estágios seguintes.

   O que você vai aprender

   • Organizar conteúdo com títulos hierárquicos, parágrafos e listas apropriadas.
   • Marcar ênfase, importância e citações de acordo com o significado do texto.
   • Distinguir caminhos relativos e URLs absolutas ao referenciar páginas e arquivos.
   • Criar links entre páginas e para trechos de um documento usando identificadores.
   • Escrever textos de link que comuniquem seu destino ou sua finalidade.

   Pré-requisitos

   • Criar e abrir arquivos HTML no navegador.
   • Reconhecer elementos, atributos e regras básicas de aninhamento.
   • Distinguir o conteúdo de head e body.

   1. 1 Tutorial 1: Títulos e parágrafos para organizar o texto Organize um texto com títulos, subtítulos e parágrafos, escolhendo a marcação pelo papel de cada trecho, e não pelo tamanho visual das letras. Iniciante 11 min
   2. 2 Tutorial 2: Listas ordenadas, não ordenadas e de descrição Represente sequências, conjuntos de itens e relações entre termos e descrições com o tipo de lista apropriado. Iniciante 15 min
   3. 3 Tutorial 3: Ênfase e importância com em e strong Marque trechos de texto com ênfase ou importância, distinguindo essas intenções de uma simples preferência visual. Iniciante 9 min
   4. 4 Tutorial 4: Citações com q, blockquote e cite Diferencie citações inseridas em uma frase de citações em bloco e identifique títulos de obras sem confundi-los com nomes de autores. Iniciante 12 min
   5. 5 Tutorial 5: Caminhos relativos e URLs absolutas Determine como localizar páginas e arquivos a partir de uma estrutura de pastas fornecida, distinguindo caminhos relativos de endereços completos na web. Iniciante 14 min
   6. 6 Tutorial 6: Links entre páginas com textos claros Conecte páginas com o elemento a e escreva textos de link que ajudem o leitor a prever o destino ou a finalidade da navegação. Iniciante 11 min
   7. 7 Tutorial 7: Links para trechos de documentos com id Crie destinos identificados no conteúdo e links que levem diretamente a esses trechos, na mesma página ou em outro documento. Iniciante 12 min
3. 3
   

   3 Nível 3 · 4 tutoriais · 1h 2min

   Estrutura semântica de páginas

   Avança da marcação de trechos de conteúdo para a organização da página inteira. Estabelece regiões e relações de significado que servirão de estrutura para mídias, dados e formulários.

   O que você vai aprender

   • Organizar páginas com header, nav, main, aside e footer conforme a função de cada região.
   • Distinguir article, section e div, evitando escolher elementos apenas pela aparência.
   • Construir uma hierarquia de títulos coerente com as seções do documento.
   • Relacionar a estrutura semântica à navegação por tecnologias assistivas.
   • Criar um link para pular ao conteúdo principal usando navegação por fragmentos.

   Pré-requisitos

   • Estruturar um documento HTML válido.
   • Organizar textos com títulos, parágrafos e listas.
   • Criar links internos com identificadores.

   1. 1 Tutorial 1: Organizar as regiões da página com HTML semântico Organizar o conteúdo de uma página em regiões com header, nav, main, aside e footer, escolhendo cada elemento pela função do conteúdo, não pela posição visual. Iniciante 16 min
   2. 2 Tutorial 2: Escolher entre article, section e div Estruturar o conteúdo dentro das regiões da página, distinguindo unidades independentes, seções temáticas e agrupamentos genéricos, com títulos coerentes com essa organização. Intermediário 20 min
   3. 3 Tutorial 3: Relacionar regiões e títulos à navegação por leitor de tela Relacionar a marcação semântica às formas de localizar conteúdo com um leitor de tela, distinguindo a navegação por regiões da navegação por títulos. Intermediário 12 min
   4. 4 Tutorial 4: Criar um link para pular ao conteúdo principal Adicionar um atalho visível que permita contornar a navegação repetida e alcançar o conteúdo principal usando apenas recursos do HTML. Intermediário 14 min
4. 4
   

   4 Nível 4 · 7 tutoriais · 2h 12min

   Imagens, áudio e vídeo

   Acrescenta conteúdo visual e sonoro à estrutura semântica já conhecida. O foco é selecionar a marcação apropriada e oferecer alternativas para diferentes condições de acesso.

   O que você vai aprender

   • Inserir imagens com caminhos válidos, dimensões declaradas e texto alternativo adequado ao contexto.
   • Distinguir imagens informativas e decorativas ao definir o atributo alt.
   • Associar mídias às suas legendas com figure e figcaption quando houver uma unidade de conteúdo independente.
   • Oferecer alternativas de imagem com srcset, sizes e picture conforme resolução e condições de exibição.
   • Incorporar áudio e vídeo com controles nativos e fontes alternativas.
   • Disponibilizar legendas, transcrições e alternativas descritivas conforme o conteúdo da mídia.

   Pré-requisitos

   • Usar atributos HTML e caminhos relativos ou absolutos.
   • Organizar o conteúdo em regiões semânticas.
   • Distinguir conteúdo, significado e apresentação visual.

   1. 1 Tutorial 1: Inserir imagens com dimensões e texto alternativo Inserir imagens com endereço válido, declarar suas dimensões e definir o texto alternativo conforme a função da imagem no conteúdo. Iniciante 20 min
   2. 2 Tutorial 2: Associar imagens e legendas com figure e figcaption Marcar uma imagem ou um conjunto de imagens como unidade de conteúdo autocontida e associar uma legenda visível quando ela for necessária. Iniciante 11 min
   3. 3 Tutorial 3: Oferecer resoluções de imagem com srcset e sizes Declarar versões de uma mesma imagem para que o navegador selecione um recurso adequado à densidade da tela e à largura prevista de exibição. Intermediário 25 min
   4. 4 Tutorial 4: Alternar recortes e formatos de imagem com picture Usar picture para oferecer enquadramentos ou formatos alternativos, preservando uma imagem de reserva e um significado consistente. Intermediário 18 min
   5. 5 Tutorial 5: Incorporar áudio e vídeo com controles nativos Inserir arquivos de áudio e vídeo com controles do navegador, fontes alternativas e acesso direto aos arquivos, sem depender de JavaScript. Iniciante 20 min
   6. 6 Tutorial 6: Adicionar legendas sincronizadas com track e WebVTT Criar uma faixa simples de legendas em WebVTT e associá-la a um vídeo, identificando seu idioma e sua finalidade. Intermediário 20 min
   7. 7 Tutorial 7: Disponibilizar transcrições e versões com audiodescrição Selecionar e disponibilizar alternativas para mídias gravadas, incluindo transcrições e acesso a versões com audiodescrição quando houver informação visual essencial não narrada. Intermediário 18 min
5. 5
   

   5 Nível 5 · 4 tutoriais · 1h 17min

   Dados em tabelas

   Introduz a representação de relações entre linhas e colunas, que exige uma estrutura diferente da usada em textos e mídias. Desenvolve a capacidade de apresentar dados sem recorrer a tabelas para montar o layout da página.

   O que você vai aprender

   • Identificar quando um conjunto de informações deve ser representado como tabela.
   • Construir tabelas com linhas, células de dados, cabeçalhos e título descritivo.
   • Organizar grupos de linhas com thead, tbody e tfoot quando apropriado.
   • Associar cabeçalhos e células com scope e, quando necessário, id e headers.
   • Usar colspan e rowspan sem perder a clareza das relações entre os dados.

   Pré-requisitos

   • Aninhar elementos HTML corretamente.
   • Usar atributos e identificadores.
   • Escolher elementos pelo significado do conteúdo, e não pela aparência.

   1. 1 Tutorial 1: Criar tabelas simples com cabeçalhos e título Identificar dados tabulares e construir uma tabela simples com título descritivo e cabeçalhos associados às linhas e colunas, sem usar tabelas para organizar o layout da página. Iniciante 22 min
   2. 2 Tutorial 2: Organizar grupos de linhas com thead, tbody e tfoot Organizar as linhas de uma tabela em grupos de cabeçalho, corpo e resumo, escolhendo os agrupamentos conforme a função dos dados. Iniciante 12 min
   3. 3 Tutorial 3: Mesclar células com colspan e rowspan Criar células que abrangem várias linhas ou colunas, preservando a grade da tabela e as associações de cabeçalhos que representam grupos de dados. Intermediário 25 min
   4. 4 Tutorial 4: Associar cabeçalhos complexos com id e headers Representar explicitamente as relações entre células e múltiplos cabeçalhos quando scope não for suficiente, reconhecendo situações em que simplificar a tabela é a melhor escolha. Intermediário 18 min
6. 6
   

   6 Nível 6 · 8 tutoriais · 2h 4min

   Formulários e entrada de dados

   Passa da apresentação de informações para a interação com o usuário. Ensina a estruturar formulários compreensíveis e acessíveis, deixando claros os limites do HTML no envio e no tratamento dos dados.

   O que você vai aprender

   • Estruturar formulários e explicar as funções de action, method e name no envio de dados.
   • Escolher controles e tipos de input adequados às informações solicitadas.
   • Associar rótulos aos controles e agrupar campos relacionados com fieldset e legend.
   • Distinguir botões de ação e de envio, evitando submissões involuntárias.
   • Configurar autocomplete, instruções e restrições de preenchimento com os recursos nativos do HTML.
   • Diferenciar GET e POST e reconhecer que validação no navegador não substitui validação no servidor nem proteção do transporte com HTTPS.

   Pré-requisitos

   • Criar documentos com estrutura semântica e hierarquia de títulos.
   • Usar atributos, identificadores e URLs.
   • Compreender como associações semânticas tornam o conteúdo mais acessível.

   1. 1 Tutorial 1: Criar campos de texto com rótulos acessíveis Ao concluir, você poderá criar campos de uma ou várias linhas e associar rótulos visíveis que identifiquem corretamente cada controle. Iniciante 13 min
   2. 2 Tutorial 2: Configurar o envio de dados com form Ao concluir, você poderá configurar o destino e o método de envio de um formulário, identificar os dados enviados e explicar o que depende de processamento no servidor. Intermediário 20 min
   3. 3 Tutorial 3: Evitar envios acidentais com tipos de botão Ao concluir, você poderá definir o comportamento de cada botão de um formulário e evitar ações inesperadas de envio ou restauração de valores. Iniciante 10 min
   4. 4 Tutorial 4: Escolher tipos de input conforme a informação Ao concluir, você poderá selecionar tipos de campo adequados para endereços de e-mail, URLs, telefones, senhas, quantidades e datas, sem confundir números com identificadores. Intermediário 16 min
   5. 5 Tutorial 5: Agrupar campos relacionados com fieldset e legend Ao concluir, você poderá reunir campos relacionados em grupos com identificação semântica, preservando o rótulo individual de cada controle. Iniciante 9 min
   6. 6 Tutorial 6: Criar opções de escolha com checkbox, radio e select Ao concluir, você poderá oferecer escolhas independentes, exclusivas ou em listas, configurando rótulos, agrupamentos e valores de envio coerentes. Intermediário 20 min
   7. 7 Tutorial 7: Facilitar o preenchimento com autocomplete e inputmode Ao concluir, você poderá informar ao navegador a finalidade dos campos e sugerir teclados virtuais adequados, reduzindo o esforço de preenchimento sem confundir essas dicas com validação. Intermediário 11 min
   8. 8 Tutorial 8: Aplicar validação nativa com instruções claras Ao concluir, você poderá configurar obrigatoriedade e limites de preenchimento, associar instruções aos campos e explicar por que a validação do navegador não garante a segurança dos dados recebidos. Intermediário 25 min
7. 7
   

   7 Nível 7 · 8 tutoriais · 2h 4min

   Integração e validação de um site

   Integra os recursos anteriores em um pequeno site e introduz práticas de organização e verificação. O novo foco é manter a consistência entre páginas, complementar seus metadados e diagnosticar problemas de estrutura, navegação e acessibilidade.

   O que você vai aprender

   • Planejar uma estrutura de pastas e páginas com navegação consistente e caminhos funcionais.
   • Integrar conteúdo semântico, mídias, tabelas e formulários conforme a necessidade de cada página.
   • Definir descrições de página e referências a ícones nos metadados do documento.
   • Usar um validador de HTML para identificar e corrigir erros de marcação.
   • Inspecionar o documento no navegador para investigar diferenças entre o código escrito e a estrutura interpretada.
   • Executar verificações manuais de links, carregamento de recursos, navegação por teclado, hierarquia de títulos e identificação de campos, reconhecendo os limites das verificações automáticas.

   Pré-requisitos

   • Criar e conectar páginas usando caminhos relativos.
   • Organizar páginas com elementos semânticos.
   • Inserir mídias com alternativas acessíveis.
   • Representar dados com tabelas e cabeçalhos associados.
   • Construir formulários com rótulos, agrupamentos e validação nativa.

   1. 1 Tutorial 1: Planejar pastas e navegação de um pequeno site Ao concluir, você será capaz de planejar as páginas, as pastas e as conexões de um pequeno site antes de montar seus documentos. Intermediário 14 min
   2. 2 Tutorial 2: Integrar conteúdos em páginas consistentes Ao concluir, você será capaz de montar as páginas de um pequeno site a partir de uma base comum, integrando os recursos de HTML já aprendidos conforme a necessidade de cada conteúdo. Intermediário 22 min
   3. 3 Tutorial 3: Adicionar descrição e ícone aos metadados da página Ao concluir, você será capaz de complementar o head de cada página com uma descrição adequada ao seu conteúdo e uma referência ao ícone do site. Iniciante 10 min
   4. 4 Tutorial 4: Encontrar e corrigir erros com um validador de HTML Ao concluir, você será capaz de submeter documentos a um validador, interpretar seus diagnósticos e corrigir problemas de marcação de forma sistemática. Intermediário 15 min
   5. 5 Tutorial 5: Comparar o código-fonte com o DOM no navegador Ao concluir, você será capaz de usar o inspetor do navegador para investigar como o HTML foi interpretado e explicar diferenças em relação ao arquivo original. Intermediário 16 min
   6. 6 Tutorial 6: Testar links e carregamento de recursos do site Ao concluir, você será capaz de executar um roteiro de testes para localizar destinos incorretos e recursos que não carregam, registrando informações suficientes para corrigir e conferir cada falha. Intermediário 15 min
   7. 7 Tutorial 7: Verificar a navegação e os controles pelo teclado Ao concluir, você será capaz de percorrer as páginas sem mouse e verificar se links, atalhos e controles nativos podem ser alcançados e utilizados em uma sequência compreensível. Intermediário 16 min
   8. 8 Tutorial 8: Conferir títulos e nomes acessíveis no navegador Ao concluir, você será capaz de revisar a hierarquia de títulos e a identificação dos elementos interativos, usando a inspeção do navegador como apoio e reconhecendo o que verificações automáticas não conseguem garantir. Intermediário 16 min