📝 Texto e Formatação

<!-- 🎯 ELEMENTOS SEMÂNTICOS: Significado primeiro, aparência depois -->

<!-- 📢 ÊNFASE (em): Altera o significado da frase -->
<p>
    Você <em>deve</em> validar seu HTML antes de publicar.
    <!-- 💡 Leitores de tela enfatizam a pronuncia de "deve" -->
</p>

<p>
    Não confunda <em>ênfase</em> com <em>estresse emocional</em> - 
    use com moderação para palavras que realmente alteram o sentido.
</p>

<!-- 🚨 IMPORTÂNCIA (strong): Conteúdo crítico -->
<p>
    <strong>Atenção:</strong> Backup seus arquivos antes de atualizar o sistema.
    <!-- 💡 Screen readers anunciam com tom mais grave/urgente -->
</p>

<p>
    Para senhas seguras: <strong>sempre use 12+ caracteres</strong> 
    com letras, números e símbolos especiais.
</p>

<!-- 🎨 TEXTO MARCADO (mark): Relevância contextual -->
<article>
    <h3>Resultados da Busca por "HTML semântico"</h3>
    <p>
        O <mark>HTML semântico</mark> melhora a acessibilidade e o SEO. 
        Elementos como <mark>semântico</mark> ajudam na interpretação 
        automatizada do conteúdo.
    </p>
    <!-- 💡 mark destaca termos relevantes ao contexto atual -->
</article>

<!-- 📝 TEXTO PEQUENO (small): Informações secundárias -->
<article>
    <h2>Curso de HTML Avançado</h2>
    <p>Aprenda HTML5, semântica e acessibilidade...</p>
    <p><small>
        📅 Última atualização: 15 de janeiro de 2024 | 
        👨‍🏫 Instrutor: João Silva | 
        ⏱️ 40 horas de conteúdo
    </small></p>
</article>

<footer>
    <p><small>
        © 2024 WebEducação. Todos os direitos reservados. 
        Este material está licenciado sob Creative Commons.
    </small></p>
</footer>

<!-- ✏️ EDIÇÕES E REVISÕES -->
<article>
    <h3>Política de Preços - Atualizada</h3>
    <p>
        Curso individual: <del datetime="2024-01-10">R$ 297</del> 
        <ins datetime="2024-01-15">R$ 197</ins> (promoção limitada)
    </p>
    <p>
        <del>Acesso por 6 meses</del> 
        <ins>Acesso vitalício incluído</ins> em todas as compras.
    </p>
</article>

<!-- 🔬 SUBSCRITO E SOBRESCRITO: Fórmulas e notações -->
<div class="formulas-quimicas">
    <h4>Fórmulas Químicas Essenciais:</h4>
    <ul>
        <li>Água: H<sub>2</sub>O</li>
        <li>Gás carbônico: CO<sub>2</sub></li>
        <li>Sal comum: NaCl</li>
    </ul>
</div>

<div class="formulas-matematicas">
    <h4>Fórmulas e Potências:</h4>
    <ul>
        <li>Einstein: E = mc<sup>2</sup></li>
        <li>Área do círculo: A = πr<sup>2</sup></li>
        <li>10<sup>3</sup> = 1.000</li>
    </ul>
</div>

<!-- 📖 ABREVIAÇÕES (abbr): Expandindo siglas e acrônimos -->
<article>
    <h3>Tecnologias Web Modernas</h3>
    <p>
        O <abbr title="HyperText Markup Language versão 5">HTML5</abbr> 
        trabalha junto com <abbr title="Cascading Style Sheets versão 3">CSS3</abbr> 
        e <abbr title="Application Programming Interface">APIs</abbr> modernas 
        para criar experiências web ricas.
    </p>
    
    <p>
        Ferramentas como <abbr title="Node Package Manager">npm</abbr>, 
        <abbr title="Syntactically Awesome StyleSheets">Sass</abbr> e 
        <abbr title="Content Delivery Network">CDN</abbr> são essenciais 
        no desenvolvimento moderno.
    </p>
</article>

<!-- 🏷️ DEFINIÇÕES (dfn): Primeira ocorrência de termos -->
<section>
    <h3>Glossário de Desenvolvimento Web</h3>
    <p>
        <dfn id="semantic-html">HTML Semântico</dfn> é uma abordagem 
        que usa elementos HTML baseados no significado do conteúdo, 
        não em sua aparência visual.
    </p>
    
    <p>
        Um <dfn>framework</dfn> é uma estrutura de software que fornece 
        fundações e diretrizes para desenvolvimento de aplicações.
    </p>
    
    <p>
        Já falamos sobre <a href="#semantic-html">HTML Semântico</a> 
        anteriormente neste glossário.
    </p>
</section>

<!-- 🏠 ENDEREÇOS (address): Informações de contato contextuais -->
<article>
    <h2>Workshop de HTML Avançado</h2>
    <p>Participe do nosso workshop presencial...</p>
    
    <!-- 📍 Endereço relacionado ao evento -->
    <address>
        📍 <strong>Local:</strong><br>
        Centro de Convenções TechHub<br>
        Av. Paulista, 1337 - 8º andar<br>
        São Paulo - SP, 01311-200<br>
        <br>
        📞 <strong>Contato:</strong><br>
        Tel: <a href="tel:+5511987654321">(11) 98765-4321</a><br>
        Email: <a href="mailto:workshop@techhub.com">workshop@techhub.com</a>
    </address>
