📖 Guia Completo: HTML Fundamentals

<tagname>conteúdo</tagname>

<tagname atributo="valor">conteúdo</tagname>
    ↑         ↑        ↑        ↑
    1         2        3        4

<p>Este é um parágrafo simples.</p>
↑                               ↑
Tag de abertura                Tag de fechamento

<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<p>Um parágrafo de texto.</p>
<span>Texto em linha</span>
<strong>Texto importante</strong>
<em>Texto enfatizado</em>

<a href="https://google.com" target="_blank">Clique aqui</a>
↑  ↑                         ↑              ↑            ↑
|  |                         |              |            |
|  Atributo 1                Atributo 2     Conteúdo     Tag de fechamento
Tag de abertura

<!-- Links com destino -->
<a href="https://google.com">Google</a>
<a href="mailto:contato@site.com">E-mail</a>
<a href="#secao">Link interno</a>

<!-- Imagens com informações -->
<img src="foto.jpg" alt="Descrição da foto">
<img src="logo.png" alt="Logo da empresa" width="200">

<!-- Inputs de formulário -->
<input type="text" placeholder="Digite seu nome">
<input type="email" required>

<!-- Elementos com classes CSS -->
<div class="container">Conteúdo</div>
<p class="destaque">Parágrafo destacado</p>

<article class="post" data-id="123">
    <header>
        <h2 class="titulo">Título do Artigo</h2>
        <time datetime="2025-01-15">15 de Janeiro, 2025</time>
    </header>
    <section class="conteudo">
        <p>Este é o <em>primeiro parágrafo</em> do artigo.</p>
        <img src="imagem.jpg" alt="Imagem do artigo" width="300">
        <p>Este é o segundo parágrafo com um <a href="#link">link interno</a>.</p>
    </section>
</article>

article (Nível 1 - Container principal)
├── class="post" (Atributo para CSS)
├── data-id="123" (Atributo customizado)
│
├── header (Nível 2 - Cabeçalho do artigo)
│   ├── h2 (Nível 3 - Título)
│   │   └── class="titulo" (Atributo)
│   └── time (Nível 3 - Data)
│       └── datetime="2025-01-15" (Atributo semântico)
│
└── section (Nível 2 - Conteúdo principal)
    ├── class="conteudo" (Atributo)
    ├── p (Nível 3 - Primeiro parágrafo)
    │   └── em (Nível 4 - Ênfase dentro do texto)
    ├── img (Nível 3 - Imagem com múltiplos atributos)
    └── p (Nível 3 - Segundo parágrafo)
        └── a (Nível 4 - Link dentro do texto)

<div class="produto-card" data-produto-id="SKU123">
    <figure class="produto-imagem">
        <img src="smartphone.jpg" 
             alt="Smartphone Galaxy S25 na cor azul" 
             loading="lazy"
             width="300" 
             height="300">
        <figcaption class="sr-only">Imagem do produto</figcaption>
    </figure>
    
    <div class="produto-info">
        <h3 class="produto-nome">Smartphone Galaxy S25</h3>
        <div class="produto-preco">
            <span class="preco-original">R$ 1.299,00</span>
            <span class="preco-desconto">R$ 999,00</span>
        </div>
        <ul class="produto-caracteristicas">
            <li>128GB de armazenamento</li>
            <li>Câmera 50MP</li>
            <li>Tela 6.5"</li>
        </ul>
        <button type="button" 
                class="btn btn-comprar" 
                data-action="adicionar-carrinho">
            Adicionar ao Carrinho
        </button>
    </div>
</div>

Nível 1: Tags Simples
    ↓ (Domine primeiro)
Nível 2: Adicione Atributos
    ↓ (Pratique bastante)
Nível 3: Combine com Aninhamento
    ↓ (Desenvolva lógica)
Nível 4: Crie Estruturas Reais

<div class="container">
    <h1 id="titulo">Bem-vindo</h1>
    <p>Este é um <strong>texto importante</strong> no parágrafo.</p>
</div>

<div class="container">              ← Elemento PAI (nível 1)
    ↓
    <h1 id="titulo">Bem-vindo</h1>    ← Elemento FILHO (nível 2)
    ↓
    <p>Este é um <strong>texto importante</strong> no parágrafo.</p>
    ↑                ↑                ↑
    |                |                |
    |                FILHO do <p>     |
    |                (nível 3)        |
    |                                 |
    FILHO do <div> (nível 2)         |
                                     |
                    Texto do <p> (nível 2)
</div>                              ← Fechamento do PAI

<div class="caixa">                    ← Nível 1: Container principal
    <p>Texto do parágrafo</p>          ← Nível 2: Conteúdo
</div>

<div class="card">                     ← Nível 1: Container do card
    <h2>Título do Card</h2>            ← Nível 2: Título
    <p>Este é um <em>texto</em> no parágrafo.</p>  ← Nível 2: Parágrafo
                  ↑                                ← Nível 3: Ênfase
</div>

<section class="produto">              ← Nível 1: Seção do produto
    <div class="produto-info">         ← Nível 2: Container de informações
        <h3 class="nome">Smartphone</h3>  ← Nível 3: Nome do produto
        <div class="preco-container">  ← Nível 3: Container do preço
            <span class="moeda">R$</span>     ← Nível 4: Símbolo da moeda
            <span class="valor">899</span>    ← Nível 4: Valor
        </div>
        <p class="descricao">Este smartphone possui <strong>128GB</strong> de armazenamento.</p>
                                      ↑                   ↑
                                      Nível 3: Parágrafo  Nível 4: Destaque
    </div>
</section>

<div>          ← 1ª tag aberta
    <p>        ← 2ª tag aberta  
        <strong>texto</strong>  ← 3ª aberta, 1ª fechada ✅
    </p>       ← 2ª fechada ✅
</div>         ← 1ª fechada ✅

<div class="container">
    <header class="cabecalho">
        <h1 class="titulo">Meu Site</h1>
        <nav class="menu">
            <ul class="lista">
                <li class="item"><a href="#home">Início</a></li>
                <li class="item"><a href="#about">Sobre</a></li>
            </ul>
        </nav>
    </header>
</div>

Análise da ordem de fechamento:

Abertura: div → header → h1 → nav → ul → li → a
Fechamento: a → li → ul → nav → header → div ✅

Erro 1 - Tags cruzadas:

<div>
    <p>
        <strong>Texto importante
    </p>
</strong>  ← ERRO: strong deveria fechar antes do p
</div>

Erro 2 - Tag não fechada:

<div>
    <p>Parágrafo sem fechamento
    <span>Outro elemento</span>
</div>  ← ERRO: p não foi fechado

Boa prática - Indentação clara:

<main class="conteudo-principal">                    ← 0 espaços (base)
    <section class="introducao">                     ← 4 espaços (nível 1)
        <h2 class="titulo-secao">Introdução</h2>     ← 8 espaços (nível 2)
        <p class="paragrafo">                        ← 8 espaços (nível 2)
            Este é um parágrafo com                  ← 12 espaços (nível 3)
            <strong class="destaque">texto importante</strong>
            para demonstrar aninhamento.
        </p>
        <div class="imagem-container">               ← 8 espaços (nível 2)
            <img src="exemplo.jpg"                   ← 12 espaços (nível 3)
                 alt="Exemplo de imagem"
                 class="imagem-responsiva">
            <figcaption class="legenda">             ← 12 espaços (nível 3)
                Legenda da imagem
            </figcaption>
        </div>
    </section>
</main>

<article class="post" data-id="123">
    <header>
        <h2 class="titulo">Título do Artigo</h2>
        <time datetime="2025-01-15">15 de Janeiro, 2025</time>
    </header>
    <section class="conteudo">
        <p>Este é o <em>primeiro parágrafo</em> do artigo.</p>
        <img src="imagem.jpg" alt="Imagem do artigo" width="300">
        <p>Este é o segundo parágrafo com um <a href="#link">link interno</a>.</p>
    </section>
</article>

Exemplos de Aninhamento:

<!-- ✅ CORRETO: Aninhamento adequado -->
<div>
    <p>
        <strong>Texto em negrito</strong>
    </p>
</div>

<!-- ❌ ERRADO: Aninhamento incorreto -->
<div>
    <p>
        <strong>Texto em negrito
    </p>
</strong>  <!-- Tag strong fechada fora do p -->
</div>

<!-- ✅ CORRETO -->
<div>          <!-- Block element -->
    <p>        <!-- Block element dentro de block -->
        <strong>Texto</strong>  <!-- Inline dentro de block -->
    </p>
</div>

<!-- ❌ ERRADO -->
<strong>       <!-- Inline element -->
    <div>      <!-- Block dentro de inline - INVÁLIDO -->
        Texto
    </div>
</strong>

<img src="foto.jpg" 
     alt="Descrição da foto" 
     width="300" 
     height="200" 
     loading="lazy"
     class="imagem-responsiva">

<img src="imagem.jpg" alt="Descrição">
<br>
<hr>
<input type="text">

Exemplos práticos do porquê:

<!-- ❌ ERRADO: Tentar fechar uma tag auto-fechável -->
<img src="foto.jpg" alt="Foto"></img>  <!-- Inválido! -->
<br></br>                              <!-- Inválido! -->

<!-- ✅ CORRETO: Tags auto-fecháveis -->
<img src="foto.jpg" alt="Foto">       <!-- Válido -->
<br>                                   <!-- Válido -->

<!-- Para comparação, tags que TÊM conteúdo: -->
<p>Este parágrafo TEM conteúdo interno</p>  <!-- Precisa fechar -->
<div>Esta div TEM conteúdo dentro</div>     <!-- Precisa fechar -->

<img src="imagem.jpg" alt="Descrição">

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título da Página</title>
</head>
<body>
    <h1>Olá, Mundo!</h1>
    <p>Este é meu primeiro parágrafo.</p>
