Tendo em vista as tags semânticas do HTML5 e suas descrições...
Tendo em vista as tags semânticas do HTML5 e suas descrições, relacione a Coluna 1 à Coluna 2.
Coluna 1
1. <header>
2. <nav>
3. <aside>
4. <article>
5. <figure>
Coluna 2 ( ) Define um conteúdo que é relacionado ao conteúdo principal de uma página, mas que pode ser considerado secundário ou complementar a ele. ( ) Usada para marcar um conteúdo que é autônomo e pode ser considerado uma unidade independente. ( ) Define uma seção de navegação em uma página, pode incluir links para outras páginas no site, bem como para seções diferentes da página atual. ( ) Delimita o cabeçalho de uma página ou de uma seção específica de uma página. ( ) Usada para marcar uma imagem ou outro tipo de conteúdo multimídia que é relevante para o conteúdo principal da página. A ordem correta de preenchimento dos parênteses, de cima para baixo, é:Gabarito comentado
Confira o gabarito comentado por um dos nossos professores
A alternativa correta é a Letra A - 3 – 4 – 2 – 1 – 5. Vamos entender o porquê, relacionando cada descrição com a tag HTML5 semântica correspondente:
(3) <aside> - Define um conteúdo que é relacionado ao conteúdo principal de uma página, mas que pode ser considerado secundário ou complementar a ele. Esta tag é utilizada para marcar barras laterais, links relacionados, citações e outros conteúdos que não são essenciais para o entendimento do conteúdo principal, mas que de alguma forma, complementam-no.
(4) <article> - Usada para marcar um conteúdo que é autônomo e pode ser considerado uma unidade independente. Essa tag é ideal para posts de blog, artigos de notícias ou qualquer outro tipo de conteúdo que possa ser syndicated ou referenciado individualmente, mantendo seu significado mesmo fora do contexto original.
(2) <nav> - Define uma seção de navegação em uma página, pode incluir links para outras páginas no site, bem como para seções diferentes da página atual. A tag <nav> geralmente abriga menus de navegação e é importante para a acessibilidade e SEO, pois ajuda os motores de busca e os leitores de tela a identificarem onde estão os principais links de navegação do site.
(1) <header> - Delimita o cabeçalho de uma página ou de uma seção específica de uma página. O <header> pode conter logotipos, introduções, links de navegação, entre outros elementos que são típicos do cabeçalho de uma página.
(5) <figure> - Usada para marcar uma imagem ou outro tipo de conteúdo multimídia que é relevante para o conteúdo principal da página. Complementarmente, podemos utilizar a tag <figcaption> para fornecer uma legenda explicativa para o conteúdo marcado pela tag <figure>.
Entender essas tags é fundamental para uma boa prática de uso de HTML5, pois elas fornecem significado semântico para a estrutura da página. Isso melhora a acessibilidade e a indexação por mecanismos de busca, além de tornar o código mais legível e fácil de manter.
Clique para visualizar este gabarito
Visualize o gabarito desta questão clicando no botão abaixo