</article>

<footer>
    <!-- 🏢 Endereço da empresa/organização -->
    <address>
        <strong>WebEducação - Cursos Online</strong><br>
        Rua das Startups, 42 - Sala 1001<br>
        Innovation District<br>
        Rio de Janeiro - RJ, 22071-000<br>
        <br>
        📧 Contato: <a href="mailto:contato@webeducacao.com">contato@webeducacao.com</a><br>
        🌐 Site: <a href="https://webeducacao.com">webeducacao.com</a>
    </address>
</footer>

<!-- ⏰ DATAS E HORÁRIOS (time): Marcação temporal precisa -->
<article>
    <header>
        <h2>Novidades do HTML 5.3</h2>
        <p>
            📅 Publicado em 
            <time datetime="2024-01-15T09:30:00-03:00">
                15 de janeiro de 2024, às 9h30
            </time>
        </p>
        <p>
            ✏️ Última atualização: 
            <time datetime="2024-01-20">20/01/2024</time>
        </p>
    </header>
    
    <p>O HTML 5.3 foi lançado em <time datetime="2021-01">janeiro de 2021</time>...</p>
    
    <footer>
        <p>
            ⏱️ Tempo de leitura: <time datetime="PT8M">8 minutos</time> | 
            🗓️ Próxima revisão: <time datetime="2024-07">julho de 2024</time>
        </p>
    </footer>
</article>

<!-- 🍳 EXEMPLO 1: Receita de Brownies Veganos -->
<article>
    <h3>🍫 Brownies Veganos Irresistíveis</h3>
    
    <h4>📋 Ingredientes Secos:</h4>
    <ul>
        <li>2 xícaras de farinha de trigo integral</li>
        <li>1/2 xícara de cacau em pó sem açúcar</li>
        <li>1 xícara de açúcar demerara</li>
        <li>1 colher (chá) de fermento em pó</li>
        <li>1/2 colher (chá) de sal marinho</li>
    </ul>
    
    <h4>💧 Ingredientes Líquidos:</h4>
    <ul>
        <li>1 xícara de leite de amêndoas</li>
        <li>1/2 xícara de óleo de coco derretido</li>
        <li>2 colheres (sopa) de linhaça dourada + 6 colheres (sopa) de água</li>
        <li>1 colher (chá) de extrato de baunilha</li>
    </ul>
    
    <h4>🎊 Extras Opcionais:</h4>
    <ul>
        <li>1/2 xícara de nozes picadas</li>
        <li>1/3 xícara de gotas de chocolate vegano</li>
        <li>1 colher (sopa) de raspas de laranja</li>
    </ul>
</article>

<!-- 🚀 EXEMPLO 2: Features de SaaS -->
<section class="produto-features">
    <h3>⚡ Por que escolher nossa plataforma?</h3>
    <ul>
        <li>🔒 <strong>Segurança Enterprise:</strong> Criptografia de ponta a ponta</li>
        <li>📊 <strong>Analytics Avançado:</strong> Dashboards personalizáveis em tempo real</li>
        <li>🌍 <strong>Global CDN:</strong> Performance otimizada em 50+ países</li>
        <li>🤖 <strong>AI Integrada:</strong> Automação inteligente de processos</li>
        <li>📱 <strong>Apps Nativos:</strong> iOS, Android e Progressive Web App</li>
        <li>🔄 <strong>Backup Automático:</strong> Redundância tripla com restore em 1-click</li>
    </ul>
</section>

<!-- 🎯 EXEMPLO 1: Tutorial Completo de Deploy -->
<article>
    <h3>🚀 Deploy de Aplicação React na Vercel</h3>
    
    <h4>📋 Preparação (Pré-requisitos):</h4>
    <ol>
        <li>
            <strong>Conta na Vercel:</strong> 
            Cadastre-se gratuitamente em <a href="https://vercel.com">vercel.com</a>
        </li>
        <li>
            <strong>Repositório Git:</strong> 
            Projeto React no GitHub, GitLab ou Bitbucket
        </li>
        <li>
            <strong>Build funcionando:</strong> 
            Teste local com <code>npm run build</code> sem erros
        </li>
    </ol>
    
    <h4>⚡ Processo de Deploy:</h4>
    <ol>
        <li>
            <strong>Conectar repositório:</strong> 
            Dashboard Vercel → "New Project" → Selecionar repo
        </li>
        <li>
            <strong>Configurar build:</strong> 
            Framework: React | Build Command: <code>npm run build</code> | Output: <code>build</code>
        </li>
        <li>
            <strong>Variáveis de ambiente:</strong> 
            Adicionar chaves API, URLs de banco, etc.
        </li>
        <li>
            <strong>Deploy inicial:</strong> 
            Clique "Deploy" e aguarde conclusão (2-5 minutos)
        </li>
        <li>
            <strong>Domínio personalizado:</strong> 
            Settings → Domains → Adicionar seu domínio
        </li>
    </ol>