</body>
</html>

<head>
    <!-- Obrigatório: Define codificação de caracteres -->
    <meta charset="UTF-8">
    
    <!-- Obrigatório: Configuração para dispositivos móveis -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Obrigatório: Título que aparece na aba do navegador -->
    <title>Minha Página Web</title>
    
    <!-- Recomendado: Descrição para motores de busca -->
    <meta name="description" content="Descrição da página">
    
    <!-- Opcional: Link para folha de estilo -->
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <!-- Cabeçalho da página -->
    <header>
        <h1>Título Principal</h1>
        <nav>Menu de navegação</nav>
    </header>
    
    <!-- Conteúdo principal -->
    <main>
        <section>
            <h2>Seção de conteúdo</h2>
            <p>Parágrafo com texto.</p>
        </section>
    </main>
    
    <!-- Rodapé da página -->
    <footer>
        <p>© 2025 Meu Site</p>
    </footer>
</body>

<h1>Título Principal</h1>        <!-- Mais importante - Tópico da página -->
<h2>Título Secundário</h2>       <!-- Seções principais -->
<h3>Subtítulo</h3>               <!-- Subseções -->
<h4>Título de Quarto Nível</h4>  <!-- Sub-subseções -->
<h5>Título de Quinto Nível</h5>  <!-- Divisões menores -->
<h6>Título Menor</h6>            <!-- Menos importante - Detalhes -->

<p>Este é um parágrafo normal que contém texto corrido e forma a base do conteúdo textual de uma página web.</p>

<!-- IMPORTÂNCIA FORTE - Conteúdo crítico -->
<p><strong>AVISO IMPORTANTE:</strong> O prazo para inscrições termina hoje!</p>

<!-- ÊNFASE - Destaque natural na fala -->
<p>Você <em>realmente</em> precisa ver este produto incrível.</p>

<!-- DESTAQUE CONTEXTUAL - Como marcador amarelo -->
<p>Resultado da busca: <mark>desenvolvimento web</mark> encontrado em 5 artigos.</p>

<!-- CONTEÚDO REMOVIDO - Texto deletado/tachado -->
<p><del>Preço original: R$ 299,99</del></p>

<!-- CONTEÚDO INSERIDO - Texto adicionado -->
<p><ins>Preço promocional: R$ 199,99</ins></p>

<!-- CITAÇÕES E REFERÊNCIAS -->
<p>Como disse Einstein: <q>A imaginação é mais importante que o conhecimento.</q></p>

<!-- ABREVIAÇÕES E ACRÔNIMOS -->
<p>Aprenda <abbr title="HyperText Markup Language">HTML</abbr> rapidamente!</p>

<!-- CÓDIGO INLINE -->
<p>Use a propriedade <code>display: flex</code> para layouts flexíveis.</p>

<!-- NEGRITO VISUAL - Sem significado semântico -->
<p>A <b>palavra-chave</b> deve se destacar visualmente.</p>

<!-- ITÁLICO VISUAL - Sem significado semântico -->
<p>Nome científico: <i>Homo sapiens</i></p>

<!-- FÓRMULAS QUÍMICAS -->
<p>A água tem fórmula molecular H<sub>2</sub>O.</p>
<p>O gás carbônico é representado por CO<sub>2</sub>.</p>

<!-- EXPRESSÕES MATEMÁTICAS -->
<p>A teoria da relatividade: E=mc<sup>2</sup></p>
<p>Área do círculo: A=πr<sup>2</sup></p>

<!-- QUEBRA DE LINHA DENTRO DO MESMO PARÁGRAFO -->
<address>
    João Silva<br>
    Rua das Flores, 123<br>
    São Paulo - SP<br>
    CEP: 01234-567
</address>

<!-- SEPARADOR TEMÁTICO -->
<hr>

<ul>
    <li>HTML - Estrutura semântica</li>
    <li>CSS - Estilização e layout</li>
    <li>JavaScript - Interatividade</li>
</ul>

<ol>
    <li>Abrir o arquivo HTML</li>
    <li>Editar o conteúdo necessário</li>
    <li>Salvar as alterações</li>
    <li>Visualizar no navegador</li>
</ol>

<!-- TIPOS DE NUMERAÇÃO -->
<ol type="1"><li>Números (1, 2, 3...)</li></ol>
<ol type="A"><li>Letras maiúsculas (A, B, C...)</li></ol>
<ol type="a"><li>Letras minúsculas (a, b, c...)</li></ol>
<ol type="I"><li>Romanos maiúsculos (I, II, III...)</li></ol>
<ol type="i"><li>Romanos minúsculos (i, ii, iii...)</li></ol>

<!-- COMEÇAR DE UM NÚMERO ESPECÍFICO -->
<ol start="5">
    <li>Quinto item (será numerado como 5)</li>
    <li>Sexto item (será numerado como 6)</li>
</ol>

<!-- ORDEM REVERSA -->
<ol reversed>
    <li>Último item (3)</li>
    <li>Penúltimo item (2)</li>
    <li>Primeiro item (1)</li>
</ol>

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - Linguagem de marcação para estruturar conteúdo web</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets - Linguagem para estilizar páginas web</dd>
    <dd>Controla layout, cores, tipografia e responsividade</dd>
    
    <dt>JavaScript</dt>
    <dd>Linguagem de programação interpretada</dd>
    <dd>Adiciona interatividade e funcionalidades dinâmicas</dd>
</dl>

<!-- ESTRUTURA COMPLETA: -->
<a href="https://exemplo.com/produto" 
   target="_blank" 
   rel="noopener noreferrer"
   title="Ver detalhes do produto (abre em nova aba)"
   aria-label="Produto XYZ - Ver especificações completas">
    Produto XYZ 🔗
</a>

<!-- BREAKDOWN dos componentes: -->
<!-- href: Destino do link (obrigatório) -->
<!-- target: Como abrir (opcional) -->
<!-- rel: Relacionamento e segurança (recomendado para links externos) -->
<!-- title: Informação adicional no hover (opcional) -->
<!-- aria-label: Descrição para leitores de tela (quando necessário) -->

<!-- 1. _self (PADRÃO) - Mesma aba/janela -->
<a href="/pagina-interna.html" target="_self">
    Página Interna (mesma aba)
</a>
<!-- Uso: Links dentro do mesmo site, navegação normal -->

<!-- 2. _blank - Nova aba/janela -->
<a href="https://google.com" target="_blank" rel="noopener noreferrer">
    Google (nova aba)
</a>
<!-- Uso: Links externos, preservar contexto atual -->

<!-- 3. _parent - Frame pai (escape de iframe) -->
<a href="/pagina-principal.html" target="_parent">
    Voltar ao Site Principal
</a>
<!-- Uso: Dentro de iframes, sair para o frame pai -->

<!-- 4. _top - Janela principal (escape total) -->
<a href="/home.html" target="_top">
    Ir para Home (janela principal)
</a>
<!-- Uso: Escape completo de estruturas de frames aninhados -->

<!-- 5. Nome customizado - Janela específica -->
<a href="/popup-info.html" target="infoWindow">
    Abrir Informações
</a>
<a href="/popup-help.html" target="infoWindow">
    Abrir Ajuda (reutiliza mesma janela)
</a>
<!-- Uso: Popups controlados, reutilização de janelas específicas -->

<!-- PROBLEMA DE SEGURANÇA: -->
<!-- Quando usamos target="_blank" sem rel="noopener", 
     a nova página pode acessar window.opener e potencialmente 
     redirecionar a página original para um site malicioso -->

<!-- SOLUÇÃO SEGURA: -->
<a href="https://site-externo.com" 
   target="_blank" 
   rel="noopener noreferrer">
    Link Seguro
</a>

<!-- EXPLICAÇÃO DOS ATRIBUTOS DE SEGURANÇA: -->
<!-- rel="noopener": Previne acesso ao window.opener -->
<!-- rel="noreferrer": Não envia informações de referência -->
<!-- rel="nofollow": Instrui buscadores a não seguir o link -->

<!-- LINK EXTERNO SEGURO (Recomendado) -->
<a href="https://github.com/usuario/projeto" 
   target="_blank" 
   rel="noopener noreferrer"
   aria-label="Ver projeto no GitHub (abre em nova aba)">
    📁 Projeto no GitHub
</a>

<!-- LINK PARA DOCUMENTAÇÃO -->
<a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML" 
   target="_blank" 
   rel="noopener"
   title="Documentação HTML da MDN">
    📚 Documentação HTML (MDN)
</a>

<!-- EMAIL COM ASSUNTO E CORPO PRÉ-DEFINIDOS -->
<a href="mailto:vendas@empresa.com?subject=Interesse em Orçamento&body=Olá,%0A%0AGostaria de solicitar um orçamento para...%0A%0AObrigado!">
    💰 Solicitar Orçamento
</a>

<!-- TELEFONE CLICÁVEL (Especialmente útil em mobile) -->
<a href="tel:+5511987654321">
    📞 (11) 98765-4321
</a>

<!-- WHATSAPP COM MENSAGEM PRÉ-DEFINIDA -->
<a href="https://wa.me/5511987654321?text=Olá!%20Gostaria%20de%20mais%20informações%20sobre%20seus%20produtos." 
   target="_blank" 
   rel="noopener"
   aria-label="Conversar no WhatsApp">
    💬 WhatsApp
</a>

<!-- DOWNLOAD COM NOME PERSONALIZADO -->
<a href="relatorio-vendas-2024.xlsx" 
   download="Relatorio_Vendas_Janeiro_2024.xlsx"
   title="Relatório de vendas - Janeiro 2024 (Excel, 1.2MB)">
    📊 Download Relatório (Excel, 1.2MB)
</a>

