Tableless - Desenvolvimento inteligente com Padrões Web

30/09/2010
Client-Side

Sections: elemento nav – Parte 2

O elemento NAV agrupa blocos de links de um mesmo assunto ou links internos do website. Ele indica que um determinado bloco é um bloco de navegação.

Por

Se você não leu o primeiro artigo da série, é interessante que o faça agora.

O elemento

1
nav

representa uma seção da página que contém link para outras páginas ou partes do mesmo website. Resumindo:

1
nav

é uma seção de links de navegação.

Essa definição é muito mais complexa do que se imagina. A tag

1
nav

pode agrupar uma série de elementos que anteriormente faríamos com

1
div

. Nem todos os grupos de links da página precisam ser um elemento

1
nav

, mas apenas as seções que consitem em blocos principais. Imagine uma sidebar (agora descrito com a tag

1
aside

) com uma série de links, como por exemplo uma sidebar de um portal como o G1, R7, UOL e etc… Nestas sidebars é normal você encontrar os diversos links das diversas categorias de assuntos. Anteriormente, se quiséssemos agrupar por exemplo um Título e uma lista de links faríamos assim:



Esporte

Resolvia nosso problema de formatação. Poderíamos utilizar

1
div

que envolve o título e a lista para fazer algum detalhe visual e etc. Mas a nível de informação, não havia nenhuma indicação de que o título estivesse ligado ao conteúdo. Não há nenhuma referência de que o título ESPORTE apresenta a lista de links sobre esporte abaixo. Os sistemas de busca não podem se basear apenas na posição dos elementos, é algo muito genérico para eles confirmarem que a lista e o título que a precede estão ligados em um mesmo assunto.
Com o HTML5, isso muda. Veja o código abaixo:

Com a tag

1
nav

, há uma indicação de que aquele grupo é uma seção (

1
nav

é um tipo de

1
section

. Enquanto a tag

1
section

serve para indicar seções no site, a tag

1
nav

indica que um determinado grupo é uma seção de navegação) é um bloco de navegação.

Dentro da

1
nav

você pode agrupar uma série de listas de links.

A tag

1
nav

também pode estar em todos os elementos do HTML. Você pode colocá-la no

1
header

para definir menus, no

1
footer

para definir grupos de links, sidebars, articles e etc.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://www.tkp.com.br Thiago

    Muito legal, com a tag nav fica muito mais pratico e lógico…..

  • http://www.camilabianchi.com Camila

    Olá,
    Estou gostando muito dessa série de artigos. Bem esclarecedores!
    Parabéns!

  • Pingback: Tweets that mention Entendendo o elemento NAV do HTML5 | Boas práticas de Desenvolvimento com Padrões Web -- Topsy.com

  • Fred

    Quando o HTML 5 estiver mais consolidado, com certeza as informações serão muito úteis. Talvez no início seja um pouco mais demorado de aplicá-las pelo fato de ser uma inovação, mas provavelmente tratá um bom retorno em relação aos engenhos de busca.

    Belo artigo!

    Abraços.

  • http://twitter.com/brunogama Bruno Gama

    Bom post, eu ainda estou brigando pra escrever html5 semântico, passo tempo todo com o TextMate aberto e outro navegador no paper da w3c lendo os tipos de elementos, espero que não de muito pau no IE neste novo projeto.

  • http://www,websocorro.com.br Diogo

    Muito bom o artigo sobre navegação com HTML5, com a nova semântica da linguagem as tags terão maior poder de indexação, os leitores de tela mais precisão de renderização do conteúdo, aumentando a acessibilidade e usabilidade da aplicação Web.
    Parabéns pelo artigo!

  • charles lins

    Muito bom estes artigos.
    Venho os acompanhando e sempre a espera do próximo.

    Acredito que seria interessante colocar uma imagem, figura ou qualquer grafismo indicando se o tal podem ser implementado já, com os atuais browser.

  • http://www.ogenial.com.br Lucas Schirm

    Muito interessante, sinceramente não vejo muita diferença entre estas tags e a boa e velha div, mas se é para usar.

  • Luis

    Muito boa a explicação talvez com essas dicas vão começar a aparecer sites mais bem organizados semantivamente.

  • Frank

    Diego muito bom post! Mas tenho uma dúvida!já podemos desenvolver em HTML5, como estão os navegadores em relação ao HTML5? Ainda há problemas de compatibilidade se é q posso dizer assim! :) parabens pelo artigo.

  • Jonathan

    Gostei muito do post deu de ver a aplicação de HTML5 na pratica, me questiono o seguinte: o potecial dessas novas tags serem semanticamente relevatentes é tão grande quanto o potecial da má utilização dessas, será que não vai se criar um novo tipo de “meta keywords”?

  • Rafael Martins

    Mesmo ainda não adotando o HTML5 definitivamente (por razões óbvias), as dicas aqui postadas servem da mesma forma, aplicando em DIVs normais e nomeando elas de uma forma a lembrar o HTML5 (não é a mesma coisa, mas ajuda né…).

    Vamos nessa que é bom a bessa, tomara que a MS tenha sucesso em matar o IE6.

    Sugiro que, nos sites que vcs fizerem, vc proponham aos clientes inserir uma página com sugestão de atualização de navegador, (com link na primeira página) com uma explicação simples para os usuários e um link para o download de pelo menos 4 ou 5 opções de navegador…
    Eu já estou fazendo assim e os clientes estão aceitando tranquilamente.

    Espero que chegue logo o fim do ano pra sair a versão “pronta” do IE9 para ter como opção para quem gosta.

    Abraços.

  • http://www.brulipe.com.br Bruno Felipe

    Muito legal. Essas coisas simples sempre passam despercebidas. Mas é bom saber que existe essa tag. Deixa o código bem limpo e lógico.

  • http://w21studio.com Natanael

    Sem contar que com a tag nav fica mais fácil de otimizar o site para os buscadores. Alias, não só com essa tag, mas com o html 5 inteiro.

    Sem contar que fica logico a marcação.