</article>

<!-- 🏆 EXEMPLO 2: Ranking com Tipos Diferentes -->
<section>
    <h3>🥇 Top 10 Linguagens de Programação 2024</h3>
    <ol>
        <li><strong>JavaScript</strong> - 67.8% dos desenvolvedores</li>
        <li><strong>Python</strong> - 49.3% dos desenvolvedores</li>
        <li><strong>TypeScript</strong> - 38.9% dos desenvolvedores</li>
        <li><strong>Java</strong> - 30.3% dos desenvolvedores</li>
        <li><strong>C#</strong> - 27.8% dos desenvolvedores</li>
    </ol>
    
    <h4>📊 Categorias Especiais:</h4>
    
    <!-- 🔤 Lista com letras -->
    <h5>Frontend Frameworks:</h5>
    <ol type="A">
        <li>React - 40.6% market share</li>
        <li>Vue.js - 18.8% market share</li>
        <li>Angular - 17.3% market share</li>
        <li>Svelte - 8.1% market share</li>
    </ol>
    
    <!-- 🏛️ Lista com números romanos -->
    <h5>Arquiteturas de Software:</h5>
    <ol type="I">
        <li>Microservices Architecture</li>
        <li>Serverless Computing</li>
        <li>Event-Driven Architecture</li>
        <li>Monolithic Architecture</li>
    </ol>
    
    <!-- 🔢 Lista continuando numeração -->
    <h5>Linguagens em Crescimento (continuação):</h5>
    <ol start="6">
        <li><strong>Go</strong> - 13.2% dos desenvolvedores</li>
        <li><strong>Rust</strong> - 12.1% dos desenvolvedores</li>
        <li><strong>Kotlin</strong> - 8.9% dos desenvolvedores</li>
        <li><strong>Swift</strong> - 6.6% dos desenvolvedores</li>
        <li><strong>Dart</strong> - 4.2% dos desenvolvedores</li>
    </ol>
</section>

<!-- 🔧 EXEMPLO 1: Glossário Técnico de DevOps -->
<section>
    <h3>📚 Glossário DevOps Essencial</h3>
    <dl>
        <dt><strong>CI/CD</strong></dt>
        <dd>
            <strong>Continuous Integration/Continuous Deployment</strong> - 
            Prática de automatizar integração de código e deployment, 
            permitindo releases frequentes e confiáveis. Ferramentas: 
            Jenkins, GitHub Actions, GitLab CI.
        </dd>
        
        <dt><strong>Docker</strong></dt>
        <dd>
            Plataforma de containerização que empacota aplicações e 
            dependências em containers portáteis. Garante consistência 
            entre ambientes de desenvolvimento, teste e produção.
        </dd>
        
        <dt><strong>Kubernetes (K8s)</strong></dt>
        <dd>
            Sistema de orquestração de containers que automatiza deployment, 
            scaling e gestão de aplicações containerizadas. Essencial para 
            arquiteturas de microservices em produção.
        </dd>
        
        <dt><strong>Infrastructure as Code (IaC)</strong></dt>
        <dd>
            Prática de definir infraestrutura através de código versionável. 
            Ferramentas como Terraform, CloudFormation e Pulumi permitem 
            infraestrutura reproduzível e auditável.
        </dd>
        
        <dt><strong>Monitoring & Observability</strong></dt>
        <dd>
            Coleta e análise de métricas, logs e traces para entender 
            comportamento de sistemas. Stack popular: Prometheus, Grafana, 
            ELK (Elasticsearch, Logstash, Kibana).
        </dd>
    </dl>
</section>

<!-- ❓ EXEMPLO 2: FAQ Estruturado -->
<section>
    <h3>❓ Perguntas Frequentes - Curso HTML</h3>
    <dl>
        <dt>⏱️ Quanto tempo leva para aprender HTML?</dt>
        <dd>
            Para dominar o básico: <strong>2-4 semanas</strong> com estudo diário. 
            Para nível avançado (semântica, acessibilidade, SEO): 
            <strong>2-3 meses</strong> de prática consistente.
        </dd>
        
        <dt>💻 Preciso de software especial para começar?</dt>
        <dd>
            Não! Você pode começar com:
            <ul>
                <li><strong>Editor simples:</strong> Notepad++, Sublime Text</li>
                <li><strong>Editor avançado:</strong> VS Code (recomendado), Atom</li>
                <li><strong>Browser:</strong> Chrome, Firefox, Safari, Edge</li>
            </ul>
        </dd>
        
        <dt>🎯 HTML é suficiente para criar sites profissionais?</dt>
        <dd>
            HTML sozinho cria apenas a <em>estrutura</em>. Para sites profissionais, 
            você precisará de:
            <ol>
                <li><strong>CSS</strong> - Estilização e layout</li>
                <li><strong>JavaScript</strong> - Interatividade</li>
                <li><strong>Backend</strong> - Funcionalidades dinâmicas</li>
            </ol>
        </dd>
        
        <dt>🔍 Como saber se meu HTML está correto?</dt>
        <dd>
            Use ferramentas de validação:
            <ul>
                <li><a href="https://validator.w3.org/">W3C Markup Validator</a> - Oficial</li>
                <li><strong>VS Code Extensions:</strong> HTML Validation, Auto Rename Tag</li>
                <li><strong>Browser DevTools:</strong> F12 → Console (erros automáticos)</li>
            </ul>
        </dd>
    </dl>