<!-- MULTIPLE DOWNLOADS -->
<div class="downloads">
    <h4>📦 Downloads Disponíveis</h4>
    <ul>
        <li>
            <a href="apresentacao.pptx" download>
                🎯 Apresentação do Produto (PowerPoint, 2.1MB)
            </a>
        </li>
        <li>
            <a href="especificacoes.pdf" download>
                📋 Especificações Técnicas (PDF, 800KB)
            </a>
        </li>
    </ul>
</div>

<!-- ✅ LINK ACESSÍVEL: Descritivo e claro -->
<a href="relatorio-anual-2024.pdf">
    📊 Relatório Anual 2024 (PDF, 2.5MB)
</a>

<!-- ❌ LINK INACESSÍVEL: Genérico e confuso -->
<a href="relatorio-anual-2024.pdf">Clique aqui</a>

<!-- ✅ LINK EXTERNO COM INDICAÇÃO VISUAL -->
<a href="https://github.com/usuario/projeto" 
   target="_blank" 
   rel="noopener"
   aria-label="Ver projeto no GitHub (abre em nova aba)">
    Projeto no GitHub
    <span aria-hidden="true">🔗</span>
    <span class="sr-only">(abre em nova aba)</span>
</a>

<!-- ✅ BREADCRUMB ACESSÍVEL -->
<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/">Início</a></li>
        <li><a href="/categoria">Eletrônicos</a></li>
        <li aria-current="page">iPhone 15 Pro</li>
    </ol>
</nav>

<!-- ESTRUTURA COMPLETA E OTIMIZADA: -->
<picture>
    <!-- Formato moderno para navegadores compatíveis -->
    <source srcset="produto-hero.avif" type="image/avif">
    <source srcset="produto-hero.webp" type="image/webp">
    
    <!-- Imagem padrão com todos os atributos essenciais -->
    <img src="produto-hero.jpg"
         alt="iPhone 15 Pro Max na cor titânio natural exibindo tela inicial com widgets personalizados"
         width="800"
         height="600"
         loading="lazy"
         decoding="async"
         fetchpriority="high"
         title="Clique para ver galeria completa">
</picture>

<!-- ✅ EXCELENTE: Específico, útil e conciso -->
<img src="produto-iphone.jpg" 
     alt="iPhone 15 Pro na cor azul titânio com tela de 6.1 polegadas">

<img src="grafico-crescimento.png" 
     alt="Gráfico de linhas: receita cresceu de R$ 2M para R$ 3.5M entre 2023-2024">

<!-- ❌ RUIM: Genérico e inútil -->
<img src="foto1.jpg" alt="foto">
<img src="imagem.png" alt="imagem">

<!-- ❌ RUIM: Redundante -->
<img src="logo.svg" alt="Imagem do logotipo da empresa">

<!-- ✅ EXCELENTE: Imagem decorativa -->
<img src="background-pattern.svg" alt="" role="presentation">

<!-- Imagem decorativa -->
<img src="divisor.svg" alt="" role="presentation">

<!-- Imagem com legenda -->
<figure>
    <img src="vendas.png" alt="Vendas cresceram 150% no trimestre">
    <figcaption>Gráfico detalhado do crescimento Q4/2024</figcaption>
</figure>

<!-- Imagem dentro de link -->
<a href="/produto/smartphone">
    <img src="smartphone.jpg" alt="Ver detalhes do Smartphone XYZ Pro">
</a>

<!-- Ícones funcionais -->
<img src="icone-carrinho.svg" alt="Carrinho de compras (3 itens)">
<img src="icone-download.svg" alt="Baixar catálogo PDF">

<!-- TÉCNICA 1: Element <picture> - Controle Total -->
<picture>
    <!-- Formato AVIF para navegadores modernos -->
    <source srcset="hero-mobile.avif" 
            media="(max-width: 600px)" 
            type="image/avif">
    
    <!-- Formato WebP para compatibilidade ampla -->
    <source srcset="hero-mobile.webp" 
            media="(max-width: 600px)" 
            type="image/webp">
    
    <!-- Desktop - máxima qualidade -->
    <source srcset="hero-desktop.avif" type="image/avif">
    <source srcset="hero-desktop.webp" type="image/webp">
    
    <!-- Fallback universal -->
    <img src="hero-desktop.jpg"
         alt="Equipe de desenvolvedores criando aplicativos inovadores"
         width="1200"
         height="800"
         loading="lazy">
</picture>

<!-- TÉCNICA 2: Atributo srcset - Densidade de Pixels -->
<img src="produto-base.jpg"
     srcset="produto-1x.jpg 1x,
             produto-2x.jpg 2x,
             produto-3x.jpg 3x"
     alt="Smartphone com câmera tripla de 108MP e design premium"
     width="400"
     height="300"
     loading="lazy">

<!-- IMAGEM CRÍTICA (Above the fold) - Carrega imediatamente -->
<img src="hero-banner.jpg"
     alt="Banner principal com chamada para ação"
     width="1200"
     height="600"
     loading="eager"
     fetchpriority="high"
     decoding="sync">

<!-- IMAGENS SECUNDÁRIAS - Lazy loading -->
<img src="produto-gallery-1.jpg"
     alt="Vista frontal do produto com detalhes da textura"
     width="400"
     height="300"
     loading="lazy"
     decoding="async">

<!-- FORMATOS MODERNOS com fallback -->
<picture>
    <source srcset="produto-hero.avif" type="image/avif">
    <source srcset="produto-hero.webp" type="image/webp">
    <img src="produto-hero.jpg"
         alt="Produto premium em ambiente elegante"
         width="800"
         height="600"
         loading="lazy">
</picture>

<table>
    <caption>Vendas por Trimestre 2024</caption>
    <thead>
        <tr>
            <th scope="col">Produto</th>
            <th scope="col">Q1</th>
            <th scope="col">Q2</th>
            <th scope="col">Q3</th>
            <th scope="col">Q4</th>
            <th scope="col">Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Smartphones</th>
            <td>1,200</td>
            <td>1,500</td>
            <td>1,800</td>
            <td>2,100</td>
            <td><strong>6,600</strong></td>
        </tr>
        <tr>
            <th scope="row">Laptops</th>
            <td>800</td>
            <td>950</td>
            <td>1,100</td>
            <td>1,300</td>
            <td><strong>4,150</strong></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Total Geral</th>
            <td><strong>2,000</strong></td>
            <td><strong>2,450</strong></td>
            <td><strong>2,900</strong></td>
            <td><strong>3,400</strong></td>
            <td><strong>10,750</strong></td>
        </tr>
    </tfoot>
</table>

<!-- CABEÇALHO/HEADER -->
<header class="header">
    <div class="container">
        <!-- Logo/Nome do site -->
        <div class="logo">
            <h1>MeuSite</h1>
        </div>
        
        <!-- Menu de navegação -->
        <nav class="nav">
            <ul class="nav-list">
                <li class="nav-item"><a href="#home" class="nav-link">Início</a></li>
                <li class="nav-item"><a href="#about" class="nav-link">Sobre</a></li>
                <li class="nav-item"><a href="#services" class="nav-link">Serviços</a></li>
                <li class="nav-item"><a href="#contact" class="nav-link">Contato</a></li>
            </ul>
        </nav>
    </div>
</header>

<!-- CONTEÚDO PRINCIPAL -->
<main>
    <!-- SEÇÃO HERO (Banner principal) -->
    <section id="home" class="hero">
        <div class="hero-content">
            <h1 class="hero-title">Bem-vindo ao Nosso Site</h1>
            <p class="hero-subtitle">Criando experiências digitais incríveis</p>
            <button class="btn btn-primary">Saiba Mais</button>
        </div>
    </section>
</main>

<form action="/processar" method="POST">
    <fieldset>
        <legend>Informações Pessoais</legend>
        
        <div class="form-group">
            <label for="nome">Nome:</label>
            <input type="text" id="nome" name="nome" required>
        </div>
        
        <div class="form-group">
            <label for="email">E-mail:</label>
            <input type="email" id="email" name="email" required>
        </div>
        
        <button type="submit">Enviar</button>
    </fieldset>
</form>

<!-- Texto -->
<input type="text" placeholder="Digite seu nome">

<!-- E-mail (com validação) -->
<input type="email" placeholder="email@exemplo.com">

<!-- Senha -->
<input type="password" placeholder="Sua senha">

<!-- Número -->
<input type="number" min="0" max="100" step="1">

<!-- Data -->
<input type="date">

<!-- Checkbox -->
<input type="checkbox" id="aceito" name="aceito">
<label for="aceito">Aceito os termos</label>

<!-- Radio buttons -->
<input type="radio" id="masc" name="genero" value="masculino">
<label for="masc">Masculino</label>

<div class="contact-form">
    <form>
        <div class="form-group">
            <label for="name">Nome</label>
            <input type="text" id="name" name="name" required>
        </div>
        
        <div class="form-group">
            <label for="email">E-mail</label>
            <input type="email" id="email" name="email" required>
        </div>
        
        <div class="form-group">
            <label for="message">Mensagem</label>
            <textarea id="message" name="message" rows="5" required></textarea>
        </div>
        
        <button type="submit" class="btn btn-primary">Enviar Mensagem</button>
    </form>
</div>

<!-- 📰 TITLE TAG: O link azul clicável -->
<title>Como Aprender HTML em 2025 | Guia Completo para Iniciantes</title>

<!-- 📝 META DESCRIPTION: O texto cinza descritivo -->
<meta name="description" content="Aprenda HTML do zero com exemplos práticos. Mais de 100 exercícios, projetos reais e certificação gratuita. Comece hoje mesmo!">

<!-- 🔗 URL CANÔNICA: O endereço exibido -->
<link rel="canonical" href="https://seusite.com/guia-html-completo">

