.png)
Estrutura semântica básica
Primeiro, vamos nos concentrar em Header, Main e Footer.
Header (cabeçalho) - <header>
A tag header é mais comumente usada para envolver a barra de navegação de um site. No Client-First, provavelmente adicionaremos essa tag ao nosso nav_component ou a um equivalente.
Mas, ela também pode especificar o cabeçalho de uma seção ou um artigo.
Ambas abordagens estão corretas.
De acordo com a W3Schools, podemos ter mais de uma tag <header> em uma página. No entanto, um <header> não pode ser colocado dentro de um <footer>, <address> ou outro elemento <header>.
O uso de <header> é flexível e usado de forma diferente em todo o web.
Se inspecionarmos outros sites, veremos que alguns desenvolvedores usam a tag header apenas na navbar (barra de navegação), enquanto outros usam a tag header várias vezes.
Por exemplo, se olharmos para um artigo no site usa.gov, veremos que cada cabeçalho (<h1> - <h6>) é envolvido com uma tag header.
Se olharmos para as páginas de artigos da UE, veremos que apenas o cabeçalho é usado apenas para envolver a barra de navegação.
Main (principal) - <main>
A tag main define o conteúdo principal de nossa página. Na maioria das páginas, a tag <main> é usada para envolver o conteúdo "principal" da página. É geralmente tudo entre o <header> e o <footer>.
O conteúdo dentro do elemento <main> deve ser exclusivo para a página.
- O <header> e <footer> não devem ser incluídos dentro da tag <main>.
- A tag <main> não deve conter nenhum conteúdo que seja repetido em várias páginas, como barras laterais, links de navegação, informações de direitos autorais, logos do site, formulários de pesquisa ou consentimento de cookies.
As tags mais comuns que veremos dentro do <main> são seções e artigos.
Em Client-First, adicionamos a tag <main> à nossa classe main-wrapper.
Elementos de seccionamento
Section (seção) - <section>
A tag <section> é usada para dividir nossa página da web em seções.
As sections devem sempre ter um Heading, salvas poucas exceções.
Na maioria dos casos, teremos várias seções em nosso main.
Aqui está um exemplo simples de um site dividido em seções.
Observe que também podemos ter seções dentro de uma tag de artigo e vice-versa. Podemos até ter seções dentro de seções.
Article (artigo) - <article>
A tag <article> especifica um conteúdo independente e auto-suficiente.
Um artigo deve fazer sentido por si só, e deve ser possível distribuí-lo independentemente do restante do site.
Um equívoco comum é usar as tags <article> apenas em postagens de blog.
Podemos usar a tag <article> em qualquer um dos seguintes casos:
- Postagem de fórum
- Revista
- Artigo de jornal
- Artigo de blog
- Cartão de produto
- Comentário enviado pelo usuário
- Widget ou gadget interativo
- ou qualquer outro item independente de conteúdo.
Aside (à parte) - <aside>
A tag <aside> define algum conteúdo "à parte" do conteúdo principal.
O conteúdo do aside deve se relacionar com o conteúdo ao redor do site.
Use a tag <aside> para envolver:
- Barras laterais relacionadas à página
- Links relacionados
- Conteúdo relacionado
- Anúncios (ads)
- Índices
O elemento aside deve estar dentro do elemento de seção relacionado. Isso significa que, se nosso aside estiver relacionado a uma section, ele deve estar dentro dessa seção.
Se nosso aside estiver relacionado à página inteira, coloque-o fora de qualquer tag de section. Por exemplo, poderíamos colocá-lo ao lado do <main>.
Headings - <h1> - <h6>
Os elementos h1 até h6 representam seis níveis de cabeçalhos de seção. <h1> é o nível de seção mais alto e <h6> é o mais baixo.
Use apenas um h1 por página.
O <h1> deve ser o título da nossa página.
Quando um usuário acessa nosso site e lê o Heading <h1>, ele deve entender do que se trata a página. Nosso <h1> deve ser descritivo e claro.
Aninhando Headings
Use a tag <h2> para cobrir subtópicos do nosso <h1>.
Use a tag <h3> para cobrir subtópicos do <h2> e assim por diante.
Usuários com screen-readers (leitores de tela) muitas vezes saltam de Heading para Heading para entender nossa página.
Por causa disso, é essencial não pular níveis de Heading. Pular um nível de Heading pode criar confusão, pois a pessoa que navega dessa forma pode se perguntar onde está o Heading que falta.
Figuras, endereços e outros.
Address (endereço) - <address>
A tag <address> especifica informações de contato para o autor/proprietário de uma página ou artigo.
Podemos ter mais de uma tag <article> em uma página.
Se colocarmos a tag <address> dentro de um <article>, ela se refere ao artigo.
Quando a tag <address> é colocada fora de um artigo, ela se refere à página inteira.
Por exemplo, se incluirmos o endereço da nossa empresa no rodapé, a tag <address> se referirá à página inteira (documento).
Figure (figura) - <figure>
A tag <figure> especifica conteúdo autocontido, como ilustrações, diagramas, fotos, listagens de código, etc.
Embora o conteúdo do elemento <figure> esteja relacionado ao fluxo principal, sua posição é independente do fluxo principal. Remover uma figura não deve afetar o fluxo da página.
Podemos ter notado que a tag <figure> é automaticamente adicionada em torno de qualquer imagem ou vídeo de Rich Text quando adicionamos uma descrição.
Podemos usar essa tag para envolver imagens quando acharmos adequado.
Observe que a tag <figure> não é tão importante para acessibilidade e SEO quanto adicionar alt text (texto alternativo) ao conteúdo visual.
Cloneable do HTML Semântico
Desenvolvemos um cloneable que destaca as tags HTML semânticas dentro de um projeto Webflow. O projeto clonável nos ajuda a visualizar o uso correto das tags semânticas HTML.