</section>

<!-- 📱 EXEMPLO 3: Especificações de Produto -->
<article>
    <h3>📱 iPhone 15 Pro - Especificações Técnicas</h3>
    <dl>
        <dt>🖥️ Display</dt>
        <dd>
            Super Retina XDR OLED de 6,1 polegadas | 
            Resolução: 2556 × 1179 pixels (460 ppi) | 
            ProMotion 120Hz | HDR10, Dolby Vision
        </dd>
        
        <dt>💾 Armazenamento</dt>
        <dd>128GB | 256GB | 512GB | 1TB (sem slot microSD)</dd>
        
        <dt>📷 Sistema de Câmeras</dt>
        <dd>
            <strong>Principal:</strong> 48MP, f/1.78, OIS | 
            <strong>Ultra Wide:</strong> 12MP, f/2.2, 120° | 
            <strong>Telephoto:</strong> 12MP, f/2.8, zoom óptico 3x
        </dd>
        
        <dt>🔋 Bateria</dt>
        <dd>
            Até 23h de reprodução de vídeo | 
            Carregamento rápido 20W | MagSafe 15W | Qi 7.5W
        </dd>
        
        <dt>🌐 Conectividade</dt>
        <dd>
            5G (sub-6 GHz e mmWave) | Wi-Fi 6E | Bluetooth 5.3 | 
            USB-C com Thunderbolt 3/USB 4
        </dd>
    </dl>
</article>

<!-- 🎓 EXEMPLO 1: Estrutura Curricular Completa -->
<section>
    <h3>📚 Currículo Full Stack Developer - 480h</h3>
    <ol>
        <li>
            <strong>🌐 Frontend Development (160h)</strong>
            <ol type="A">
                <li>HTML5 & Semântica (40h)
                    <ul>
                        <li>✅ Estrutura e tags básicas</li>
                        <li>✅ Formulários avançados</li>
                        <li>✅ SEO e acessibilidade</li>
                        <li>✅ HTML5 APIs (Canvas, Storage, Geolocation)</li>
                    </ul>
                </li>
                <li>CSS3 & Layout Responsivo (60h)
                    <ul>
                        <li>🎨 Flexbox & CSS Grid</li>
                        <li>🎨 Animações e transições</li>
                        <li>🎨 Preprocessadores (Sass/Less)</li>
                        <li>🎨 CSS-in-JS e Styled Components</li>
                    </ul>
                </li>
                <li>JavaScript Moderno (60h)
                    <ul>
                        <li>⚡ ES6+ Features</li>
                        <li>⚡ DOM Manipulation</li>
                        <li>⚡ Async/Await & Promises</li>
                        <li>⚡ Modules & Build Tools</li>
                    </ul>
                </li>
            </ol>
        </li>
        
        <li>
            <strong>⚙️ Backend Development (160h)</strong>
            <ol type="A">
                <li>Node.js & Express (80h)
                    <ul>
                        <li>🔧 API REST & GraphQL</li>
                        <li>🔧 Middleware & Authentication</li>
                        <li>🔧 WebSockets & Real-time</li>
                        <li>🔧 Testing (Jest, Supertest)</li>
                    </ul>
                </li>
                <li>Banco de Dados (80h)
                    <ul>
                        <li>🗄️ SQL (PostgreSQL, MySQL)</li>
                        <li>🗄️ NoSQL (MongoDB, Redis)</li>
                        <li>🗄️ ORMs (Prisma, Sequelize)</li>
                        <li>🗄️ Query Optimization</li>
                    </ul>
                </li>
            </ol>
        </li>
        
        <li>
            <strong>☁️ DevOps & Deploy (80h)</strong>
            <ul>
                <li>🐳 Docker & Containerização</li>
                <li>☁️ AWS/Azure/GCP</li>
                <li>🔄 CI/CD Pipelines</li>
                <li>📊 Monitoring & Logging</li>
            </ul>
        </li>
        
        <li>
            <strong>🚀 Projetos Práticos (80h)</strong>
            <ol>
                <li>E-commerce completo</li>
                <li>Social Media App</li>
                <li>Dashboard Analytics</li>
                <li>Portfolio profissional</li>
            </ol>
        </li>
    </ol>
</section>

