Loading…

Tags Semânticas

Autor: Neyvá Conceição de Lucas Junior

Olá, hoje vou falar um pouco sobre tags semânticas. Todo dia sites são publicados, e uma grande parte deles sem um padrão de nomenclatura de classes e ids úteis para extrair informação de maneira inteligente. Visualmente identificamos os elementos de cabeçalho, menu, corpo e rodapé do site pelo posicionamento, tamanho de fonte e outras características, mas as máquinas não analisam elementos visuais e sim os elementos utilizados no seu código. O HTML5 trouxe novos elementos com o intuito de melhorar a semântica do código, temos tags específicas para marcarmos sessões do site para que as máquinas indexem de maneira mais precisa os conteúdos.

Utilizaremos as tags section, header, nav, article, footer, aside e adress para fazermos nossa marcação, cada uma com seu significado semântico para o código.

A tag header é usada para representar um grupo de ajuda introdutória ou navegação. Geralmente um elemento header pretende possuir o título da seção, mas isso não é obrigatório.

A tag nav é usada para representar a seção de uma página que aponta para outras páginas ou para partes dentro da página: uma seção com links de navegação.

A tag article é usada para representar um componente de uma página que consiste em uma composição de conteúdo próprio em um documento. Pode ser: postagem em um fórum, um artigo de uma revista ou jornal, o comentário de um usuário, um widget ou gadget interativo, ou qualquer outro item independente de conteúdo.

A tag aside é usada para representar a seção de uma página que consiste em conteúdo que é relacionado ao conteúdo em torno dele, e o qual pode ser considerado separado daquele conteúdo. São frequentemente representadas como barras laterias.

 

A tag address contém informações de contato com o autor ou dono do documento.

 

A tag footer é usada para representar um rodapé para a seção de conteúdo mais próxima.

 

A tag section é usada para representar uma seção genérica de um documento ou aplicação, ou seja, um agrupamento de conteúdo, geralmente com um título. Ex: capítulos, páginas em abas de uma caixa de diálogo, as seções numeradas de uma tese, uma sessão de login, posts de um blog, galeria de imagens, etc.

Espero que tenham gostado e que tenham entendido a importância de se utilizar as tags semânticas, até a próxima.