<!-- ⭐ RICH SNIPPETS: Informações extras -->
<meta name="robots" content="index, follow, max-snippet:160, max-image-preview:large">

<!-- 📏 CONTROLE DO SNIPPET (texto exibido) -->
<meta name="robots" content="index, follow, max-snippet:160"> <!-- ~160 caracteres -->
<meta name="robots" content="index, follow, max-snippet:300"> <!-- Snippet expandido -->
<meta name="robots" content="index, follow, max-snippet:-1">  <!-- Sem limite -->

<!-- 🖼️ CONTROLE DE IMAGENS na SERP -->
<meta name="robots" content="index, follow, max-image-preview:large">    <!-- Imagem grande -->
<meta name="robots" content="index, follow, max-image-preview:standard"> <!-- Imagem média -->
<meta name="robots" content="index, follow, max-image-preview:none">     <!-- Sem imagem -->

<!-- 🎥 CONTROLE DE VÍDEOS na SERP -->
<meta name="robots" content="index, follow, max-video-preview:30"> <!-- 30s preview -->
<meta name="robots" content="index, follow, max-video-preview:0">  <!-- Apenas thumbnail -->

<!-- ✅ INDEXAÇÃO -->

<!-- PADRÃO: Indexar e seguir todos os links -->
<meta name="robots" content="index, follow">

<!-- Indexar mas não seguir links externos -->
<meta name="robots" content="index, nofollow">

<!-- NÃO indexar mas seguir links para descobrir outras páginas -->
<meta name="robots" content="noindex, follow">

<!-- NÃO indexar e NÃO seguir links (página completamente bloqueada) -->
<meta name="robots" content="noindex, nofollow">

<!-- ✅ CONTROLE DE CACHE E ARQUIVO -->

<!-- Não armazenar versão em cache -->
<meta name="robots" content="index, follow, noarchive">

<!-- Não mostrar snippet nos resultados -->
<meta name="robots" content="index, follow, nosnippet">

<!-- Não traduzir a página automaticamente -->
<meta name="robots" content="index, follow, notranslate">

<!-- Não indexar imagens da página -->
<meta name="robots" content="index, follow, noimageindex">

<!-- Combinação completa de proteção -->
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">

<!-- ✅ CONTROLE DE EXIBIÇÃO NOS RESULTADOS -->

<!-- Snippet de texto limitado a 160 caracteres -->
<meta name="robots" content="index, follow, max-snippet:160">

<!-- Snippet mais longo para conteúdo detalhado -->
<meta name="robots" content="index, follow, max-snippet:300">

<!-- Sem limite de snippet (padrão do Google) -->
<meta name="robots" content="index, follow, max-snippet:-1">

<!-- Controle de preview de imagem -->
<meta name="robots" content="index, follow, max-image-preview:large">
<meta name="robots" content="index, follow, max-image-preview:standard">
<meta name="robots" content="index, follow, max-image-preview:none">

<!-- Controle de preview de vídeo (em segundos) -->
<meta name="robots" content="index, follow, max-video-preview:30">
<meta name="robots" content="index, follow, max-video-preview:-1"> <!-- Sem limite -->
<meta name="robots" content="index, follow, max-video-preview:0"> <!-- Sem preview -->

<!-- ✅ E-COMMERCE -->

<!-- Página de produto principal -->
<meta name="robots" content="index, follow, max-snippet:160, max-image-preview:large">

<!-- Páginas de filtros/ordenação -->
<meta name="robots" content="noindex, follow">

<!-- Páginas de carrinho/checkout -->
<meta name="robots" content="noindex, nofollow, noarchive">

<!-- ✅ BLOG/MÍDIA -->

<!-- Artigos principais -->
<meta name="robots" content="index, follow, max-snippet:300, max-image-preview:large">

<!-- Páginas de autor -->
<meta name="robots" content="index, follow, max-snippet:160">

<!-- Arquivos por data -->
<meta name="robots" content="noindex, follow">

<!-- ✅ SAAS/APLICAÇÃO WEB -->

<!-- Landing pages -->
<meta name="robots" content="index, follow, max-snippet:160, max-image-preview:large">

<!-- Documentação -->
<meta name="robots" content="index, follow, max-snippet:200">

<!-- Dashboard/área logada -->
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet">

<!-- ✅ PADRÃO para sites responsivos -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- ✅ CONTROLES avançados -->

<!-- Impedir zoom (cuidado com acessibilidade) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<!-- Controle de zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">

<!-- Para PWAs -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

<!-- ✅ CONFIGURAÇÃO COMPLETA para máximo engajamento -->

<!-- Informações básicas -->
<meta property="og:title" content="Guia HTML Completo 2025: Do Zero ao Profissional">
<meta property="og:description" content="Aprenda HTML com exemplos práticos, projetos reais e técnicas de profissionais. Mais de 100 templates e exercícios inclusos.">
<meta property="og:image" content="https://seusite.com/images/og-image-1200x630.jpg">
<meta property="og:url" content="https://seusite.com/guia-html-completo">
<meta property="og:type" content="article">
<meta property="og:site_name" content="DevMaster - Aprenda Programação">

<!-- Informações adicionais para artigos -->
<meta property="article:author" content="João Silva">
<meta property="article:published_time" content="2025-01-31T10:00:00Z">
<meta property="article:modified_time" content="2025-01-31T15:30:00Z">
<meta property="article:section" content="Desenvolvimento Web">
<meta property="article:tag" content="HTML">
<meta property="article:tag" content="CSS">

<!-- Localização e idioma -->
<meta property="og:locale" content="pt_BR">
<meta property="og:locale:alternate" content="en_US">

<!-- Especificações da imagem -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="Ilustração mostrando código HTML em um editor moderno">

<!-- ✅ SUMMARY CARD com imagem grande -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@devmaster">
<meta name="twitter:creator" content="@joaosilva_dev">
<meta name="twitter:title" content="Guia HTML Completo 2025: Do Zero ao Profissional">
<meta name="twitter:description" content="Aprenda HTML com exemplos práticos e projetos reais. Mais de 100 templates inclusos. Comece hoje mesmo!">
<meta name="twitter:image" content="https://seusite.com/images/twitter-card-1200x600.jpg">
<meta name="twitter:image:alt" content="Código HTML sendo escrito em editor moderno com destaque para elementos semânticos">

<!-- ✅ PLAYER CARD para vídeos -->
<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://seusite.com/player.html">
<meta name="twitter:player:width" content="1200">
<meta name="twitter:player:height" content="675">
<meta name="twitter:player:stream" content="https://seusite.com/video.mp4">

<!-- ✅ JSON-LD para artigos (preferido pelo Google) -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Guia HTML Completo 2025: Do Zero ao Profissional",
  "description": "Aprenda HTML com exemplos práticos, projetos reais e técnicas avançadas",
  "author": {
    "@type": "Person",
    "name": "João Silva",
    "url": "https://seusite.com/autor/joao-silva"
  },
  "publisher": {
    "@type": "Organization",
    "name": "DevMaster",
    "logo": {
      "@type": "ImageObject",
      "url": "https://seusite.com/logo.png"
    }
  },
  "datePublished": "2025-01-31T10:00:00Z",
  "dateModified": "2025-01-31T15:30:00Z",
  "image": "https://seusite.com/images/article-image.jpg",
  "mainEntityOfPage": "https://seusite.com/guia-html-completo"
}
</script>

<!-- ✅ CONJUNTO COMPLETO de favicons para todos os dispositivos -->

<!-- Favicon tradicional -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- Favicons PNG modernos -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">

<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

<!-- Android Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

<!-- Windows Metro -->
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

<!-- PWA Manifest -->
<link rel="manifest" href="/site.webmanifest">

<!-- Theme Color -->
<meta name="theme-color" content="#2d89ef">

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <!-- ✅ FUNDAÇÃO -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- ✅ SEO PRINCIPAL -->
    <title>Guia HTML Completo 2025: Do Zero ao Profissional | DevMaster</title>
    <meta name="description" content="Aprenda HTML com exemplos práticos, projetos reais e técnicas avançadas. Mais de 100 templates e exercícios inclusos. Comece hoje mesmo!">
    <meta name="keywords" content="HTML, CSS, JavaScript, desenvolvimento web, frontend, tutorial, curso">
    <meta name="author" content="João Silva">
    <meta name="robots" content="index, follow, max-snippet:160, max-image-preview:large">
    
    <!-- ✅ CANONICALIZAÇÃO -->
    <link rel="canonical" href="https://seusite.com/guia-html-completo">
    
    <!-- ✅ OPEN GRAPH -->
    <meta property="og:title" content="Guia HTML Completo 2025: Do Zero ao Profissional">
    <meta property="og:description" content="Aprenda HTML com exemplos práticos, projetos reais e técnicas avançadas.">
    <meta property="og:image" content="https://seusite.com/images/og-image-1200x630.jpg">
    <meta property="og:url" content="https://seusite.com/guia-html-completo">
    <meta property="og:type" content="article">
    <meta property="og:site_name" content="DevMaster">
    
    <!-- ✅ TWITTER -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@devmaster">
    <meta name="twitter:title" content="Guia HTML Completo 2025: Do Zero ao Profissional">
    <meta name="twitter:description" content="Aprenda HTML com exemplos práticos e projetos reais.">
    <meta name="twitter:image" content="https://seusite.com/images/twitter-card-1200x600.jpg">
    
    <!-- ✅ FAVICONS -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="manifest" href="/site.webmanifest">
    <meta name="theme-color" content="#2d89ef">
    
    <!-- ✅ PERFORMANCE -->
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preload" href="/css/critical.css" as="style">
    <link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
    
    <!-- ✅ CSS CRÍTICO INLINE -->
    <style>
        /* CSS crítico minificado aqui */
        body{font-family:system-ui;margin:0;line-height:1.6}
        .hero{min-height:100vh;display:flex;align-items:center;justify-content:center}
    </style>