<!-- 🏢 EXEMPLO 2: Estrutura Organizacional -->
<section>
    <h3>🏢 Organização TechCorp - Departamentos</h3>
    <ul>
        <li>
            <strong>💻 Tecnologia</strong>
            <ul>
                <li>Desenvolvimento
                    <ul>
                        <li>Frontend Team (React, Vue)</li>
                        <li>Backend Team (Node, Python)</li>
                        <li>Mobile Team (React Native, Flutter)</li>
                    </ul>
                </li>
                <li>Infraestrutura
                    <ul>
                        <li>DevOps & SRE</li>
                        <li>Cloud Architecture</li>
                        <li>Security & Compliance</li>
                    </ul>
                </li>
                <li>Quality Assurance
                    <ul>
                        <li>Manual Testing</li>
                        <li>Automation Testing</li>
                        <li>Performance Testing</li>
                    </ul>
                </li>
            </ul>
        </li>
        
        <li>
            <strong>📊 Produto & Design</strong>
            <ul>
                <li>Product Management</li>
                <li>UX Research</li>
                <li>UI/UX Design</li>
                <li>Data Analytics</li>
            </ul>
        </li>
        
        <li>
            <strong>🎯 Negócios</strong>
            <ul>
                <li>Sales & Marketing</li>
                <li>Customer Success</li>
                <li>HR & People</li>
                <li>Finance & Legal</li>
            </ul>
        </li>
    </ul>
</section>

<!-- 🍕 EXEMPLO 3: Menu de Restaurante (Lista Mista) -->
<section>
    <h3>🍕 Cardápio Pizzaria do Código</h3>
    <dl>
        <dt>🍕 Pizzas Tradicionais</dt>
        <dd>
            <ol>
                <li>Margherita - R$ 35,00
                    <ul>
                        <li>🧀 Mussarela, tomate, manjericão</li>
                        <li>⏱️ Tempo preparo: 15min</li>
                        <li>🌱 Opção vegana disponível</li>
                    </ul>
                </li>
                <li>Pepperoni - R$ 42,00
                    <ul>
                        <li>🥩 Pepperoni, mussarela, orégano</li>
                        <li>⏱️ Tempo preparo: 18min</li>
                        <li>🌶️ Pimenta calabresa extra</li>
                    </ul>
                </li>
            </ol>
        </dd>
        
        <dt>👨‍💻 Pizzas do Desenvolvedor</dt>
        <dd>
            <ol>
                <li>JavaScript (Sweet & Async) - R$ 48,00
                    <ul>
                        <li>🍯 Doce de leite, banana, canela</li>
                        <li>⚡ "Promessa de sabor incrível"</li>
                    </ul>
                </li>
                <li>Python (Simple & Clean) - R$ 45,00
                    <ul>
                        <li>🥬 Ingredientes simples e elegantes</li>
                        <li>🐍 "Readable e deliciosa"</li>
                    </ul>
                </li>
            </ol>
        </dd>
    </dl>
</section>

<!-- 🎯 EXEMPLO 1: Citação Técnica com Fonte Completa -->
<article>
    <h3>A Importância da Acessibilidade Web</h3>
    
    <blockquote cite="https://www.w3.org/WAI/fundamentals/accessibility-intro/">
        <p>
            "A web é fundamentalmente projetada para funcionar para todas as pessoas, 
            independentemente de seu hardware, software, idioma, localização ou capacidade. 
            Quando a web atende a esse objetivo, ela é acessível a pessoas com uma 
            ampla gama de audição, movimento, visão e habilidades cognitivas."
        </p>
        <footer>
            — <cite><a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">
                W3C Web Accessibility Initiative
            </a></cite>, Introduction to Web Accessibility
        </footer>
    </blockquote>
    
    <p>
        Esta definição oficial demonstra que acessibilidade não é um "extra" - 
        é a <em>intenção fundamental</em> da web desde sua criação.
    </p>
</article>

<!-- 🚀 EXEMPLO 2: Depoimento de Cliente -->
<section class="testimonials">
    <h3>💬 O que nossos alunos dizem</h3>
    
    <blockquote>
        <p>
            "Depois de 3 meses no curso de HTML/CSS, consegui minha primeira vaga 
            como desenvolvedor frontend. A metodologia prática e os projetos reais 
            fizeram toda a diferença. Hoje trabalho em uma startup e uso 
            diariamente tudo que aprendi."
        </p>
        <footer>
            — <cite>Maria Silva</cite>, 
            <strong>Frontend Developer na TechStartup</strong><br>
            <small>
                📅 Formada em dezembro/2023 | 
                💼 Contratada em janeiro/2024 | 
                💰 Salário inicial: R$ 4.500
            </small>
        </footer>
    </blockquote>
    
    <blockquote>
        <p>
            "O curso superou minhas expectativas. Vim de uma área completamente 
            diferente (administração) e em 6 meses estava desenvolvendo sistemas 
            web completos. O suporte da comunidade e dos mentores foi fundamental."
        </p>
        <footer>
            — <cite>João Santos</cite>, 
            <strong>Full Stack Developer na CorpTech</strong><br>
            <small>
                🎯 Transição de carreira aos 35 anos | 
                📈 Aumento salarial de 180% | 
                🏆 Promovido a Tech Lead em 1 ano
            </small>
        </footer>
    </blockquote>
</section>

<!-- 📊 EXEMPLO 3: Dados Estatísticos com Fonte -->
<article>
    <h3>📈 O Mercado de Desenvolvimento Web em 2024</h3>
    
    <blockquote cite="https://stackoverflow.com/insights/survey/2024">
        <p>
            "JavaScript permanece como a linguagem mais popular pelo 12º ano consecutivo, 
            sendo usada por 65.36% dos desenvolvedores profissionais. TypeScript 
            cresceu significativamente e agora é usado por 38.87% dos desenvolvedores, 
            consolidando-se como essencial para desenvolvimento web moderno."
        </p>
        <footer>
            — <cite><a href="https://stackoverflow.com/insights/survey/2024">
                Stack Overflow Developer Survey 2024
            </a></cite><br>
            <small>📊 Baseado em respostas de 87.585 desenvolvedores globalmente</small>
        </footer>
    </blockquote>
