article vs section
Duas tags parecidas, com uma diferença de propósito que muda bastante a leitura do código: uma é independente, a outra depende do contexto ao redor.
Estudar esta lição interativa →<article> e <section> costumam confundir porque, visualmente, os dois são só "um bloco de conteúdo". A diferença está no propósito: um <article> precisa fazer sentido sozinho, isolado do resto da página, enquanto um <section> é um pedaço temático que só faz sentido dentro do todo ao redor.
Pense num jornal impresso. Uma matéria específica é um <article>: você poderia recortá-la, colar num mural e ela ainda faria sentido completo por si só, com título, autor e texto. Já uma seção do jornal, tipo "Esportes" ou "Economia", é um <section>: ela agrupa várias matérias sob um mesmo tema, mas a seção em si, sem as matérias dentro, não faz muito sentido sozinha.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Um post de blog completo (article) e uma seção sobre o próprio blog (section).
Um exemplo real ajuda a fixar: numa página de blog que lista vários posts, cada post costuma ser um <article>, porque cada um poderia, tecnicamente, ser puxado para um feed RSS ou republicado em outro lugar e continuar fazendo sentido sozinho. Já uma página "Sobre nós" de uma empresa pode ter várias <section>, "Nossa missão", "Nossa equipe", "Nossos valores", cada uma um pedaço temático que só faz sentido dentro do contexto daquela página específica.
Usar <section> como um substituto genérico de <div>, só para agrupar qualquer coisa visualmente, sem que aquele grupo tenha, de fato, um tema com um título próprio. Se um bloco de conteúdo não tem um assunto claro (normalmente sinalizado por um h2 ou h3 logo no início dele), provavelmente uma <div> simples é a escolha certa, não um <section>.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Escolha article ou section para cada bloco.