</head>
<body>
    <!-- Conteúdo da página -->
</body>
</html>

<!-- ✅ Estrutura semântica com landmarks claros -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Loja Online - Produtos Sustentáveis</title>
</head>
<body>
    <!-- 🎯 Skip Links (primeiros elementos focáveis) -->
    <a href="#main-content" class="skip-link">Pular para conteúdo principal</a>
    <a href="#main-nav" class="skip-link">Pular para navegação</a>

    <!-- 🧭 Banner - Cabeçalho principal -->
    <header role="banner">
        <div class="logo">
            <img src="logo.svg" alt="EcoLoja - Produtos Sustentáveis">
        </div>
        
        <!-- 🔍 Busca -->
        <search role="search">
            <label for="busca">Buscar produtos:</label>
            <input type="search" id="busca" placeholder="Ex: camiseta orgânica">
            <button type="submit">Buscar</button>
        </search>
    </header>

    <!-- 🧭 Navegação Principal -->
    <nav id="main-nav" role="navigation" aria-label="Menu principal">
        <ul>
            <li><a href="/" aria-current="page">Início</a></li>
            <li><a href="/roupas">Roupas</a></li>
            <li><a href="/acessorios">Acessórios</a></li>
            <li><a href="/sobre">Sobre Nós</a></li>
        </ul>
    </nav>

    <!-- 📄 Conteúdo Principal -->
    <main id="main-content" role="main">
        <h1>Produtos em Destaque</h1>
        
        <section aria-labelledby="produtos-novos">
            <h2 id="produtos-novos">Novidades</h2>
            <!-- produtos aqui -->
        </section>
    </main>

    <!-- 📱 Sidebar Complementar -->
    <aside role="complementary" aria-labelledby="ofertas-titulo">
        <h2 id="ofertas-titulo">Ofertas Especiais</h2>
        <!-- ofertas aqui -->
    </aside>

    <!-- 🦶 Rodapé -->
    <footer role="contentinfo">
        <p>© 2025 EcoLoja. Todos os direitos reservados.</p>
    </footer>
</body>
</html>

<!-- 📑 Accordion/Collapse acessível -->
<div class="accordion">
    <h3>
        <button aria-expanded="false" 
                aria-controls="secao1-content"
                id="secao1-header">
            Informações de Entrega
        </button>
    </h3>
    <div id="secao1-content" 
         aria-labelledby="secao1-header"
         hidden>
        <p>Entregamos em todo o Brasil...</p>
    </div>
</div>

<!-- 📊 Tabs acessíveis -->
<div class="tabs" role="tablist" aria-label="Informações do produto">
    <button role="tab" 
            aria-selected="true" 
            aria-controls="tab1-panel"
            id="tab1">
        Descrição
    </button>
    <button role="tab" 
            aria-selected="false" 
            aria-controls="tab2-panel"
            id="tab2">
        Avaliações
    </button>
    
    <div role="tabpanel" 
         id="tab1-panel" 
         aria-labelledby="tab1">
        <p>Este produto é feito de algodão orgânico...</p>
    </div>
    
    <div role="tabpanel" 
         id="tab2-panel" 
         aria-labelledby="tab2" 
         hidden>
        <p>Avaliação média: 4.5 estrelas...</p>
    </div>
</div>

<!-- 🚨 Live Regions - Atualizações Dinâmicas -->
<div aria-live="polite" id="status-mensagem" class="sr-only"></div>
<div aria-live="assertive" id="erro-critico" class="sr-only"></div>

<script>
// ✅ Notificar leitor de tela sobre mudanças
function atualizarStatus(mensagem) {
    document.getElementById('status-mensagem').textContent = mensagem;
}

// Exemplo: Item adicionado ao carrinho
atualizarStatus('Produto adicionado ao carrinho. Total: R$ 129,90');
</script>

<!-- ✅ Formulário completo e acessível -->
<form novalidate>
    <fieldset>
        <legend>Informações Pessoais</legend>
        
        <!-- 📛 Campo obrigatório com indicação clara -->
        <div class="field-group">
            <label for="nome">
                Nome completo 
                <span aria-label="obrigatório">*</span>
            </label>
            <input type="text" 
                   id="nome" 
                   name="nome"
                   required
                   aria-describedby="nome-ajuda nome-erro"
                   aria-invalid="false">
            <div id="nome-ajuda" class="help-text">
                Digite seu nome como aparece no documento
            </div>
            <div id="nome-erro" class="error-message" aria-live="polite"></div>
        </div>

        <!-- 📧 Email com validação -->
        <div class="field-group">
            <label for="email">E-mail <span aria-label="obrigatório">*</span></label>
            <input type="email" 
                   id="email" 
                   name="email"
                   required
                   aria-describedby="email-formato"
                   autocomplete="email">
            <div id="email-formato" class="help-text">
                Formato: exemplo@dominio.com
            </div>
        </div>

        <!-- 🏠 Endereço com autocomplete -->
        <div class="field-group">
            <label for="cep">CEP</label>
            <input type="text" 
                   id="cep" 
                   name="cep"
                   pattern="[0-9]{5}-?[0-9]{3}"
                   placeholder="00000-000"
                   autocomplete="postal-code">
        </div>
    </fieldset>

    <!-- 📊 Grupo de radio buttons -->
    <fieldset>
        <legend>Como prefere receber novidades?</legend>
        <div class="radio-group">
            <input type="radio" id="email-news" name="contato" value="email">
            <label for="email-news">Por e-mail</label>
        </div>
        <div class="radio-group">
            <input type="radio" id="sms-news" name="contato" value="sms">
            <label for="sms-news">Por SMS</label>
        </div>
        <div class="radio-group">
            <input type="radio" id="sem-news" name="contato" value="nao" checked>
            <label for="sem-news">Não desejo receber</label>
        </div>
    </fieldset>

    <!-- ✅ Botão de envio claro -->
    <button type="submit" class="submit-button">
        Finalizar Cadastro
    </button>
</form>

/* ✅ Classes utilitárias para acessibilidade */

/* 👁️ Screen reader only - conteúdo apenas para leitores de tela */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 🔍 Skip links - links para pular seções */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
}

/* 🎯 Focus visível e acessível */
:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* 🚫 Apenas remover outline se houver alternativa visual */
.custom-focus:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);
}

/* ⚖️ Alto contraste mínimo (4.5:1 para texto normal) */
.text-primary {
    color: #1a365d; /* Azul escuro */
    background: #fff;
}

.text-secondary {
    color: #2d3748; /* Cinza escuro */
    background: #f7fafc;
}

/* 📱 Alvos de toque mínimos (44x44px) */
.touch-target {
    min-height: 44px;
    min-width: 44px;
    display: inline-block;
}

/* 🎭 Estados visuais claros */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.aria-expanded[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

/* ⚡ Respeitar preferências do usuário */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #e2e8f0;
        --bg-color: #1a202c;
    }
}

/* 🔊 Indicadores visuais para estados ARIA */
[aria-invalid="true"] {
    border-color: #e53e3e;
    box-shadow: 0 0 0 1px #e53e3e;
}

[aria-required="true"]::after {
    content: " *";
    color: #e53e3e;
}

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página Semântica Completa</title>
</head>
<body>
    <!-- Cabeçalho principal do site -->
    <header role="banner">
        <div class="logo">
            <h1><a href="/">Nome do Site</a></h1>
        </div>
        
        <!-- Navegação principal -->
        <nav role="navigation" aria-label="Navegação principal">
            <ul>
                <li><a href="/home" aria-current="page">Início</a></li>
                <li><a href="/sobre">Sobre</a></li>
                <li><a href="/servicos">Serviços</a></li>
                <li><a href="/contato">Contato</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- Conteúdo principal da página -->
    <main role="main">
        <section class="hero" aria-labelledby="hero-title">
            <h2 id="hero-title">Bem-vindo ao Nosso Site</h2>
            <p>Oferecemos as melhores soluções para sua empresa.</p>
            <a href="/servicos" class="cta-button">Conheça Nossos Serviços</a>
        </section>
        
        <section class="services" aria-labelledby="services-title">
            <h2 id="services-title">Nossos Serviços</h2>
            
            <article class="service-item">
                <h3>Desenvolvimento Web</h3>
                <p>Criamos sites modernos e responsivos...</p>
            </article>
        </section>
    </main>
    
    <!-- Barra lateral -->
    <aside role="complementary" aria-labelledby="sidebar-title">
        <h2 id="sidebar-title">Informações Adicionais</h2>
        
        <section class="newsletter">
            <h3>Newsletter</h3>
            <form>
                <label for="email">E-mail:</label>
                <input type="email" id="email" name="email" required>
                <button type="submit">Assinar</button>
            </form>
        </section>
    </aside>
    
    <!-- Rodapé -->
    <footer role="contentinfo">
        <div class="footer-content">
            <section class="contact-info">
                <h3>Contato</h3>
                <address>
                    Rua Exemplo, 123<br>
                    São Paulo, SP<br>
                    <a href="tel:+5511999999999">+55 11 99999-9999</a><br>
                    <a href="mailto:contato@exemplo.com">contato@exemplo.com</a>
                </address>
            </section>
        </div>
        
        <div class="copyright">
            <p>&copy; 2025 Nome da Empresa. Todos os direitos reservados.</p>
        </div>
    </footer>
</body>
</html>

<!-- ✅ CORRETO: Label explícito -->
<label for="nome-completo">Nome Completo:</label>
<input type="text" 
       id="nome-completo" 
       name="nome" 
       required 
       autocomplete="name"
       placeholder="Digite seu nome completo">