</article>

<!-- 🎯 EXEMPLO 1: Citações de Personalidades Tech -->
<article>
    <h3>💡 Sabedoria dos Grandes da Tecnologia</h3>
    
    <p>
        Tim Berners-Lee, criador da World Wide Web, sempre defendeu que 
        <q cite="https://www.w3.org/People/Berners-Lee/">a web foi projetada 
        para ser descentralizada para que todos pudessem participar sem 
        pedir permissão</q>. Essa visão democratizante ainda guia o 
        desenvolvimento web hoje.
    </p>
    
    <p>
        Steve Jobs, co-fundador da Apple, frequentemente lembrava que 
        <q>design não é apenas como algo parece ou como se sente - 
        design é como funciona</q>. Este princípio é fundamental 
        no desenvolvimento de interfaces web eficazes.
    </p>
    
    <p>
        Linus Torvalds, criador do Linux, uma vez disse que 
        <q>falar é barato, me mostre o código</q>. Essa mentalidade 
        prática é essencial para todo desenvolvedor web.
    </p>
</article>

<!-- 📚 EXEMPLO 2: Conceitos Técnicos -->
<section>
    <h3>🎓 Definições Fundamentais</h3>
    
    <p>
        Douglas Crockford define JavaScript como 
        <q cite="https://crockford.com/javascript/">a linguagem de programação 
        mais incompreendida do mundo</q>, destacando a necessidade de 
        estudar suas peculiaridades.
    </p>
    
    <p>
        Segundo a especificação HTML5, o propósito do HTML é 
        <q cite="https://html.spec.whatwg.org/">permitir autores a criar 
        documentos e aplicações web ricos em conteúdo</q>, sem depender 
        de plugins proprietários.
    </p>
    
    <p>
        O mantra do CSS, como descrito na W3C, é que deve 
        <q cite="https://www.w3.org/Style/CSS/">separar conteúdo de 
        apresentação</q>, permitindo flexibilidade total no design.
    </p>
</section>

<!-- 📖 EXEMPLO 1: Bibliografia Técnica -->
<section>
    <h3>📚 Leituras Essenciais para Desenvolvedores</h3>
    
    <h4>Livros Fundamentais:</h4>
    <ul>
        <li>
            <cite>Clean Code: A Handbook of Agile Software Craftsmanship</cite> 
            por Robert C. Martin - Define padrões para código legível e mantível.
        </li>
        <li>
            <cite>JavaScript: The Good Parts</cite> por Douglas Crockford - 
            Explora as melhores características do JavaScript.
        </li>
        <li>
            <cite>Don't Make Me Think: A Common Sense Approach to Web Usability</cite> 
            por Steve Krug - Guia prático para UX web.
        </li>
        <li>
            <cite>Eloquent JavaScript: A Modern Introduction to Programming</cite> 
            por Marijn Haverbeke - Programação JavaScript do básico ao avançado.
        </li>
    </ul>
    
    <h4>Artigos Clássicos:</h4>
    <ul>
        <li>
            <cite>"A Dao of Web Design"</cite> por John Allsopp (2000) - 
            Manifesto sobre design responsivo antes mesmo do termo existir.
        </li>
        <li>
            <cite>"Progressive Enhancement 2.0"</cite> por Nicolas Zakas - 
            Estratégias modernas para desenvolvimento inclusivo.
        </li>
        <li>
            <cite>"The Web's Grain"</cite> por Frank Chimero - 
            Filosofia sobre design que respeita a natureza da web.
        </li>
    </ul>
</section>

<!-- 🎬 EXEMPLO 2: Referências Multimídia -->
<section>
    <h3>📺 Recursos de Aprendizagem Audiovisual</h3>
    
    <p>
        O documentário <cite>Code Red: The Documentary</cite> oferece uma 
        perspectiva fascinante sobre a evolução da programação. Para quem 
        prefere podcasts, <cite>Syntax</cite> por Wes Bos e Scott Tolinski 
        é essencial para desenvolvedores web.
    </p>
    
    <p>
        A série de palestras <cite>"Building Modern Web Applications"</cite> 
        na conferência <cite>JSConf 2024</cite> apresenta as mais recentes 
        tendências em desenvolvimento frontend.
    </p>
    
    <p>
        No YouTube, o canal <cite>Traversy Media</cite> oferece tutoriais 
        práticos, enquanto <cite>The Net Ninja</cite> foca em conceitos 
        fundamentais com explicações claras.
    </p>
</section>

