Semântica HTML5

O HTML5 trouxe consigo diversos novos elementos com o intuito de melhorar a semântica do código do site. Visualmente identificamos os elementos de cabeçalho, menu, corpo e rodapé do site pelo posicionamento, tamanho de fonte e outras características, mas os robôs de busca não analisam características visuais e sim os elementos utilizados no seu código fonte. Com os novos elementos do HTML5 temos Tags específicas para marcarmos essas sessões do site para que os robôs indexem de maneira mais precisa os conteúdos.

Para fazermos essa marcação utilizaremos as tags <section>, <header>, <nav>, <article>, <footer>, <aside>, entre outras, cada uma com seu significado semântico para o código.

Section

A Tag <section> determina sessões específicas espelhadas pelo site como é o caso de uma sessão de login, posts de um blog, galeria de imagens, etc.

                    	

mais projetos

  • Thumbnail da Interface do Projeto Escola Paulista - Site Institucional
  • Thumbnail da Interface do Projeto Elgin Abaixo de Zero - Hotsite Teaser
  • ';
  • Thumbnail da Interface do Projeto GJG Comunicação - Site Institucional
  • ';
  • Projeto 4Fun Timing - Banner Interativo
  • ';
  • Thumbnail da Interface do Projeto Netbox Informática - Site Institucional
  • ';

Header

A Tag <header> determina os elementos que pertencem ao cabeçalhos do site em geral e, como utilizado aqui no site, para cabeçalhos de sessões como um post, onde criamos um novo <header>, <article> e <footer> para marcarmos os elementos desse post.

                    	
                    

Nav

A Tag <nav> determina os itens de navegação, como os intes do menu.

                    	
                    

Article

A Tag <article> determina o corpo do site ou, como o <header> e <footer>, o corpo de sessões específicas espelhadas pelo site.

                    	
...

Footer

A Tag <footer> determina elementos que compõe o rodapé do site ou, assim como as tags <header> e <article>, determina elementos do rodapé de sessões específicas como o rodapé de um post, com os comentários por exemplo.

                    	
                    

Aside

A Tag <aside> define conteúdos adicionais a página atual.

                    	
                    

Conforme novos elementos ou técnicas semânticas forem sendo integrados ao site essa página será atualizada.