<!-- ✅ CORRETO: Label implícito -->
<label>
    E-mail:
    <input type="email" 
           name="email" 
           required 
           autocomplete="email"
           placeholder="seu@email.com">
</label>

<!-- ✅ CORRETO: Fieldset para grupos -->
<fieldset>
    <legend>Informações de Contato</legend>
    
    <label for="tel">Telefone:</label>
    <input type="tel" 
           id="tel" 
           name="telefone" 
           pattern="[0-9]{2}[0-9]{4,5}[0-9]{4}"
           title="Formato: 11999999999">
    
    <label for="cel">Celular:</label>
    <input type="tel" 
           id="cel" 
           name="celular" 
           required>
</fieldset>

<!-- ✅ CORRETO: Links externos seguros -->
<a href="https://exemplo.com" 
   target="_blank" 
   rel="noopener noreferrer"
   aria-describedby="external-link-info">
    Site Exemplo
</a>
<span id="external-link-info" class="sr-only">
    (abre em nova aba)
</span>

<!-- ✅ CORRETO: Links descritivos -->
<a href="/relatorio-anual-2024.pdf"
   download="Relatorio_Anual_2024.pdf"
   aria-describedby="pdf-info">
    Baixar Relatório Anual 2024
</a>
<span id="pdf-info" class="sr-only">
    (PDF, 2.5MB)
</span>

<table>
    <caption>
        Vendas por Região - 1º Trimestre 2025
        <small>(Valores em milhares de reais)</small>
    </caption>
    
    <thead>
        <tr>
            <th scope="col">Região</th>
            <th scope="col">Janeiro</th>
            <th scope="col">Fevereiro</th>
            <th scope="col">Março</th>
            <th scope="col">Total</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <th scope="row">Sudeste</th>
            <td>R$ 150</td>
            <td>R$ 180</td>
            <td>R$ 200</td>
            <td><strong>R$ 530</strong></td>
        </tr>
        <tr>
            <th scope="row">Sul</th>
            <td>R$ 120</td>
            <td>R$ 140</td>
            <td>R$ 160</td>
            <td><strong>R$ 420</strong></td>
        </tr>
    </tbody>
    
    <tfoot>
        <tr>
            <th scope="row">Total Geral</th>
            <td>R$ 270</td>
            <td>R$ 320</td>
            <td>R$ 360</td>
            <td><strong>R$ 950</strong></td>
        </tr>
    </tfoot>
</table>

<!-- ✅ ESTRATÉGIA COMPLETA: Formatos modernos + lazy loading -->
<picture>
    <!-- AVIF: 50% menor que JPEG -->
    <source srcset="hero-mobile.avif" 
            media="(max-width: 600px)" 
            type="image/avif">
    
    <!-- WebP: 25% menor que JPEG -->
    <source srcset="hero-mobile.webp" 
            media="(max-width: 600px)" 
            type="image/webp">
    
    <!-- JPEG fallback -->
    <source srcset="hero-mobile.jpg" 
            media="(max-width: 600px)">
    
    <!-- Desktop versions -->
    <source srcset="hero-desktop.avif" type="image/avif">
    <source srcset="hero-desktop.webp" type="image/webp">
    
    <img src="hero-desktop.jpg"
         alt="Equipe trabalhando em projetos inovadores"
         width="1200"
         height="600"
         loading="lazy"
         decoding="async">
</picture>

<head>
    <!-- DNS Prefetch: Resolve DNS antes de precisar -->
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <link rel="dns-prefetch" href="//api.exemplo.com">
    <link rel="dns-prefetch" href="//cdn.exemplo.com">
    
    <!-- Preconnect: Estabelece conexão completa -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Preload: Carrega recursos críticos prioritariamente -->
    <link rel="preload" 
          href="/fonts/inter-var.woff2" 
          as="font" 
          type="font/woff2" 
          crossorigin>
    
    <link rel="preload" 
          href="/css/critical.css" 
          as="style">
    
    <!-- Prefetch: Carrega recursos para próximas páginas -->
    <link rel="prefetch" href="/css/non-critical.css">
    <link rel="prefetch" href="/js/analytics.js">
    
    <!-- Modulepreload: Para módulos ES6 -->
    <link rel="modulepreload" href="/js/modules/main.js">
</head>

<!-- Performance monitoring com Web Vitals -->
<script>
    // Largest Contentful Paint (LCP)
    new PerformanceObserver((list) => {
        const entries = list.getEntries();
        const lastEntry = entries[entries.length - 1];
        console.log('LCP:', lastEntry.startTime);
        // Objetivo: < 2.5s
    }).observe({entryTypes: ['largest-contentful-paint']});
    
    // First Input Delay (FID)
    new PerformanceObserver((list) => {
        const entries = list.getEntries();
        entries.forEach(entry => {
            console.log('FID:', entry.processingStart - entry.startTime);
            // Objetivo: < 100ms
        });
    }).observe({entryTypes: ['first-input']});
    
    // Cumulative Layout Shift (CLS)
    let clsValue = 0;
    new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
            if (!entry.hadRecentInput) {
                clsValue += entry.value;
            }
        }
        console.log('CLS:', clsValue);
        // Objetivo: < 0.1
    }).observe({entryTypes: ['layout-shift']});
</script>

<!-- 🛒 Card de Produto: E-commerce Completo -->
<article class="produto-card" itemscope itemtype="https://schema.org/Product">
    <!-- 🖼️ Imagem com múltiplas otimizações -->
    <figure class="produto-imagem">
        <picture>
            <!-- WebP para navegadores modernos (melhor compressão) -->
            <source srcset="smartphone-300.webp 300w, 
                           smartphone-600.webp 600w,
                           smartphone-900.webp 900w" 
                   type="image/webp">
            
            <!-- Fallback JPEG para navegadores antigos -->
            <img src="smartphone-600.jpg" 
                 srcset="smartphone-300.jpg 300w,
                        smartphone-600.jpg 600w, 
                        smartphone-900.jpg 900w"
                 sizes="(max-width: 768px) 100vw, 
                       (max-width: 1024px) 50vw, 
                       33vw"
                 alt="iPhone 15 Pro Max em titânio natural, tela de 6.7 polegadas, exibindo a tela inicial com aplicativos organizados"
                 loading="lazy"
                 decoding="async"
                 itemprop="image">
        </picture>
        
        <!-- 🏷️ Badge de desconto (apenas se houver) -->
        <div class="produto-badge" aria-label="Desconto de 15%">
            <span class="badge-texto">-15%</span>
        </div>
    </figure>
    
    <!-- 📝 Informações do produto -->
    <div class="produto-info">
        <!-- 🏷️ Categoria e marca -->
        <div class="produto-meta">
            <span class="categoria" itemprop="category">Smartphones</span>
            <span class="marca" itemprop="brand" itemscope itemtype="https://schema.org/Brand">
                <span itemprop="name">Apple</span>
            </span>
        </div>
        
        <!-- 📱 Nome do produto -->
        <h3 class="produto-titulo" itemprop="name">
            <a href="/produto/iphone-15-pro-max" 
               aria-describedby="produto-1-descricao produto-1-preco">
                iPhone 15 Pro Max 256GB Titânio Natural
            </a>
        </h3>
        
        <!-- ⭐ Avaliações -->
        <div class="produto-rating" itemprop="aggregateRating" 
             itemscope itemtype="https://schema.org/AggregateRating">
            <div class="estrelas" aria-label="4.8 de 5 estrelas">
                <span class="estrela ativa" aria-hidden="true">★</span>
                <span class="estrela ativa" aria-hidden="true">★</span>
                <span class="estrela ativa" aria-hidden="true">★</span>
                <span class="estrela ativa" aria-hidden="true">★</span>
                <span class="estrela parcial" aria-hidden="true">★</span>
            </div>
            <span class="rating-numero">
                <span itemprop="ratingValue">4.8</span>
                (<span itemprop="reviewCount">1.247</span> avaliações)
            </span>
        </div>
        
        <!-- 💰 Preços -->
        <div class="produto-precos" id="produto-1-preco">
            <div class="preco-antigo" aria-label="Preço anterior">
                <s>R$ 8.999,00</s>
            </div>
            <div class="preco-atual" itemprop="offers" 
                 itemscope itemtype="https://schema.org/Offer">
                <span class="sr-only">Preço atual:</span>
                <data value="7649.00" itemprop="price">R$ 7.649,00</data>
                <meta itemprop="priceCurrency" content="BRL">
                <meta itemprop="availability" content="https://schema.org/InStock">
            </div>
            <div class="economia">
                Economia de <strong>R$ 1.350,00</strong>
            </div>
        </div>
        
        <!-- 📋 Descrição resumida -->
        <p class="produto-descricao" id="produto-1-descricao" itemprop="description">
            Smartphone premium com chip A17 Pro, sistema de câmera Pro tripla e tela Super Retina XDR de 6,7". 
            Construção em titânio para máxima durabilidade.
        </p>
        
        <!-- 🚀 Características principais -->
        <ul class="produto-features">
            <li>📱 Tela 6.7" Super Retina XDR</li>
            <li>💾 256GB de armazenamento</li>
            <li>📸 Sistema Pro de câmeras</li>
            <li>🔋 Bateria para até 29h de vídeo</li>
        </ul>
        
        <!-- 🛒 Ações do produto -->
        <div class="produto-acoes">
            <button type="button" 
                    class="btn-carrinho"
                    aria-describedby="produto-1-info"
                    data-produto-id="iphone-15-pro-max-256gb">
                🛒 Adicionar ao Carrinho
            </button>
            
            <button type="button" 
                    class="btn-favorito"
                    aria-label="Adicionar aos favoritos: iPhone 15 Pro Max"
                    aria-pressed="false">
                🤍
            </button>
            
            <button type="button" 
                    class="btn-comparar"
                    aria-label="Adicionar à comparação">
                ⚖️ Comparar
            </button>
        </div>
        
        <!-- 📦 Informações de entrega -->
        <div class="produto-entrega">
            <div class="entrega-item">
                <strong>🚚 Frete Grátis</strong> para todo o Brasil
            </div>
            <div class="entrega-item">
                <strong>⚡ Entrega expressa</strong> em até 24h*
            </div>
        </div>
        
        <!-- 🔇 Informação adicional apenas para leitores de tela -->
        <div id="produto-1-info" class="sr-only">
            iPhone 15 Pro Max 256GB Titânio Natural por R$ 7.649,00. 
            Avaliação 4.8 de 5 estrelas com 1.247 avaliações. 
            Frete grátis e entrega expressa disponível.
        </div>
    </div>
