Gerando HTML5 Estruturado, Semântico e Acessível — aula do módulo Landing Page Moderna do Zero, na trilha Seus Primeiros Projetos Práticos com IA da formação…
Leitura de aproximadamente 5 minutos.
Módulo: Landing Page Moderna do Zero · Curso: Seus Primeiros Projetos Práticos com IA · Formação: Formação Nível Zero: Ferramentas Essenciais e Gratuitas de IA e Código
index.html limpo.O HTML (Linguagem de Marcação de Hipertexto, do inglês HyperText Markup Language) não é uma linguagem de programação com cálculos ou tomada de decisões lógicas; é uma linguagem de marcação que define o significado e a hierarquia do conteúdo.
Pense na construção de uma casa:
Quando a estrutura de HTML é bem construída, a página funciona mesmo que os estilos visuais falhem, e qualquer leitor de tela para pessoas com deficiência visual consegue interpretar o conteúdo sem barreiras.
Nas primeiras versões da web, desenvolvedores utilizavam a tag genérica <div> (divisão genérica) para qualquer elemento visual. Isso gerava um código confuso e ilegível, conhecido como "sopa de divs".
O HTML5 introduziu tags semânticas, ou seja, tags cujo próprio nome descreve o propósito do conteúdo para navegadores, robôs do Google e assistentes de voz:
+-------------------------------------------------------------+
| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> (Metadados, título na aba, links para CSS) |
| </head> |
| <body> |
| <header> (Cabeçalho com logo e navegação <nav>) |
| </header> |
| <main> (Conteúdo principal exclusivo da página) |
| <section id="hero"> (Seção de destaque) |
| <section id="beneficios"> (Grade de benefícios) |
| <section id="faq"> (Perguntas frequentes) |
| </main> |
| <footer> (Rodapé com direitos autorais e contatos) |
| </footer> |
| </body> |
| </html> |
+-------------------------------------------------------------+
A tabela abaixo ilustra a diferença entre estruturar pelo significado e estruturar sem critério:
| Elemento | Estrutura Ruim (Genérica) | Estrutura Semântica (HTML5 Recomendada) | Efeito Prático | |---|---|---|---| | Cabeçalho | <div class="topo"> | <header> | Navegadores identificam a área de navegação imediatamente | | Menu de Links | <div class="menu"> | <nav> | Leitores de tela anunciam que há um menu de navegação | | Bloco Principal | <div class="conteudo"> | <main> | Ferramentas de busca sabem qual é o conteúdo central da página | | Seção Temática | <div class="bloco-1"> | <section id="beneficios"> | Organização clara por tópicos e âncoras de rolagem | | Rodapé | <div class="fim"> | <footer> | Separação formal das informações institucionais |
Ao gerar o HTML com o suporte de uma Inteligência Artificial, é fundamental instruí-la a seguir três regras inegociáveis de qualidade:
1. Hierarquia Única de Títulos: Cada página deve ter rigorosamente apenas um único elemento <h1> (o título principal da proposta de valor). Os títulos das seções seguintes devem usar <h2>, e os subtópicos dentro delas devem usar <h3>. 2. Textos Alternativos em Imagens (alt): Toda tag <img> deve conter o atributo alt descrevendo o conteúdo da imagem (exemplo: alt="Gráfico demonstrando aumento de produtividade"). Se a imagem for puramente decorativa, use alt="". 3. Formulários e Botões Acessíveis: Botões devem usar a tag <button> e links para outras páginas ou seções devem usar a tag <a>. Nunca use uma <div> clicável no lugar de um botão nativo.
Com o wireframe textual da aula anterior em mãos, você pode solicitar a geração do HTML semântico com instruções cirúrgicas para a IA:
Atue como desenvolvedor frontend especialista em HTML5 e acessibilidade.
Com base no wireframe textual que planejamos, gere o arquivo index.html completo.
Siga rigorosamente estas regras técnicas:
1. Use HTML5 semântico (<header>, <nav>, <main>, <section>, <footer>).
2. Apenas 1 tag <h1> na seção Hero; use <h2> para os títulos das demais seções.
3. Não inclua estilos CSS inline (nada de style="...") e nem JavaScript inline.
4. Inclua o link para a folha de estilos externa no cabeçalho: <link rel="stylesheet" href="style.css">.
5. Deixe IDs claros em cada seção (ex: id="hero", id="beneficios", id="faq") para futura navegação por âncoras.
6. Todos os textos devem ser em Português do Brasil com doctype <!DOCTYPE html> e <html lang="pt-BR">.
Entregue o código completo dentro de um bloco de código markdown único.
[!WARNING]
Misturar CSS dentro do arquivo HTML: A IA frequentemente tenta embutir regras de estilo usando a tag<style>dentro do<head>ou inserindo atributosstyle="..."em cada tag. Isso viola o princípio da separação de responsabilidades e torna qualquer alteração visual no futuro um pesadelo. Exija sempre que os estilos fiquem exclusivamente no arquivostyle.css.
Vamos criar e visualizar seu arquivo HTML no computador:
1. Crie a pasta do projeto: No seu terminal ou explorador de arquivos, crie uma pasta chamada meu-site. 2. Crie o arquivo index.html: Abra a pasta no seu editor (Antigravity IDE ou VS Code) e crie um arquivo chamado index.html. 3. Cole o HTML gerado: Copie o código HTML gerado e aprovado com a IA e salve o arquivo. 4. Abra no navegador: Dê um duplo clique no arquivo index.html ou arraste-o para uma aba aberta do Google Chrome ou Microsoft Edge. 5. Verifique a estrutura: Note como todos os títulos, listas e botões aparecem de forma ordenada, mesmo antes de aplicarmos as cores e o design visual com o CSS.