Noções de Informática · Avança SP · 2024 | Questão sqc-qg085772

HTML: tags semânticas e o elemento <main>

Gabarito: letra B. O elemento <main> é a tag semântica do HTML5 que representa o conteúdo dominante do <body> de um documento — exatamente o que o enunciado descreve ao falar em "conteúdo que está diretamente relacionado a ou expande o tópico central de um documento, ou a funcionalidade central de uma aplicação". As demais alternativas (<div>, <header>, <span>, <footer>) não cumprem esse papel: são tags genéricas ou de outras regiões da página.

O HTML5 introduziu um conjunto de tags semânticas para dar significado estrutural ao conteúdo, em vez de apenas apresentá-lo. Antes delas, os desenvolvedores usavam <div> para quase tudo — uma tag genérica sem valor semântico. Com a evolução da linguagem, surgiram elementos como <header>, <nav>, <main>, <section>, <article>, <aside> e <footer>, cada um com um propósito específico. Essa mudança melhora a acessibilidade (leitores de tela conseguem navegar melhor), o SEO (os buscadores entendem a hierarquia do conteúdo) e a manutenção do código.

O elemento <main> é o conteúdo principal da página. A especificação do HTML5 define que ele deve conter o conteúdo único daquele documento — aquilo que não se repete em outras páginas do mesmo site (como menus, rodapés e cabeçalhos, que se repetem). Por isso, a regra prática é: um único <main> por página, e ele não pode ser descendente de <article>, <aside>, <footer>, <header> ou <nav>. Ele é o "miolo" do documento, o que sobra quando você remove tudo que é repetido.

Para entender a diferença na prática, imagine uma página de notícia: o <header> contém o logotipo e o menu de navegação; o <main> contém o título da matéria, o texto e as imagens — o conteúdo central; o <aside> pode trazer notícias relacionadas; e o <footer> traz os links institucionais e os direitos autorais. Se você removesse o <main>, a página perderia exatamente o que o usuário veio buscar.

A pegadinha desta questão é justamente a confusão entre tags semânticas e tags genéricas. O candidato que não conhece o <main> pode ser tentado a escolher <div>, por ser a tag mais comum e "que representa um bloco de conteúdo". Mas <div> não tem significado — é um contêiner neutro. A banca explora exatamente essa falta de familiaridade com as tags semânticas do HTML5.

Guarde a distinção central: tags semânticas (<main>, <header>, <footer>, <section>, <article>, <nav>, <aside>) têm significado estrutural; tags genéricas (<div>, <span>) são neutras e servem apenas para agrupar ou estilizar. É nessa fronteira que as alternativas se dividem.

Alternativa A — ❌ Incorreta

A <div> é uma tag genérica de bloco, usada para agrupar conteúdo e aplicar estilos. Ela não carrega nenhum significado semântico — não diz ao navegador ou ao leitor de tela que aquele conteúdo é o principal da página. É justamente a ausência de semântica que motivou a criação de tags como <main>.

Alternativa B — ✅ Correta ⟵ GABARITO

O elemento <main> representa o conteúdo dominante do <body>. A definição da especificação HTML5 é exatamente a descrita no enunciado: "a área de conteúdo principal consiste em conteúdo que está diretamente relacionado a ou expande o tópico central de um documento, ou a funcionalidade central de uma aplicação". É a tag semântica criada especificamente para marcar o conteúdo principal.

Alternativa C — ❌ Incorreta

O <header> representa o cabeçalho de um documento ou de uma seção — normalmente contém logotipo, título e menu de navegação. Ele não é o conteúdo principal, mas sim a parte introdutória que se repete em várias páginas do site.

Alternativa D — ❌ Incorreta

O <span> é uma tag genérica inline, usada para agrupar pequenos trechos de texto ou elementos dentro de uma linha, geralmente para aplicar estilos. Não tem significado semântico e não representa conteúdo principal.

Alternativa E — ❌ Incorreta

O <footer> representa o rodapé de um documento ou seção — normalmente contém informações de copyright, links institucionais e dados de contato. É o oposto do conteúdo principal: é a parte final e repetitiva da página.

PEGA ESSA DICA!

Para fixar, pense na estrutura de uma página como um esqueleto: <header> é a cabeça, <main> é o tronco (o corpo do conteúdo), <footer> são as pernas. O <main> é o que sobra quando você remove tudo que se repete entre as páginas do site. Na prova, quando a questão falar em "conteúdo principal" ou "tópico central", a resposta quase sempre será <main>.

Gabarito: letra B — o elemento <main> representa o conteúdo dominante do <body>.