</article>

<!-- 📰 Artigo de Blog: SEO e Engajamento Otimizados -->
<article class="blog-post" 
         itemscope 
         itemtype="https://schema.org/BlogPosting">
    
    <!-- 🎨 Header do artigo -->
    <header class="post-header">
        <!-- 🏷️ Breadcrumb para navegação -->
        <nav aria-label="Navegação estrutural" class="breadcrumb">
            <ol>
                <li><a href="/">Início</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/blog/marketing-digital">Marketing Digital</a></li>
                <li aria-current="page">SEO em 2025</li>
            </ol>
        </nav>
        
        <!-- 📂 Categoria -->
        <div class="post-category">
            <a href="/blog/categoria/seo" 
               class="category-link" 
               itemprop="about">
                📊 SEO & Analytics
            </a>
        </div>
        
        <!-- 📰 Título principal -->
        <h1 class="post-title" itemprop="headline">
            Guia Completo de SEO em 2025: 15 Estratégias que Realmente Funcionam
        </h1>
        
        <!-- 📝 Subtítulo/descrição -->
        <p class="post-lead" itemprop="description">
            Descubra as técnicas de SEO mais eficazes para 2025, baseadas em dados reais 
            de mais de 10.000 sites analisados. Inclui checklist prático e ferramentas gratuitas.
        </p>
        
        <!-- 👨‍💼 Metadados do autor e artigo -->
        <div class="post-meta">
            <!-- 👤 Informações do autor -->
            <div class="author-info" 
                 itemprop="author" 
                 itemscope 
                 itemtype="https://schema.org/Person">
                <img src="/autores/maria-silva.jpg" 
                     alt="Foto de Maria Silva"
                     class="author-avatar"
                     itemprop="image">
                <div class="author-details">
                    <address class="author-name" rel="author">
                        Por <a href="/autor/maria-silva" 
                              itemprop="url">
                            <span itemprop="name">Maria Silva</span>
                        </a>
                    </address>
                    <div class="author-title" itemprop="jobTitle">
                        Especialista em SEO e Marketing Digital
                    </div>
                </div>
            </div>
            
            <!-- 📅 Data de publicação -->
            <div class="post-date">
                <time datetime="2025-01-31T09:00:00-03:00" 
                      itemprop="datePublished">
                    📅 31 de janeiro de 2025
                </time>
                <time datetime="2025-01-31T14:30:00-03:00" 
                      itemprop="dateModified" 
                      class="sr-only">
                    Atualizado em 31 de janeiro de 2025
                </time>
            </div>
            
            <!-- ⏱️ Tempo de leitura -->
            <div class="reading-time">
                <data value="12" itemprop="timeRequired">
                    ⏱️ 12 min de leitura
                </data>
            </div>
            
            <!-- 👀 Contador de visualizações -->
            <div class="post-views">
                <data value="15420">👀 15.420 visualizações</data>
            </div>
        </div>
        
        <!-- 🖼️ Imagem destacada -->
        <figure class="post-featured-image" itemprop="image">
            <picture>
                <source media="(max-width: 768px)" 
                       srcset="seo-2025-mobile.webp">
                <source media="(min-width: 769px)" 
                       srcset="seo-2025-desktop.webp">
                <img src="seo-2025-desktop.jpg"
                     alt="Gráfico mostrando evolução das técnicas de SEO de 2020 a 2025, destacando IA, Core Web Vitals e E-A-T"
                     loading="eager"
                     itemprop="url">
            </picture>
            <figcaption class="image-caption">
                Evolução das principais métricas de SEO nos últimos 5 anos. 
                <small>Fonte: Estudo SEMrush 2025</small>
            </figcaption>
        </figure>
    </header>
    
    <!-- 📑 Índice do artigo -->
    <nav class="table-of-contents" aria-labelledby="toc-title">
        <h2 id="toc-title">📑 Índice do Artigo</h2>
        <ol>
            <li><a href="#introducao">O que Mudou no SEO em 2025</a></li>
            <li><a href="#core-web-vitals">Core Web Vitals: A Nova Prioridade</a></li>
            <li><a href="#ia-seo">IA e SEO: Como se Adaptar</a></li>
            <li><a href="#estrategias-praticas">15 Estratégias Práticas</a></li>
            <li><a href="#ferramentas">Ferramentas Gratuitas Essenciais</a></li>
            <li><a href="#checklist">Checklist de Implementação</a></li>
        </ol>
    </nav>
    
    <!-- 📄 Conteúdo principal -->
    <div class="post-content" itemprop="articleBody">
        <!-- 🎯 Seção de introdução -->
        <section id="introducao">
            <h2>🚀 O que Mudou no SEO em 2025</h2>
            <p class="lead">
                O SEO em 2025 é fundamentalmente diferente do que conhecíamos. 
                Com a evolução da IA e as constantes atualizações do Google, 
                as estratégias que funcionavam há 2 anos podem estar prejudicando 
                seu site hoje.
            </p>
            
            <!-- 📊 Dados importantes destacados -->
            <div class="highlight-stats">
                <div class="stat-item">
                    <data value="75">75%</data>
                    <span>dos sites perderam tráfego com as últimas atualizações</span>
                </div>
                <div class="stat-item">
                    <data value="3.2">3.2s</data>
                    <span>é o novo limite para Core Web Vitals</span>
                </div>
                <div class="stat-item">
                    <data value="40">40%</data>
                    <span>das buscas agora usam IA generativa</span>
                </div>
            </div>
        </section>
        
        <!-- ⚡ Core Web Vitals -->
        <section id="core-web-vitals">
            <h2>⚡ Core Web Vitals: A Nova Prioridade</h2>
            <p>Performance não é mais opcional. É fator de ranking direto...</p>
            
            <!-- 📋 Lista de verificação -->
            <div class="checklist-box">
                <h3>✅ Checklist Core Web Vitals</h3>
                <ul class="task-list">
                    <li><input type="checkbox" disabled> LCP < 2.5s</li>
                    <li><input type="checkbox" disabled> FID < 100ms</li>
                    <li><input type="checkbox" disabled> CLS < 0.1</li>
                </ul>
            </div>
        </section>
    </div>
    
    <!-- 🏷️ Tags do artigo -->
    <footer class="post-footer">
        <div class="post-tags">
            <span class="tags-label">🏷️ Tags:</span>
            <a href="/tag/seo" class="tag" itemprop="keywords">SEO</a>
            <a href="/tag/marketing-digital" class="tag" itemprop="keywords">Marketing Digital</a>
            <a href="/tag/core-web-vitals" class="tag" itemprop="keywords">Core Web Vitals</a>
            <a href="/tag/google-2025" class="tag" itemprop="keywords">Google 2025</a>
        </div>
        
        <!-- 🔗 Compartilhamento social -->
        <div class="social-share">
            <span class="share-label">📤 Compartilhar:</span>
            <a href="https://twitter.com/intent/tweet?text=Guia+SEO+2025&url=..." 
               target="_blank" 
               rel="noopener"
               aria-label="Compartilhar no Twitter">
                🐦 Twitter
            </a>
            <a href="https://www.linkedin.com/sharing/share-offsite/?url=..." 
               target="_blank" 
               rel="noopener"
               aria-label="Compartilhar no LinkedIn">
                💼 LinkedIn
            </a>
        </div>
    </footer>
</article>