<!-- 📊 EXEMPLO 3: Citação Acadêmica Completa -->
<article>
    <h3>🎓 Pesquisa: Impacto da Performance Web na Conversão</h3>
    
    <blockquote cite="https://research.google.com/pubs/pub44678.html">
        <p>
            "Um atraso de 100 milissegundos no tempo de carregamento pode 
            resultar em uma queda de 7% na taxa de conversão. Sites que 
            carregam em menos de 2 segundos têm taxas de abandono 9% menores 
            comparados àqueles que levam 5 segundos ou mais."
        </p>
        <footer>
            — <cite>"The Need for Speed: How Mobile Performance Impacts Publisher Revenue"</cite><br>
            Google Research, 2018<br>
            Disponível em: <a href="https://research.google.com/pubs/pub44678.html">
                research.google.com/pubs/pub44678.html
            </a>
        </footer>
    </blockquote>
    
    <p>
        Este estudo, publicado no periódico <cite>Journal of Web Performance</cite> 
        e posteriormente referenciado no relatório <cite>"State of the Web 2024"</cite> 
        da Mozilla Foundation, demonstra a correlação direta entre performance 
        técnica e resultados de negócio.
    </p>
</article>

<!-- 🎯 EXEMPLO 1: Tutorial JavaScript Prático -->
<article>
    <h3>⚡ Manipulação de DOM com JavaScript</h3>
    
    <p>
        Para selecionar um elemento HTML, use o método <code>document.querySelector()</code> 
        passando um seletor CSS como parâmetro. Por exemplo, 
        <code>document.querySelector('.minha-classe')</code> retorna o primeiro 
        elemento com a classe <code>minha-classe</code>.
    </p>
    
    <p>
        Para modificar o conteúdo, use a propriedade <code>textContent</code> 
        para texto simples ou <code>innerHTML</code> para HTML. 
        A diferença é que <code>innerHTML</code> interpreta tags HTML, 
        enquanto <code>textContent</code> trata tudo como texto literal.
    </p>
    
    <p>
        Para adicionar listeners de eventos, use <code>addEventListener()</code> 
        em vez do atributo <code>onclick</code>. Isso permite múltiplos 
        listeners no mesmo elemento e melhor controle sobre o comportamento.
    </p>
</article>

<!-- 🛠️ EXEMPLO 2: Documentação de API -->
<section>
    <h3>🔌 Usando a API do GitHub</h3>
    
    <p>
        O endpoint <code>/users/{username}</code> retorna informações 
        básicas do usuário. Para dados mais detalhados, use o parâmetro 
        <code>?include=repositories</code> na URL.
    </p>
    
    <p>
        Todas as requisições devem incluir o header <code>Authorization: token {seu_token}</code> 
        e o header <code>Accept: application/vnd.github.v3+json</code> 
        para garantir compatibilidade com a versão 3 da API.
    </p>
    
    <p>
        Para tratamento de erros, verifique sempre o status code: 
        <code>200</code> indica sucesso, <code>404</code> usuário não encontrado, 
        e <code>403</code> limite de rate exceeded.
    </p>
</section>

