Embedded Files
Tags semânticas do HTML5
<header>
Define o cabeçalho de uma página ou de uma seção.
Não deve ser confundida com a tag <head>, que fica no documento HTML e contém metadados. Pode incluir: logo, títulos (h1 a h6), menu de navegação, formulário de busca, entre outros.
Pode aparecer no topo da página ou dentro de seções específicas, como em um cabeçalho de "Parceiros".
<footer>
Representa o rodapé da página ou de uma seção. Geralmente contém informações sobre o autor, direitos autorais, links relacionados, contatos etc.
<main>
Marca a seção principal do conteúdo da página. Só pode haver um único <main> por página. Deve conter o conteúdo central, excluindo elementos repetitivos como cabeçalho, rodapé e menus de navegação.
<nav>
Agrupa links de navegação, como menus principais ou links relacionados ao conteúdo da página. Não é necessário usar para pequenos grupos de links, como os encontrados no rodapé (ex: termos de uso, política de privacidade).
Contextos de uso:
Dentro de um <article>, os links devem estar relacionados ao conteúdo daquele artigo.
Fora do <article>, os links podem ser para navegação geral do site, banners ou links externos.
<section>
Usada para dividir o conteúdo em seções temáticas, com significado próprio.
Diferente da <div>, que é apenas um container genérico sem significado semântico, a <section> representa partes distintas do conteúdo, como capítulos ou blocos com tópicos diferentes.
É um elemento de bloco e deve conter um cabeçalho (h1 a h6) para descrever a seção.
<article>
Representa um conteúdo independente, que pode ser distribuído ou reutilizado isoladamente. Ideal para posts de blog, notícias, comentários, artigos ou qualquer bloco de conteúdo autônomo dentro da página.
É um elemento de bloco que deve fazer sentido mesmo fora do contexto da página.
<aside>
Marca conteúdo relacionado, mas não parte do conteúdo principal.
Usado para barras laterais, blocos de posts ou arquivos relacionados, anúncios ou informações adicionais.
Contextos de uso:
Dentro de um <article>, o conteúdo do <aside> deve estar relacionado àquele artigo.
Fora do <article>, o <aside> pode conter elementos relacionados ao site ou à página, como propagandas ou links de navegação secundária.
Por que a tag <main> é importante?
Por que a tag <main> é importante?
Acessibilidade: Esta é a razão principal. A tag <main> permite que tecnologias assistivas, como leitores de tela, identifiquem rapidamente o conteúdo principal da sua página. Isso ajuda usuários com deficiência visual a navegar de forma mais eficiente, pulando blocos de conteúdo repetitivos (como cabeçalho, navegação, ou rodapé) para ir direto ao que interessa. Para eles, é como ter um atalho direto para o coração da sua página.
SEO (Otimização para Mecanismos de Busca): Embora não seja um fator de ranqueamento direto e de grande peso como o conteúdo em si, a estrutura semântica do seu HTML é valorizada por mecanismos de busca como o Google. Usar <main> ajuda os crawlers a entenderem melhor qual é o conteúdo central da página, contribuindo para uma indexação mais precisa.
Organização e Clareza do Código: A tag <main> melhora a legibilidade do seu código. Ao olhar para o HTML, você e outros desenvolvedores conseguem identificar imediatamente qual seção contém o conteúdo primário, separando-o de elementos de navegação, cabeçalhos ou rodapés, que têm suas próprias tags semânticas (como <header>, <nav>, <footer>).
Em termos simples, sim, é muito importante usar a tag <main> em seus arquivos HTML. Ela não é obrigatória para o navegador renderizar a página (sua página funcionará sem ela), mas seu uso é uma prática recomendada e fundamental por diversas razões.
Por que a tag <main> é importante?
Por que a tag <main> é importante?
Acessibilidade: Esta é a razão principal. A tag <main> permite que tecnologias assistivas, como leitores de tela, identifiquem rapidamente o conteúdo principal da sua página. Isso ajuda usuários com deficiência visual a navegar de forma mais eficiente, pulando blocos de conteúdo repetitivos (como cabeçalho, navegação, ou rodapé) para ir direto ao que interessa. Para eles, é como ter um atalho direto para o coração da sua página.
SEO (Otimização para Mecanismos de Busca): Embora não seja um fator de ranqueamento direto e de grande peso como o conteúdo em si, a estrutura semântica do seu HTML é valorizada por mecanismos de busca como o Google. Usar <main> ajuda os crawlers a entenderem melhor qual é o conteúdo central da página, contribuindo para uma indexação mais precisa.
Organização e Clareza do Código: A tag <main> melhora a legibilidade do seu código. Ao olhar para o HTML, você e outros desenvolvedores conseguem identificar imediatamente qual seção contém o conteúdo primário, separando-o de elementos de navegação, cabeçalhos ou rodapés, que têm suas próprias tags semânticas (como <header>, <nav>, <footer>).
Onde e como usar?
Onde e como usar?
A tag <main> deve ser usada para envolver o conteúdo único e central de cada página. Pense no conteúdo que não se repete.
Conteúdo que deve estar dentro de <main>: artigos de blog, corpo de notícias, resultados de pesquisa, conteúdo de uma página "sobre nós", formulários principais.
Conteúdo que NÃO deve estar dentro de <main>: cabeçalhos e logotipos (use <header>), navegação principal (use <nav>), barras laterais com conteúdo secundário (use <aside>), rodapés (use <footer>).
Regras importantes:
Deve haver apenas uma tag <main> por página.
Ela não pode ser filha de tags como <article>, <aside>, <footer>, <header>, ou <nav>.
Em resumo, o uso de <main> é uma parte vital do HTML semântico. Adotá-la em todos os seus projetos é uma prática que mostra profissionalismo e, mais importante, garante que sua página seja acessível e bem estruturada para todos os usuários e sistemas.
Google Sites
Report abuse