Autoria (Autoria Discente) Este material foi produzido como parte integrante da Atividade de Extensão do Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas (Manhã) da UNIP Tatuapé.
Autores:
● GUILHERME BORGES (G03IHI3)
● IGOR VIEIRA MAGALHÃES (G0610I3)
● KELWIN ALEXANDRE ASSENCIO MANGINI (G9936J5)
● LEONARDO MONTEIRO MARQUES (R1885B9)
● MIGUEL DOS SANTOS GALVÃO (R110IF1)
● RAFAEL ARLES SOUZA DANTAS (R0796I0)
● YGOR MOREIRA RIBAS (G9048H0)
● DIEGO YUGI UEHARA(G9936G0)
Prefácio do Projeto de Extensão
1. Justificativa e Motivação
Este e-book justifica-se pela onipresença da web no cotidiano moderno e pela necessidade fundamental de compreender a linguagem que estrutura a internet. O HTML5 não é apenas uma ferramenta para programadores, mas a base da alfabetização digital na criação de conteúdo online. Em um mercado onde a presença digital é mandatória para empresas e indivíduos, dominar a estruturação semântica e acessível de páginas web é uma competência essencial.
Apesar da abundância de informações dispersas na internet, muitos iniciantes encontram dificuldades em distinguir práticas obsoletas (como o uso de tabelas para layout ou tags de formatação visual como <font>) das modernas normas da W3C. Este projeto de extensão é motivado pela vontade de fornecer um material consolidado, em português, denso e tecnicamente rigoroso. Nosso objetivo é guiar o estudante desde a primeira tag até o uso de APIs modernas, boas práticas de SEO Técnico e acessibilidade universal, preparando-o para as demandas reais do mercado de trabalho de 2025 e além.
2. Objetivos do Projeto
Objetivo Geral: Capacitar a comunidade no desenvolvimento web Front-end, focando na linguagem de marcação HTML5, através de um material didático abrangente que promova a inclusão digital e a qualificação técnica profissionalizante. Objetivos Específicos:
● Fundamentação Teórica: Ensinar a sintaxe, a estrutura fundamental de documentos web e o funcionamento dos motores de renderização.
● Domínio Técnico: Aprofundar o conhecimento sobre o DOM (Document Object Model) e a árvore de elementos.
● Consciência Inclusiva: Demonstrar a importância crítica da semântica para a acessibilidade (a11y) e para a otimização em motores de busca (SEO).
● Prática Moderna: Introduzir recursos multimídia avançados, formulários complexos com
validação nativa e APIs de hardware.
● Acesso Aberto: Disponibilizar este guia publicamente para fomentar o autoaprendizado na comunidade externa.
3. Público-Alvo
Este e-book destina-se a qualquer membro da comunidade externa interessado em tecnologia:
● Estudantes: De ensino médio, técnico ou superior buscando uma introdução sólida e academicamente correta à programação web.
● Empreendedores: Que desejam entender a estrutura de seus próprios sites, lojas virtuais ou blogs para melhor gerenciá-los.
● Profissionais em Transição: Pessoas migrando de outras áreas para o setor de tecnologia (Front-end) que necessitam de uma base teórica forte antes de avançar para frameworks como React ou Angular.
Sobre Este Livro
Bem-vindo ao "HTML5: O Guia Definitivo". Este livro foi projetado para ser seu manual de cabeceira no universo do desenvolvimento Front-end. Se você é um iniciante absoluto ou alguém que busca solidificar seus conhecimentos, você está no lugar certo. Juntos, vamos explorar desde os fundamentos da estrutura de uma página web até os recursos mais modernos e poderosos que o HTML5 oferece. Ao contrário de tutoriais fragmentados que ensinam apenas a "copiar e colar", aqui construiremos o conhecimento camada por camada: começando pelo texto simples, passando por mídias, formulários complexos, até chegar em conceitos avançados como APIs de geolocalização, armazenamento local e estratégias de SEO técnico.
Ao final desta jornada, você não apenas entenderá o que cada tag faz, mas também saberá como o navegador interpreta seu código, por que certas decisões arquiteturais são tomadas e como garantir que seu site seja acessível para todos os usuários, independentemente de suas limitações físicas ou tecnológicas.
Sumário Detalhado
● Capítulo 1: Introdução ao HTML e à Engenharia da Web
○ O funcionamento da Internet (Cliente-Servidor)
○ Motores de Renderização (Blink, WebKit, Gecko)
○ História e Evolução (A Guerra dos Browsers até o HTML5)
○ Estrutura Básica, Doctype e Metadados Essenciais
● Capítulo 2: Trabalhando com Texto e Tipografia
○ Hierarquia de Títulos e SEO
○ Parágrafos e Espaçamento
○ Formatação Semântica vs. Visual (<b> vs <strong>, <i> vs <em>)
○ Entidades de Caractere e Símbolos Especiais
○ Citações, Abreviações e Códigos
● Capítulo 3: Listas, Links e Navegação
○ Listas Ordenadas, Não Ordenadas e de Definição
○ Aprofundando em Caminhos: Absolutos vs. Relativos vs. Raiz
○ Anatomia de um Link: Atributos target, rel, download, mailto, tel
● Capítulo 9: Acessibilidade Web (a11y) e Inclusão
○ Os 4 princípios da WCAG (POUR)
○ WAI-ARIA: Roles, States e Properties
○ Navegação por teclado e Foco
○ Ferramentas de auditoria (Lighthouse, Axe)
● Capítulo 10: SEO Técnico e Metadados
○ A tag head em profundidade
○ Meta Tags de Descrição, Keywords e Viewport
○ Open Graph (Facebook/LinkedIn) e Twitter Cards
○ SEO Internacional (hreflang) e Canônicos
○ Favicons e Manifestos Web
● Capítulo 11: APIs Modernas do HTML5
○ Web Storage (localStorage vs sessionStorage)
○ Geolocalização
○ Drag and Drop API
○ Noções de Canvas e SVG interativo
● Capítulo 12: Projeto Final: Portfólio Profissional Completo
○ Planejamento, Wireframe e Estrutura de Pastas
○ Desenvolvimento passo a passo comentado
● Capítulo 13: Boas Práticas, Ferramentas e Carreira
○ Validação W3C
○ Configuração de Ambiente (VS Code, Extensões)
○ Hospedagem Gratuita (GitHub Pages, Vercel)
○ Próximos Passos (CSS, JS, Frameworks)
● Glossário Técnico
Capítulo 1: Introdução ao HTML e à Engenharia da Web
O que é HTML?
HTML significa HyperText Markup Language (Linguagem de Marcação de Hipertexto). É fundamental entender que HTML não é uma linguagem de programação (como Python, Java ou C#), pois não possui lógica de controle de fluxo (loops for, condicionais if/else, variáveis dinâmicas) nativa. É uma linguagem de marcação descritiva, usada para anotar o conteúdo de um documento, definindo sua estrutura semântica e hierárquica. Pense no HTML como a planta baixa e a alvenaria de uma construção. Ele define onde fica a cozinha, onde fica a porta e onde fica a janela. Ele não define a cor da parede (isso é papel do CSS) nem como o portão eletrônico abre automaticamente (isso é papel do JavaScript).
Como a Web Funciona? (O Ciclo Requisição-Resposta)
Para escrever um bom HTML, você precisa entender onde ele vive.
1. O Cliente (Navegador): Você digita www.unip.br no Chrome. O navegador resolve o nome para um IP (via DNS) e envia uma Requisição HTTP para o servidor.
2. O Servidor: Recebe o pedido e envia de volta os arquivos (HTML, CSS, JS, Imagens).
3. O Parsing (Análise): O navegador recebe o arquivo HTML (que é apenas texto) e começa a lê-lo de cima para baixo.
4. O DOM (Document Object Model): O navegador converte as tags de texto em objetos na memória do computador, criando uma estrutura de árvore chamada DOM.
5. A Renderização: Finalmente, o navegador "pinta" os pixels na tela baseados no DOM e no CSS.
Nota Técnica: Se o seu HTML tiver erros de sintaxe (como não fechar uma tag), o navegador tentará "adivinhar" onde fechar, o que pode levar a layouts quebrados ou lentidão na criação do DOM.
Motores de Renderização
Diferentes navegadores usam diferentes "motores" para ler seu HTML:
● Blink: Usado pelo Google Chrome, Microsoft Edge, Opera e Brave.
● WebKit: Usado pelo Safari (Apple).
● Gecko: Usado pelo Mozilla Firefox. Seu código HTML deve seguir os padrões da W3C para garantir que funcione identicamente em todos esses motores.
História:
Do HTML 4 ao HTML5
O HTML foi criado por Tim Berners-Lee em 1991 no CERN.
● Anos 90 (Guerra dos Browsers): Netscape e Internet Explorer criavam tags proprietárias que só funcionavam em seus navegadores, fragmentando a web.
● HTML 4.01 (1999): Tentativa de padronização.
● XHTML (Anos 2000): Uma versão muito rígida do HTML baseada em XML. Se você errasse uma vírgula, a página não abria. Falhou por ser muito estrito.
● HTML5 (2014): A revolução. Oficializado pela W3C, trouxe tolerância a erros, semântica rica e APIs de aplicativo. É o padrão vivo (Living Standard) usado hoje.
Estrutura Básica de um Documento
Todo arquivo HTML5 válido deve seguir estritamente esta estrutura: <!DOCTYPE html> <!-- 1. Doctype --> <html lang="pt-BR"> <!-- 2. Elemento Raiz --> <head> <!-- 3. Metadados --> <meta charset="UTF-8">
<meta name="description" content="Descrição do meu site para o Google.">
<title>Título da Aba do Navegador</title> </head>
<body> <!-- 4. Conteúdo Visível --> <header>
<h1>Bem-vindo ao Meu Site</h1> </header> <main>
<p>Este é meu primeiro parágrafo semântico.</p> </main> </body> </html>
Detalhamento Crítico:
1. <!DOCTYPE html>: Instrui o navegador a usar o modo de renderização "Standards Mode" (HTML5 moderno). Sem isso, o navegador entra em "Quirks Mode" (Modo de Compatibilidade), simulando navegadores dos anos 90 e quebrando seu layout.
2. lang="pt-BR": Vital para acessibilidade. Avisa ao leitor de tela (usado por cegos) que a voz deve ser sintetizada em Português Brasileiro, não em Inglês ou Português de Portugal.
4. viewport: Essencial para responsividade. Diz ao navegador móvel para usar a largura real da tela (pixels do dispositivo) e não simular um monitor de desktop afastado.
Exercícios Práticos - Capítulo 1
1. Setup do Ambiente: Instale o VS Code e a extensão "Live Server". Crie uma pasta projeto-html e dentro dela um arquivo index.html.
2. A "Mão": Digite a estrutura básica (Doctype, html, head, body) manualmente, sem copiar e colar, 3 vezes. A memória muscular é importante.
3. Inspecionando: Abra qualquer site famoso (G1, Wikipedia). Clique com o botão direito e escolha "Exibir Código Fonte". Tente localizar a tag <head> e o <meta charset>.
4. Erro Proposital: Remova a tag <meta charset="UTF-8"> do seu arquivo, escreva uma frase com muitos acentos ("Ação, Emoção, Coração") e abra no navegador. Veja se ocorre algum erro de renderização (dependendo da configuração do seu sistema, pode ou não ocorrer, mas é um teste válido).
5. Validação: Copie seu código e cole no validador oficial: validator.w3.org. Corrija qualquer erro apontado.
Capítulo 2: Trabalhando com Texto e Tipografia
O texto é a matéria-prima da web. O HTML oferece ferramentas ricas para formatá-lo semanticamente, indicando não apenas como ele deve parecer, mas o que ele é (importância, citação, código, abreviação).
Hierarquia de Títulos (<h1> a <h6>)
Os headings não servem para escolher o tamanho da fonte, mas para criar o índice do documento.
● <h1>: O tema principal da página. Deve haver apenas um por página. O Google dá peso máximo a ele.
● <h2>: Títulos das seções principais.
● <h3>: Subtítulos dentro das seções.
Analogia: Pense em um livro. O <h1> é o título do livro na capa. Os <h2> são os nomes dos capítulos. Os <h3> são os tópicos dentro do capítulo.
Parágrafos e Espaçamento
● <p>: Define um parágrafo de texto. Navegadores aplicam margens verticais automáticas.
● <br>: Line Break. Quebra a linha forçadamente. Use apenas para poemas ou endereços postais. Nunca use múltiplos <br><br><br> para dar espaço visual (use CSS margin para isso).
● <hr>: Horizontal Rule. Semanticamente, define uma "mudança de tema" ou separação de cena na narrativa. Visualmente, cria uma linha.
Formatação Semântica: O Significado Importa
No passado, usávamos tags visuais. No HTML5, usamos tags semânticas.
Tag Visual (Evitar)
<b> (Bold)
Tag Semântica (Usar) Significado Semântico
<strong>
<i> (Italic)
<u> (Underline)
<s> (Strike)
<small>
<em> (Emphasis)
<ins> ou CSS
<del>
<small>
Entidades de Caractere (Character Entities)
Importância Forte. O leitor de tela pode mudar o tom de voz para "alerta". Use para avisos ou termos-chave.
Ênfase. Muda a entonação da frase (como ironia ou destaque falado).
Sublinhado confunde com links. Use <ins> para indicar texto inserido numa revisão.
Texto deletado/removido. Útil para mostrar "Preço Antigo: ~~R$ 100~~".
Texto de "letras miúdas" (copyright, avisos legais), não apenas texto pequeno visualmente.
Alguns caracteres são reservados no HTML (como < e >). Para exibi-los na tela, ou para exibir símbolos especiais, usamos entidades que começam com & e terminam com ;.
● < (Less Than): Símbolo <
● > (Greater Than): Símbolo >
● & (Ampersand): Símbolo &
● (Non-Breaking Space): Um espaço que impede a quebra de linha entre duas palavras (ex: 10 kg).
● <blockquote>: Citação em bloco (longa), de outra fonte. Geralmente recuada. Use o atributo cite para a URL da fonte.
● <q>: Citação curta (inline). O navegador adiciona aspas automaticamente.
● <abbr title="HyperText Markup Language">HTML</abbr>: Define uma abreviação. Ao passar o mouse, o title aparece.
● <address>: Informações de contato do autor/empresa. Não serve para endereços genéricos, apenas para o contato do dono da página.
Exercícios Práticos - Capítulo 2
1. Blog Post: Crie uma página com um artigo fictício. Use <h1> para o título, <h2> para subtítulos e <p> para o texto.
2. Promoção: Crie um parágrafo anunciando um produto. Use <del> no preço antigo e <strong> no preço novo. Ex: "De ~~R$ 50~~ por **R$ 20**".
3. Poema: Escreva um pequeno poema usando <p> e <br> para quebrar os versos corretamente.
4. Química: Pesquise sobre as tags <sub> (subscrito) e <sup> (sobrescrito) e escreva a fórmula da água (HO) e a equação de Einstein (E=mc²). ₂
5. Código: Use a tag <pre> combinada com <code> para exibir um trecho de código JavaScript na tela, mantendo a indentação original.
Capítulo 3: Listas, Links e Navegação
A Web é uma teia de documentos conectados. Sem links e listas, não haveria organização.
Listas: Organizando a Informação
1. Listas Não Ordenadas (<ul>):
○ Para itens onde a ordem não importa (ex: lista de compras).
○ Cada item é um <li> (List Item).
○ Pode ser aninhada (uma lista dentro de um <li> de outra lista).
2. Listas Ordenadas (<ol>):
○ Para passos sequenciais, instruções ou rankings.
○ Atributo reversed: Inverte a contagem (10, 9, 8...).
○ Atributo start="5": Começa a contagem em um número específico.
○ Atributo type="I": Usa algarismos romanos (I, II, III).
3. Listas de Definição (<dl>):
○ Útil para glossários, dicionários ou pares chave-valor (metadados).
○ <dt>: Termo.
○ <dd>: Descrição/Definição.
Links: A Anatomia da Tag <a>
A tag <a> (Anchor) é o núcleo da web.
Caminhos (Paths): Onde está o arquivo? Entender caminhos é a maior dificuldade de iniciantes.
● Absoluto: https://www.google.com/images/logo.png (Endereço completo na internet).
● Relativo: Depende de onde você está.
○ contato.html: O arquivo está na mesma pasta que eu.
○ pastas/contato.html: O arquivo está numa subpasta.
○ ../index.html: .. significa "voltar uma pasta" (pasta pai).
○ /img/foto.jpg: A barra inicial / significa "Raiz do site" (pasta principal do servidor).
Atributos Essenciais:
● href: O destino.
● target="_blank": Abre em nova aba/janela.
○ Segurança: Sempre que usar target="_blank", adicione rel="noopener noreferrer". Isso impede que a nova página aberta possa controlar a página original via JavaScript (um ataque conhecido como Tabnabbing).
● download: Força o download do arquivo ao invés de abri-lo.
Você pode linkar para uma parte específica da página usando IDs.
1. Dê um ID ao destino: <h2 id="historia">Nossa História</h2>
2. Crie o link com cerquilha: <a href="#historia">Ir para História</a>
Exercícios Práticos - Capítulo 3
1. Estrutura de Pastas: Crie uma estrutura no seu computador:
○ Pasta site
■ Arquivo index.html
■ Pasta paginas
■ Arquivo sobre.html
■ Pasta imagens
2. Navegação Relativa: No index.html, crie um link para sobre.html. No sobre.html, crie um link "Voltar para Home" que funcione corretamente.
3. Menu: Crie um menu de navegação usando uma lista não ordenada <ul> com 3 links.
4. One Page: No index.html, adicione muito texto (use Lorem Ipsum) para criar rolagem. Crie um link no topo "Ir para o Rodapé" e um link no rodapé "Voltar ao Topo" usando âncoras (#).
5. Glossário: Crie uma lista de definição (<dl>) explicando 3 termos de tecnologia (HTML, CSS, JS).
Capítulo 4: Imagens e Multimídia Avançada
A web moderna é visual. O HTML5 eliminou a necessidade de plugins como Flash para áudio e vídeo.
Imagens (<img>)
Tags de imagem são void elements (não fecham).
● src: Caminho da imagem.
● alt: Obrigatório por lei e ética. Descreve a imagem para cegos e robôs de busca.
○ Se a imagem for decorativa (um enfeite), use alt="" (vazio), mas não omita o atributo.
● loading="lazy": Carregamento preguiçoso. A imagem só é baixada quando o usuário rola a tela até ela. Ótimo para performance.
Formatos de Imagem:
● JPG: Fotos reais. Boa compressão, mas perde qualidade. Não tem transparência.
● PNG: Gráficos, logos, capturas de tela. Tem transparência. Arquivos maiores.
● SVG: Vetorial (código matemático). Infinitamente escalável sem perder qualidade. Ideal para ícones e logos simples.
● WebP: Formato moderno (Google). Substituto superior para JPG e PNG com menor tamanho de arquivo.
● AVIF: O formato mais moderno e eficiente de todos (suporte crescente).
Imagens Responsivas (<picture>)
Em celulares, não queremos baixar uma imagem 4K de 5MB. Queremos uma versão leve. A tag <picture> resolve isso (Direção de Arte).
<picture>
<!-- Se a tela for maior que 800px, carrega esta: --> <source media="(min-width: 800px)" srcset="foto-desktoplarge.jpg">
<!-- Se a tela for maior que 450px, carrega esta: --> <source media="(min-width: 450px)" srcset="foto-tablet.jpg">
<!-- Fallback: Se nada acima servir, ou navegador for antigo, carrega esta: -->
● track: Arquivo .vtt com legendas. Essencial para surdos ou para quem vê vídeo no mudo.
Figures
Para associar uma legenda a uma imagem semanticamente: <figure> <img src="grafico-vendas.jpg" alt="Gráfico de barras subindo"> <figcaption>Fig.1 - Crescimento de vendas no Q3.</figcaption> </figure>
Exercícios Práticos - Capítulo 4
1. Galeria: Crie uma página com 3 imagens. Use o atributo width para garantir que todas tenham a mesma largura visual.
2. Conversão: Pegue uma imagem JPG pesada, converta online para WebP e exiba ambas na página para comparar qualidade/tamanho.
3. Áudio: Grave um áudio curto no celular, envie para o computador e incorpore na página com a tag <audio controls>.
4. Acessibilidade: Escreva os textos alt para 3 situações:
○ Uma foto de um botão "Comprar" que é uma imagem.
○ Uma foto decorativa de um fundo abstrato.
○ Um gráfico complexo (o alt deve resumir os dados).
5. Responsividade: (Desafio) Tente implementar a tag <picture> que mostra uma foto colorida no Desktop e a mesma foto em preto e branco no Mobile (você precisará de 2 arquivos de imagem).
Capítulo 5: Tabelas de Dados Complexas
Tabelas servem estritamente para dados tabulares (planilhas, horários, comparativos). Nunca use tabelas para layout (posicionar o menu à esquerda e o conteúdo à direita), isso destrói a acessibilidade.
Estrutura Semântica Completa
Uma tabela acessível vai muito além de linhas e colunas simples. <table>
<caption>Cardápio da Cantina - Preços 2025</caption> <!-- Título da tabela -->
<!-- Agrupamento de Colunas para Estilo --> <colgroup>
<col span="1" style="background-color: #f2f2f2"> <!-- Coluna do Item -->
<col span="1"> <!-- Coluna do Preço --> </colgroup>
<tbody> <!-- Corpo de Dados --> <tr> <td scope="row">Pão de Queijo</td> <!-- scope="row" indica que esta célula é o título da linha --> <td>5,00</td> </tr> <tr> <td scope="row">Suco Natural</td> <td>8,00</td> </tr>
Para um usuário vidente, é fácil associar visualmente que "5,00" se refere ao "Pão de Queijo". Para um cego usando leitor de tela, o software lê linearmente. O atributo scope="col" diz: "Esta célula é o cabeçalho de toda esta coluna". O atributo scope="row" diz: "Esta célula é o cabeçalho desta linha". Isso permite que o leitor de tela diga: "Item: Pão de Queijo, Preço: 5,00".
Mesclagem
de Células
● colspan="2": A célula se estica para a direita, ocupando 2 colunas.
● rowspan="3": A célula se estica para baixo, ocupando 3 linhas.
Exercícios Práticos - Capítulo 5
1. Boletim Escolar: Crie uma tabela com as colunas: Matéria, Nota 1, Nota 2, Média. Insira 3 matérias.
2. Mesclagem: Adicione uma linha no topo do cabeçalho com colspan="4" escrito "Resultados do 1º Semestre".
3. Horário: Crie uma tabela de horários de aula (Segunda a Sexta) onde o intervalo
(Recreio) é uma única linha que atravessa todos os dias (colspan).
4. Acessibilidade: Valide se você usou scope="col" nos cabeçalhos dos dias da semana.
Capítulo 6: Incorporando
Conteúdo Externo
A web é modular. Você pode trazer pedaços de outros sites para o seu.
Iframe (<iframe>)
O Inline Frame cria uma janela dentro do seu site que carrega outro site.
● Uso Comum: Mapas, Vídeos do YouTube, Dashboards do PowerBI, PDFs.
● Riscos: Se você incorporar um site malicioso, ele pode tentar roubar dados ou redirecionar seu usuário.
O Atributo sandbox: Sempre que incorporar conteúdo que você não controla 100%, use sandbox. Ele cria uma "jaula" de segurança. <iframe src="site-estranho.html" sandbox></iframe> Isso impede que o site incorporado execute scripts, envie formulários ou abra popups, a menos que você libere explicitamente (ex: sandbox="allow-scripts").
Embed e Object
Antigamente usados para Flash e Java Applets. Hoje, <object> ainda é útil para incorporar PDFs diretamente na página se o Iframe falhar, ou SVGs complexos. <object data="manual.pdf" type="application/pdf" width="100%" height="500px"> <p>Seu navegador não tem plugin de PDF. <a href="manual.pdf">Baixe aqui.</a></p> </object>
Exercícios Práticos - Capítulo 6
1. YouTube: Vá em um vídeo do YouTube -> Compartilhar -> Incorporar. Copie o código e cole no seu HTML. Analise os atributos que o Google usa (frameborder, allowfullscreen).
2. Google Maps: Incorpore o mapa da sua cidade. Tente alterar o width para 100% e veja como ele se comporta.
3. Iframe Recursivo: (Curiosidade) Crie uma página a.html com um iframe para b.html. Crie b.html com um iframe para a.html. Abra no navegador e veja o que acontece (efeito espelho infinito ou bloqueio do navegador).
Capítulo 7: Formulários e Interatividade Rica
Formulários são a principal forma de interação bidirecional na web (Login, Cadastro, Busca).
A Tag <form>
● action: A URL do servidor (Backend API) que receberá os dados.
● method:
○ GET: Envia dados na URL (pesquisa?q=gato). Rápido, cacheável. Nunca use para senhas.
○
POST: Envia dados no corpo da requisição. Seguro para senhas e dados grandes.
Novos Tipos de Input (HTML5)
Eles mudam o teclado em dispositivos móveis (UX):
● type="email": Teclado com @.
● type="tel": Teclado numérico telefônico.
● type="url": Teclado com .com e /.
● type="number": Setas de incremento. Atributos min, max, step.
● type="range": Slider visual.
● type="date", time, color: Seletores nativos do sistema operacional.
Validação Nativa (Constraint Validation)
Não dependa apenas de JavaScript. O HTML5 valida sozinho:
● required: Impede o envio se vazio.
● minlength / maxlength: Limite de caracteres.
● pattern: Aceita Expressões Regulares (Regex).
○ Ex (CEP brasileiro): pattern="\d{5}-\d{3}" (5 dígitos, traço, 3 dígitos).
○ O atributo title deve explicar o padrão para o usuário caso ele erre.
Elementos Avançados
● <datalist>: Autocomplete híbrido (sugere opções mas permite digitar outra).
● <fieldset> e <legend>: Agrupa campos visual e semanticamente (ex: Dados Pessoais vs Endereço).
● <label>: Obrigatório. Clique no texto foca o input. Aumenta a área de clique.
Exercícios Práticos - Capítulo 7
1. Login: Crie um form de login com e-mail e senha. A senha deve ter minlength="8". O botão de enviar só deve funcionar se os campos estiverem preenchidos.
2. Pesquisa: Crie um campo de busca (type="search") com datalist sugerindo 5 frutas.
3. Regex: Crie um campo para CPF que exija exatamente o formato 000.000.000-00. (Pesquise o regex de CPF ou tente criar um simplificado).
4. Range: Crie um slider de 0 a 100, com passos de 10 em 10 (step="10").
Capítulo 8: HTML Semântico e Arquitetura da Informação
Escrever HTML é estruturar informação. O "Divitus" (uso excessivo de <div>) é uma doença do código.
Landmarks (Marcos)
Leitores de tela permitem que o usuário pule direto para áreas específicas. As tags semânticas criam esses marcos automaticamente:
1. <header>: Topo da página (Logo, Busca). Ou topo de um artigo.
2. <nav>: Links de navegação principal.
3. <main>: O conteúdo principal. Só pode haver um visível. É onde o usuário quer chegar.
4. <section>: Uma área temática. Geralmente deve ter um título (h2-h6). Ex: Seção "Depoimentos", Seção "Serviços".
5. <article>: Conteúdo independente/autônomo. Se você arrancar esse pedaço e colar no WhatsApp, ele faz sentido sozinho? (Ex: Notícia, Post de Blog, Comentário, Card de Produto).
6. <aside>: Conteúdo tangencial/relacionado. Barra lateral, propaganda, "Veja também", Biografia do autor.
7. <footer>: Rodapé. Copyright, Mapa do site.
O Algoritmo de Outline
Embora navegadores não gerem mais um sumário automático (como prometido no início do HTML5), manter a hierarquia correta (h1 -> section -> h2) é vital para o Google entender a estrutura do seu texto.
Exercícios Práticos - Capítulo 8
1. Análise: Abra um site de notícias (CNN, BBC). Tente desenhar no papel onde estão o <header>, <nav>, <main> e <aside>.
2. Refatoração: Pegue o código do Exercício 1 (Capítulo 1) e substitua as divs genéricas por tags semânticas apropriadas.
3. Blog Roll: Crie uma estrutura de listagem de blog: Um <main> contendo 3 <article>, cada um com seu <h2>, <p> de resumo e link "Ler mais".
Capítulo 9: Acessibilidade Web (a11y) e Inclusão
Acessibilidade não é uma "feature" extra. É um direito humano. A Web deve funcionar para cegos, daltônicos, pessoas com deficiência motora (Parkinson, tetraplegia) e cognitiva.
Princípios WCAG (Diretrizes de Acessibilidade)
1. Perceptível: Informação não pode ser invisível para os sentidos do usuário (ex: vídeo sem legenda é invisível para surdos).
2. Operável: Interface utilizável (ex: site que só funciona com mouse é inoperável para quem usa teclado ou controle de cabeça).
4. Robusto: Compatível com tecnologias assistivas atuais e futuras.
WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)
Quando o HTML nativo não basta (ex: criar um componente complexo de abas/tabs que não
existe no HTML), usamos ARIA para "explicar" o componente ao leitor de tela.
● role: O que eu sou? (role="alert", role="dialog").
● aria-label: Meu nome invisível (ex: botão com ícone 'X' precisa de aria-label="Fechar").
● aria-hidden="true": Me ignore (para ícones decorativos).
● aria-live: Me anuncie se eu mudar (para notificações dinâmicas).
Regra nº 1 do ARIA: Não use ARIA. Use HTML nativo sempre que possível. Um <button> é sempre melhor que um <div role="button">.
Foco e Teclado
Muitos usuários navegam usando a tecla TAB.
● Outline: Aquela borda azul/preta ao redor do input. Nunca remova (outline: none) via CSS a menos que substitua por outra borda visível de alto contraste.
● Ordem de Tabulação: O HTML deve ser escrito na ordem lógica de leitura.
Exercícios Práticos - Capítulo 9
1. Navegação por Teclado: Abra seu projeto final. Tente navegar por ele inteiramente usando apenas TAB e ENTER. Você consegue acessar todos os links e formulários? Você sabe onde está o foco?
2. Auditoria: Instale a extensão "Axe DevTools" no Chrome ou use o "Lighthouse" (F12 -> Lighthouse). Rode uma auditoria no seu site e tente corrigir os erros de acessibilidade apontados.
3. Botão de Ícone: Crie um botão que contenha apenas um ícone (emoji ou svg) e use aria-label para torná-lo acessível.
Capítulo 10: SEO Técnico e Metadados
SEO (Search Engine Optimization) é a arte de falar a língua dos robôs de busca (Google, Bing).
A Tag <head> em Profundidade
● Title Tag: <title>. O fator mais forte de ranqueamento on-page. Deve ser único, ter entre 50-60 caracteres e conter a palavra-chave no início.
● Meta Description: O texto cinza nos resultados do Google. Não afeta ranking direto, mas afeta drasticamente o CTR (Taxa de Clique). Deve ser um "call to action" vendedor.
● Canonical Tag: <link rel="canonical" href="...">. Evita punição por conteúdo duplicado. Diz ao Google: "Esta é a versão original e oficial desta página".
● Robots: <meta name="robots" content="index, follow">. Diz: "Google, pode ler esta página e seguir os links dela". Ou noindex (para áreas privadas).
SEO Social (Open Graph e Twitter Cards)
Controle como seu link aparece no WhatsApp, Facebook e Twitter. Sem isso, a rede social escolhe uma imagem aleatória do seu site.
O pequeno ícone na aba. Gera confiança. <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/icon.svg" type="image/svg+xml">
Exercícios Práticos - Capítulo 10
1. Snippet Simulator: Pesquise por "Google SERP Simulator". Escreva um Título e Descrição para seu portfólio e veja se cortam (ficam com ...). Ajuste até ficar perfeito.
2. Implementação: Adicione as tags Open Graph no seu index.html. Use uma imagem qualquer da internet como teste.
3. Favicon: Desenhe um ícone simples no Paint, salve como PNG e coloque no seu site.
Capítulo 11: APIs Modernas do HTML5
O HTML5 transformou o navegador em uma plataforma de aplicativos, dando acesso ao hardware.
Web Storage
Substituto moderno dos Cookies para armazenar dados no navegador.
1. localStorage: Persistente. Os dados ficam lá para sempre (até limpar cache). Útil para salvar Tema Escuro/Claro, Carrinho de Compras abandonado.
2. sessionStorage: Volátil. Os dados somem ao fechar a aba. Útil para dados sensíveis de sessão bancária ou formulários multi-etapas.
Exemplo (Console do Navegador): localStorage.setItem('usuario', 'Maria'); localStorage.getItem('usuario'); // Retorna "Maria"
Nota: Por segurança, só funciona em sites HTTPS (com cadeado).
Drag and Drop (Arrastar e Soltar)
API nativa para criar interfaces como o Trello ou upload de arquivos do Gmail (arrastar do desktop para o navegador). Envolve eventos como ondragover e ondrop.
Exercícios Práticos - Capítulo 11
1. Tema Noturno (Lógica): (Requer JS básico) Crie um botão que salva tema="escuro" no localStorage. Ao recarregar a página, o JS deve ler isso e aplicar um fundo preto no body.
2. Onde estou?: Crie um botão "Minha Localização" que, ao clicar, exibe um alert com a latitude e longitude do usuário.
Capítulo 12: Projeto Final: Portfólio Profissional Completo
Vamos aplicar tudo em um projeto real. Este será seu cartão de visitas.
Planejamento
1. Objetivo: Apresentar seus projetos e oferecer contato.
2. Público: Recrutadores e Clientes.
3. Estrutura:
○ Hero: Foto profissional, Nome, Cargo, Link para GitHub/LinkedIn.
○ Sobre: Pequena bio.
○ Skills: Lista de tecnologias (HTML, CSS, Git).
○ Projetos: Cards com print, título, descrição e link.
○ Contato: Formulário funcional (usaremos um serviço como Formspree para não precisar de backend).
Desenvolvimento Passo a Passo
(O código abaixo é um esqueleto. O aluno deve preencher e expandir)
2. Estilo: Crie um arquivo style.css simples para dar cores e centralizar o conteúdo (mesmo
que o foco seja HTML, um pouco de CSS é necessário para o portfólio).
3. Formulário Real: Crie uma conta gratuita no formspree.io, pegue sua URL de ação e coloque no form. Teste enviar um e-mail para si mesmo através do site.
Capítulo 13: Boas Práticas, Ferramentas e Carreira
O HTML é o primeiro passo de uma longa jornada.
Validação Constante
Código com erro funciona? Às vezes. Mas é imprevisível. Habitue-se a usar o validador da W3C. Código válido é código profissional.
O Editor de Código (IDE)
Use o VS Code
● Extensões recomendadas:
○ Live Server: Atualiza o navegador ao salvar.
○ Prettier: Formata (indenta) o código automaticamente.
○ Auto Rename Tag: Renomeia tag de fechamento se você mudar a de abertura.
Hospedagem Gratuita
Como colocar seu site no ar?
1. GitHub Pages: Gratuito, direto do seu repositório.
2. Vercel / Netlify: Arraste a pasta do seu site e ele gera um link seusite.vercel.app em segundos.
2. JavaScript: Lógica de programação, manipulação do DOM, eventos.
3. Git: Controle de versão (salvar o histórico do código).
4. Acessibilidade (WCAG): Torne-se um especialista nisso, é um diferencial enorme no mercado.
Glossário Técnico
● a11y: Numerônimo para "Accessibility" (há 11 letras entre o 'A' e o 'y'). Refere-se ao conjunto de práticas para tornar a web inclusiva.
● API (Application Programming Interface): Interface que permite a comunicação entre softwares. No HTML5, refere-se a ferramentas como Geolocalização e Web Storage.
● Backend: A parte "invisível" do software que roda no servidor, lidando com banco de dados, lógica de negócios e autenticação.
● Browser (Navegador): Software usado para acessar a web (ex: Chrome, Firefox, Edge, Safari). Ele interpreta o HTML e renderiza a interface visual.
● CMS (Content Management System): Sistemas como WordPress ou Drupal que permitem gerenciar conteúdo sem escrever HTML manualmente.
● CSS (Cascading Style Sheets): Linguagem de estilo usada para controlar a aparência
(cores, layout, fontes) de documentos HTML.
● DNS (Domain Name System): O sistema que traduz nomes de domínio legíveis (ex: https://www.google.com/search?q=google.com) em endereços IP numéricos.
● Doctype: Declaração no início do arquivo HTML que instrui o navegador sobre qual versão da linguagem está sendo usada.
● DOM (Document Object Model): A representação em árvore da estrutura de um documento HTML na memória do navegador, que pode ser manipulada por JavaScript.
● Frontend: A parte da aplicação web que roda no navegador do usuário (HTML, CSS, JavaScript).
● Full Stack: Desenvolvedor que trabalha tanto no Frontend quanto no Backend.
● HTTP/HTTPS: Protocolo de Transferência de Hipertexto. O 'S' indica uma conexão segura e criptografada (SSL/TLS).
● IP (Internet Protocol): Endereço numérico único que identifica cada dispositivo na internet.
● Landmark: Regiões semânticas da página (header, main, footer) que ajudam usuários de leitores de tela a navegar.
● Metadados: Dados sobre os dados. No HTML, ficam na tag <head> e descrevem o título, autor, descrição e codificação da página.
● Responsive Design: Abordagem de design que garante que o site se adapte fluidamente a diferentes tamanhos de tela (celulares, tablets, desktops).
● SEO (Search Engine Optimization): Conjunto de técnicas para melhorar o posicionamento de um site em resultados de busca orgânica (ex: Google).
● Tag: Os marcadores cercados por < e > que instruem o navegador sobre como estruturar o conteúdo.
● UI (User Interface): A interface visual com a qual o usuário interage.
● UX (User Experience): A experiência geral e emocional do usuário ao utilizar o produto.
● W3C (World Wide Web Consortium): A comunidade internacional que desenvolve os padrões abertos para a Web.
Parabéns por chegar ao final deste guia! Você percorreu um longo caminho, desde os conceitos mais básicos da estruturação web até a construção de um portfólio profissional, passando por tópicos avançados como APIs de navegador, acessibilidade (a11y) e SEO técnico.
O conhecimento que você adquiriu aqui é uma base sólida para construir qualquer tipo de interface web moderna com HTML5. O mundo do desenvolvimento Front-end está em constante evolução. A chave para o sucesso é a curiosidade e o aprendizado contínuo. Explore a documentação oficial da MDN Web Docs e da W3C, participe de comunidades online e, o mais importante, continue construindo. Cada projeto é uma nova oportunidade de aprender e aprimorar suas habilidades.
Desejamos a você todo o sucesso em seus futuros projetos.