<!-- 📋 Formulário de Contato: Acessibilidade e UX Máximas -->
<section class="contact-section">
    <header class="section-header">
        <h2>📞 Entre em Contato</h2>
        <p class="section-description">
            Pronto para transformar suas ideias em realidade? 
            Nossa equipe responde em até 2 horas úteis.
        </p>
    </header>
    
    <!-- 📊 Estatísticas de confiança -->
    <div class="trust-indicators">
        <div class="trust-item">
            <strong>⚡ 2h</strong> tempo médio de resposta
        </div>
        <div class="trust-item">
            <strong>500+</strong> projetos entregues
        </div>
        <div class="trust-item">
            <strong>98%</strong> satisfação dos clientes
        </div>
    </div>
    
    <form class="contact-form" 
          action="/enviar-contato" 
          method="POST" 
          novalidate
          aria-labelledby="form-title">
        
        <!-- 🔒 Token de segurança (CSRF) -->
        <input type="hidden" name="csrf_token" value="abc123...">
        
        <!-- 🍯 Honey pot para detectar bots -->
        <div class="honey-pot" aria-hidden="true">
            <input type="text" 
                   name="website" 
                   tabindex="-1" 
                   autocomplete="off"
                   style="position:absolute;left:-9999px">
        </div>
        
        <fieldset class="form-section">
            <legend>📝 Suas Informações</legend>
            
            <!-- 👤 Nome completo -->
            <div class="field-group">
                <label for="nome" class="field-label">
                    Nome completo 
                    <span class="required-indicator" aria-label="obrigatório">*</span>
                </label>
                <input type="text" 
                       id="nome" 
                       name="nome"
                       class="field-input"
                       required
                       autocomplete="name"
                       aria-describedby="nome-help nome-error"
                       aria-invalid="false"
                       minlength="2"
                       maxlength="100">
                <div id="nome-help" class="field-help">
                    💡 Como você gostaria de ser chamado?
                </div>
                <div id="nome-error" 
                     class="field-error" 
                     role="alert" 
                     aria-live="polite"></div>
            </div>
            
            <!-- 📧 E-mail -->
            <div class="field-group">
                <label for="email" class="field-label">
                    E-mail 
                    <span class="required-indicator" aria-label="obrigatório">*</span>
                </label>
                <input type="email" 
                       id="email" 
                       name="email"
                       class="field-input"
                       required
                       autocomplete="email"
                       aria-describedby="email-help email-error"
                       aria-invalid="false">
                <div id="email-help" class="field-help">
                    📬 Usaremos para enviar a resposta
                </div>
                <div id="email-error" 
                     class="field-error" 
                     role="alert" 
                     aria-live="polite"></div>
            </div>
            
            <!-- 📱 Telefone (opcional) -->
            <div class="field-group">
                <label for="telefone" class="field-label">
                    Telefone 
                    <span class="optional-indicator">(opcional)</span>
                </label>
                <input type="tel" 
                       id="telefone" 
                       name="telefone"
                       class="field-input"
                       autocomplete="tel"
                       aria-describedby="telefone-help"
                       placeholder="(11) 99999-9999"
                       pattern="[0-9\s\(\)\-\+]+">
                <div id="telefone-help" class="field-help">
                    📞 Para contato mais rápido (WhatsApp disponível)
                </div>
            </div>
        </fieldset>
        
        <fieldset class="form-section">
            <legend>🎯 Seu Projeto</legend>
            
            <!-- 🏷️ Tipo de projeto -->
            <div class="field-group">
                <label for="tipo-projeto" class="field-label">
                    Tipo de projeto
                    <span class="required-indicator" aria-label="obrigatório">*</span>
                </label>
                <select id="tipo-projeto" 
                        name="tipo_projeto"
                        class="field-select"
                        required
                        aria-describedby="tipo-help">
                    <option value="">Selecione uma opção</option>
                    <option value="site-institucional">🏢 Site Institucional</option>
                    <option value="e-commerce">🛒 E-commerce</option>
                    <option value="aplicativo">📱 Aplicativo Mobile</option>
                    <option value="consultoria">💡 Consultoria</option>
                    <option value="outros">🎯 Outros</option>
                </select>
                <div id="tipo-help" class="field-help">
                    🎯 Isso nos ajuda a entender melhor suas necessidades
                </div>
            </div>
            
            <!-- 💰 Orçamento aproximado -->
            <fieldset class="field-group">
                <legend class="field-label">
                    💰 Orçamento aproximado
                    <span class="optional-indicator">(opcional)</span>
                </legend>
                <div class="radio-group">
                    <input type="radio" 
                           id="orcamento-5k" 
                           name="orcamento" 
                           value="ate-5k">
                    <label for="orcamento-5k">Até R$ 5.000</label>
                </div>
                <div class="radio-group">
                    <input type="radio" 
                           id="orcamento-10k" 
                           name="orcamento" 
                           value="5k-10k">
                    <label for="orcamento-10k">R$ 5.000 - R$ 10.000</label>
                </div>
                <div class="radio-group">
                    <input type="radio" 
                           id="orcamento-20k" 
                           name="orcamento" 
                           value="10k-20k">
                    <label for="orcamento-20k">R$ 10.000 - R$ 20.000</label>
                </div>
                <div class="radio-group">
                    <input type="radio" 
                           id="orcamento-mais" 
                           name="orcamento" 
                           value="mais-20k">
                    <label for="orcamento-mais">Acima de R$ 20.000</label>
                </div>
                <div class="field-help">
                    💡 Isso nos ajuda a preparar uma proposta adequada
                </div>
            </fieldset>
            
            <!-- 📝 Mensagem detalhada -->
            <div class="field-group">
                <label for="mensagem" class="field-label">
                    Conte-nos sobre seu projeto
                    <span class="required-indicator" aria-label="obrigatório">*</span>
                </label>
                <textarea id="mensagem" 
                          name="mensagem"
                          class="field-textarea"
                          required
                          rows="6"
                          minlength="20"
                          maxlength="1000"
                          aria-describedby="mensagem-help mensagem-counter"
                          placeholder="Descreva seu projeto, objetivos, prazos, referências ou qualquer informação que considere importante..."></textarea>
                <div id="mensagem-help" class="field-help">
                    💭 Quanto mais detalhes, melhor poderemos ajudar
                </div>
                <div id="mensagem-counter" class="character-counter">
                    <span id="current-chars">0</span>/1000 caracteres
                </div>
            </div>
        </fieldset>
        
        <!-- ✅ Consentimentos e política -->
        <fieldset class="form-section">
            <legend>🔒 Privacidade e Consentimento</legend>
            
            <div class="checkbox-group">
                <input type="checkbox" 
                       id="aceito-termos" 
                       name="aceito_termos"
                       required
                       aria-describedby="termos-help">
                <label for="aceito-termos">
                    Li e aceito os 
                    <a href="/termos-de-uso" target="_blank" rel="noopener">
                        termos de uso
                    </a> 
                    e a 
                    <a href="/politica-privacidade" target="_blank" rel="noopener">
                        política de privacidade
                    </a>
                    <span class="required-indicator" aria-label="obrigatório">*</span>
                </label>
                <div id="termos-help" class="field-help">
                    🔒 Seus dados estão protegidos pela LGPD
                </div>
            </div>
            
            <div class="checkbox-group">
                <input type="checkbox" 
                       id="aceito-newsletter" 
                       name="aceito_newsletter">
                <label for="aceito-newsletter">
                    Quero receber dicas e novidades por e-mail
                    <span class="optional-indicator">(opcional)</span>
                </label>
            </div>
        </fieldset>
        
        <!-- 🚀 Botão de envio -->
        <div class="form-actions">
            <button type="submit" 
                    class="submit-button"
                    id="submit-btn">
                <span class="btn-text">🚀 Enviar Projeto</span>
                <span class="btn-loading" hidden>⏳ Enviando...</span>
            </button>
            
            <div class="submit-help">
                ⚡ Responderemos em até 2 horas úteis
            </div>
        </div>
        
        <!-- 📊 Status de envio -->
        <div id="form-status" 
             class="form-status" 
             role="status" 
             aria-live="polite"></div>
    </form>
</section>

<!-- 🧭 Navegação Principal: Desktop + Mobile + Acessibilidade -->
<header class="site-header" role="banner">
    <div class="header-container">
        <!-- 🏠 Logo/Brand -->
        <div class="brand">
            <a href="/" class="brand-link" aria-label="TechCorp - Página inicial">
                <img src="/logo.svg" 
                     alt="TechCorp"
                     class="brand-logo"
                     width="120" 
                     height="40">
            </a>
        </div>
        
        <!-- 🧭 Navegação Principal -->
        <nav class="main-nav" 
             role="navigation" 
             aria-label="Menu principal">
            
            <!-- 📱 Botão do menu mobile -->
            <button type="button" 
                    class="nav-toggle"
                    aria-controls="nav-menu"
                    aria-expanded="false"
                    aria-label="Abrir menu de navegação">
                <span class="hamburger">
                    <span class="hamburger-line"></span>
                    <span class="hamburger-line"></span>
                    <span class="hamburger-line"></span>
                </span>
                <span class="nav-toggle-text">Menu</span>
            </button>
            
            <!-- 📋 Lista de navegação -->
            <ul class="nav-menu" id="nav-menu">
                <li class="nav-item">
                    <a href="/" 
                       class="nav-link" 
                       aria-current="page">
                        🏠 Início
                    </a>
                </li>
                
                <!-- 📂 Dropdown com submenu -->
                <li class="nav-item has-dropdown">
                    <button type="button" 
                            class="nav-link dropdown-toggle"
                            aria-expanded="false"
                            aria-controls="services-menu">
                        💼 Serviços
                        <span class="dropdown-icon" aria-hidden="true">▼</span>
                    </button>
                    
                    <ul class="dropdown-menu" 
                        id="services-menu"
                        aria-labelledby="services-toggle">
                        <li>
                            <a href="/desenvolvimento" class="dropdown-link">
                                💻 Desenvolvimento Web
                            </a>
                        </li>
                        <li>
                            <a href="/design" class="dropdown-link">
                                🎨 Design UX/UI
                            </a>
                        </li>
                        <li>
                            <a href="/consultoria" class="dropdown-link">
                                📊 Consultoria Digital
                            </a>
                        </li>
                    </ul>
                </li>
                
                <li class="nav-item">
                    <a href="/portfolio" class="nav-link">
                        🎯 Portfólio
                    </a>
                </li>
                
                <li class="nav-item">
                    <a href="/blog" class="nav-link">
                        📰 Blog
                    </a>
                </li>
                
                <li class="nav-item">
                    <a href="/contato" class="nav-link">
                        📞 Contato
                    </a>
                </li>
            </ul>
        </nav>
        
        <!-- 🔍 Busca -->
        <div class="header-search">
            <form role="search" class="search-form">
                <label for="search-input" class="sr-only">
                    Buscar no site
                </label>
                <input type="search" 
                       id="search-input"
                       class="search-input"
                       placeholder="Buscar..."
                       aria-describedby="search-help">
                <button type="submit" 
                        class="search-button"
                        aria-label="Executar busca">
                    🔍
                </button>
                <div id="search-help" class="sr-only">
                    Digite sua busca e pressione Enter
                </div>
            </form>
        </div>
        
        <!-- 🎯 Call-to-action -->
        <div class="header-cta">
            <a href="/orcamento" 
               class="cta-button">
                🚀 Solicitar Orçamento
            </a>
        </div>
    </div>
</header>