<!-- 🎨 EXEMPLO 3: Elementos Especializados em Contexto -->
<section>
    <h3>⌨️ Atalhos e Comandos do VS Code</h3>
    
    <p>
        Para formatação automática de código, use <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd> 
        no Windows/Linux ou <kbd>Shift</kbd> + <kbd>Option</kbd> + <kbd>F</kbd> no macOS.
    </p>
    
    <p>
        Para abrir o terminal integrado, pressione <kbd>Ctrl</kbd> + <kbd>`</kbd> 
        (backtick). O output típico será algo como 
        <samp>Terminal ready in workspace</samp> quando carregado corretamente.
    </p>
    
    <p>
        Ao executar o comando <code>npm --version</code>, você deve ver uma 
        saída similar a <samp>9.6.2</samp>. Se aparecer 
        <samp>'npm' is not recognized as an internal or external command</samp>, 
        significa que o Node.js não está instalado ou não está no PATH.
    </p>
    
    <p>
        Para buscar em todo o projeto, use <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd> 
        e digite o termo na variável <var>busca</var>. Substitua <var>termo_antigo</var> 
        por <var>termo_novo</var> usando <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd>.
    </p>
</section>

<!-- 🚀 EXEMPLO 1: Setup Completo de Projeto React -->
<article>
    <h3>🎯 Criando Projeto React do Zero</h3>
    
    <h4>📦 1. Criação e Setup Inicial:</h4>
    <pre><code class="language-bash">
# Criar novo projeto React com TypeScript
npx create-react-app meu-projeto --template typescript

# Navegar para o diretório
cd meu-projeto

# Instalar dependências adicionais
npm install @types/react @types/react-dom
npm install -D @types/jest @types/node

# Inicializar Git (se não foi criado automaticamente)
git init
git add .
git commit -m "Initial commit: React TypeScript setup"
    </code></pre>
    
    <h4>⚛️ 2. Componente Funcional com TypeScript:</h4>
    <pre><code class="language-typescript">
// src/components/UserCard.tsx
import React from 'react';

interface User {
  id: number;
  name: string;
  email: string;
  avatar?: string;
}

interface UserCardProps {
  user: User;
  isActive?: boolean;
  onUserClick: (userId: number) => void;
}

const UserCard: React.FC<UserCardProps> = ({ 
  user, 
  isActive = false, 
  onUserClick 
}) => {
  const handleClick = () => {
    onUserClick(user.id);
  };

  return (
    <div 
      className={`user-card ${isActive ? 'active' : ''}`}
      onClick={handleClick}
      role="button"
      tabIndex={0}
    >
      <img 
        src={user.avatar || '/default-avatar.png'} 
        alt={`Avatar de ${user.name}`}
        className="user-avatar"
      />
      <div className="user-info">
        <h3>{user.name}</h3>
        <p>{user.email}</p>
      </div>
    </div>
  );
};

export default UserCard;
    </code></pre>
    
    <h4>🎨 3. CSS Module para Estilização:</h4>
    <pre><code class="language-css">
/* src/components/UserCard.module.css */
.user-card {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.user-card.active {
  border-color: #007bff;
  background-color: #f8f9fa;
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 1rem;
}

.user-info h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
  color: #333;
}

.user-info p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}
    </code></pre>
</article>

<!-- 🗄️ EXEMPLO 2: Configuração de Banco de Dados -->
<section>
    <h3>🗄️ Setup PostgreSQL com Docker</h3>
    
    <h4>🐳 Docker Compose Configuration:</h4>
    <pre><code class="language-yaml">
# docker-compose.yml
version: '3.8'

services:
  postgres:
    image: postgres:15-alpine
    container_name: my_postgres
    environment:
      POSTGRES_DB: myapp_development
      POSTGRES_USER: developer
      POSTGRES_PASSWORD: dev_password_2024
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data
      - ./db/init:/docker-entrypoint-initdb.d
    networks:
      - app-network

  redis:
    image: redis:7-alpine
    container_name: my_redis
    ports:
      - "6379:6379"
    volumes:
      - redis_data:/data
    networks:
      - app-network

volumes:
  postgres_data:
  redis_data:

networks:
  app-network:
    driver: bridge
    </code></pre>
    
    <h4>📊 SQL Schema Initial:</h4>
    <pre><code class="language-sql">
-- db/init/01_schema.sql
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";

CREATE TABLE users (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    email VARCHAR(255) UNIQUE NOT NULL,
    name VARCHAR(100) NOT NULL,
    avatar_url TEXT,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

CREATE TABLE posts (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    title VARCHAR(200) NOT NULL,
    content TEXT NOT NULL,
    author_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    published_at TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Índices para performance
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_posts_author ON posts(author_id);
CREATE INDEX idx_posts_published ON posts(published_at) WHERE published_at IS NOT NULL;

-- Trigger para updated_at automático
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = NOW();
    RETURN NEW;
END;
$$ language 'plpgsql';

CREATE TRIGGER update_users_updated_at 
    BEFORE UPDATE ON users 
    FOR EACH ROW EXECUTE PROCEDURE update_updated_at_column();

CREATE TRIGGER update_posts_updated_at 
    BEFORE UPDATE ON posts 
    FOR EACH ROW EXECUTE PROCEDURE update_updated_at_column();
    </code></pre>
</section>

<!-- 📊 EXEMPLO 3: Logs e Debugging -->
<section>
    <h3>🔍 Logs de Sistema e Debugging</h3>
    
    <h4>📋 Log de Deploy Bem-sucedido:</h4>
    <pre><code class="language-log">
[2024-01-15 14:32:10] INFO: Starting deployment process...
[2024-01-15 14:32:11] INFO: Pulling latest code from main branch
[2024-01-15 14:32:12] INFO: Running tests...
[2024-01-15 14:32:25] SUCCESS: All 127 tests passed ✓
[2024-01-15 14:32:26] INFO: Building production assets...
[2024-01-15 14:32:45] INFO: Assets built successfully (2.3MB total)
[2024-01-15 14:32:46] INFO: Deploying to production environment...
[2024-01-15 14:32:50] INFO: Database migrations running...
[2024-01-15 14:32:52] SUCCESS: 3 new migrations applied ✓
[2024-01-15 14:32:53] INFO: Starting application servers...
[2024-01-15 14:32:58] SUCCESS: Application deployed successfully ✓
[2024-01-15 14:32:59] INFO: Deployment completed in 49 seconds
[2024-01-15 14:33:00] INFO: Health check: https://myapp.com/health → 200 OK
    </code></pre>
    
    <h4>⚠️ Log de Erro com Stack Trace:</h4>
    <pre><code class="language-log">
[2024-01-15 15:45:23] ERROR: Database connection failed
TypeError: Cannot read property 'query' of null
    at UserService.findById (src/services/UserService.js:45:23)
    at UserController.getUser (src/controllers/UserController.js:28:31)
    at Layer.handle [as handle_request] (express/lib/router/layer.js:95:5)
    at next (express/lib/router/route.js:137:13)
    at Route.dispatch (express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (express/lib/router/layer.js:95:5)
    at express/lib/router/index.js:281:22

Request Details:
  Method: GET
  URL: /api/users/550e8400-e29b-41d4-a716-446655440000
  Headers: {
    "authorization": "Bearer eyJ0eXAiOiJKV1QiLCJhbGc...",
    "content-type": "application/json",
    "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)"
  }
  
Environment: production
Server: app-server-01
Memory Usage: 245MB / 512MB
CPU Usage: 12%
    </code></pre>
</section>