Navegação semântica com HTML 5
Publicado em: 2009-10-5 — 40.151 visualizacoes
Um dos novos elementos introduzidos pela HTML 5 é o elemento nav destinado a agrupar links e que tem por finalidade criar uma marcação semântica e adicionar estrutura adequada aos leitores de tela. Neste artigo discutirei como e onde usar este novo elemento bem como meu ponto de vista com relação ao que preconiza a especificação.
A primeira vista o uso do elemento nav se parece bem simples. Mas, embora seja muito fácil o seu uso, eu considero a sua especificação pouco esclarecedora; deixando por conta do desenvolvedor uma série de decisões. Assim, Hixie, o editor da HTML 5 alterou a definição do elemento nav.
Como usar o elemento <nav>
Você provavelmente tem usado uma marcação como a mostrada a seguir
<div id="nav"> <ul> <li><a.... etc
Ou
<ul id="mainNav">
Muito bem, não houve grande mudança na marcação que você já conhece e agora temos algo como mostrado a seguir
<nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/blog/">Blog</a></li> </ul> </nav>
A especificação
A especificação da HTML 5 define o elemento nav assim:
O elemento
navrepresenta uma seção da página contendo links para outras páginas ou para determinadas partes da mesma página, ou seja, uma seção contendo links para navegação. Nem todos os grupamentos de links em uma página precisam estar contidos em um elementonavpois somente seções contendo a navegação principal são apropriadas para marcação com o elementonav. Em particular podemos citar o caso dos rodapés nos quais é comum haver links para algumas página do site, contudo o elementofooteré, nestes casos, mais apropriado não havendo necessidade do uso do elementonavpara marcar tais links.
A palavra-chave na definição acima é “navegação principal ” (conhecida como navegação primária).
Vamos examinar o exemplo constante da especificação – “No exemplo a seguir existem vários lugares na página contendo links, mas somente um destes lugares é considerado uma seção de navegação.”
<body> <header> <h1>Wake up sheeple!</h1> <p><a href="news.html">News</a> - <a href="blog.html">Blog</a> - <a href="forums.html">Forums</a></p> <p>Last Modified: <time>2009-04-01</time></p> <nav> <h1>Navigation</h1> <ul> <li><a href="articles.html">Index of all articles</a></li> <li><a href="today.html">Things sheeple need to wake up for today</a></li> <li><a href="successes.html">Sheeple we have managed to wake</a></li> </ul> </nav> </header> <article> <p>...page content would be here...</p> </article> <footer> <p>Copyright © 2006 The Example Company</p> <p><a href="about.html">About</a> - <a href="policy.html">Privacy Policy</a> - <a href="contact.html">Contact Us</a></p> </footer> </body>
Eu acho que este exemplo é confuso. Existem seis itens de navegação no elemento header, mas somente três deles foram marcados com o elemento nav. Não existe uma explicação para o por quê diferenciar os três primeiros links dos três últimos – todos eles apontam para páginas diferentes da atual e do mesmo site.
A especificação fornece ainda um segundo exemplo:
<body> <h1>The Wiki Center Of Exampland</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/events">Current Events</a></li> ...more... </ul> </nav> <article> <header> <h1>Demos in Exampland</h1> <nav> <ul> <li><a href="#public">Public demonstrations</a></li> <li><a href="#destroy">Demolitions</a></li> ...more... </ul> </nav> </header> <section id="public"> <h1>Public demonstrations</h1> <p>...more...</p> </section> <section id="destroy"> <h1>Demolitions</h1> <p>...more...</p> </section> ...more... <footer> <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p> </footer> </article> <footer> <p><small>© copyright 1998 Exampland Emperor</small></p> </footer> </body>
Este exemplo me parece um pouco mais esclarecedor já que o uso do elemento nav foi decidido para aqueles links considerados como da navegação principal.
Onde usar o elemento nav?
Se você examinar o código fonte do site html5doctor.com vai notar que o elemento nav foi usado em três lugares (ou quatro quando se trata de páginas contendo navegação para paginação) – nós usamos o elemento nav para marcar a navegação principal e a navegação existente acima do rodapé (ambas contêm os mesmos links). Nós decidimos usar também para os links tipo "skip links" existentes para cumprir questões relacionadas à acessibilidade.
Inspecionando o conteúdo do site é lícito concluir que deveríamos ter usado o elemento nav, também, nos links para "Recent Articles" e "Categories" contidos na barra lateral do site. E você, usaria o elemento nav ali? Minha opinião é que fica difícil decidir sobre a marcação daqueles links tendo em vista o que preconiza a especificação – contudo devo dizer que naqueles casos não se trata de "navegação principal", mas reconheço que há argumentos para considerá-la assim.
Outros possíveis usos
A seguir relacionamos alguns exemplos de áreas de um site às quais podem ser consideradas como próprias para uso do elemento nav. é importante notar que na HTML 5 não foi adotado o elemento nl da XHTML 2 porque a navegação não precisa necessariamente assumir a forma de uma lista como veremos a seguir.
- índice (ou tabela de conteúdos)
Definitivamente trata-se de navegação primária para conteúdos particulares. - Anterior/próximo (ou paginação)
Sim, porque trata-se de navegação importante para a estrutura geral e hierarquia do blog/site
- Formulário de busca
Para mim sim, mas este caso não está mencionado na especificação. A busca se constitue em um importante mecanismo de navegação de um site, particularmente em sites grandes que dependem quase que exclusivamente de um mecanismo de busca interno.
- Navegação em migalhas
Aqui também para mim é sim. Embora a navegação em migalhas não seja sempre necessária, para sites grandes se constituem em um mecanismo poderoso de ajuda à navegação.
A diferença entre nav e menu
Se você não estiver atento, um outro novo elemento da HTML 5 pode trazer confusão – o elemento menu. Eu notei que alguns desenvolvedores estão usando o elemento menu em lugar do elemento nav para marcar a navegação. Convém então esclarecer que o elemento menu destina-se a marcar uma lista de comandos e é um elemento interativo para uso em Aplicações Web.
Concluindo…
Somente com a contribuição da comunidade e uma especificação mais clara nós teremos indicações seguras de quando usar, e, talvez mais importante, quando não usar o elemento nav .
Créditos:
Author: Tom Leadbetter
URL do artigo original: http://html5doctor.com/nav-element/
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2009-10-5 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2009/10/05/navegacao-semantica-com-html-5/trackback no seu site.
[…] O principal objetivo é retirar essa responsabilidade das divs. Tendo como principal diferencial a navegação semântica com HTML 5. Digamos que na sua página inicial você tenha três chamadas principais: Clientes, Serviços e […]
[…] Você provavelmente tem usado uma marcação como a mostrada a seguir view source […]
Sinceramente gostaria de saber a funcionalidade deste novo elemento. Não sei se isso aparece em alguma imagem, pois sou pessoa com deficiência visual. Na prática, é audível uma lista de itens para se fazer um menu de navegação. Quando passo por uma lista de itens de um menu de navegação, meu leitor de tela – uso o Jaws – sonoriza “lista de itens com “999” itens. Dessa forma essa semântica é útil para a acessibilidade de sites para pessoas com deficiência porque, além de me informar da existência da lista, também o faz quanto a quantidade de itens que vou encontrar na continuidade de minha navegação. Para quem enxerga isso é óbvio, basta olhar quantos itens existem, mas para a maioria dos usuários de leitores de tela é como se fosse uma visão ampliada do que se vai seguir. Tem outras vantagens: se eu teclar a letra “l” meu leitor leva o cursor diretamente para a primeira lista que encontrar, se teclo “i” ele vai direto ao primeiro item de lista. Dessa forma, as listas possuem em sua semântica um padrão de organização e funcionalidades óbvias e úteis. Se é para garantir a semântica e somente isso, possuirá lugar nos padrões como documentação e organização de códigos, mas se não existir, além disso, uma funcionalidade prática (desculpem-me a redundância aparente), ficará um acréscimo semântico complicador e não simplificador do código. Afinal, o que o NAV cria de novo, executa de novo?
Quanto ao amigo que perguntou quanto ao H1 existir duas vezes, creio que deve ser porque eram exemplos distintos, não? Para a acessibilidade web, que é a minha praia, todo h1 serve para destacar o título de um site, portanto deveria haver um h1 em cada página de cada site informando o título do mesmo, o mesmo título, claro. O h2 serve para o título de páginas internas e, na principal, para as divisões do site, h3 deveria ser para o título de artigos ou de seções de um mesmo artigo. Em alguns leitores de tela eu teclo a letra “H” e navego de h em h do código que, estando semântico, ou seja, o H sendo utilizado somente para títulos (cabeçalhos), eu navegaria com conforto de h em h. Como tem gente que utiliza o h para destacar links dentro de menus, a semântica vai para o brejo e minha navegação junto!
Abraços acessíveis do MAQ.
Olá Maujor tudo bem?
Cara estou procurando muito sobre o HTML 5 e observei umas coisas que não gostei muito, como você mostra no exemplo acima eu usava direto sem a necessidade de estava fazendo de tudo para deixar o cod mais enxuto o possivel e agora com o HTML 5 vem acrescida de umas tag’s que não tem grandes funcionalidades a não ser esruturar a semântica do conteúdo, por exemplo agora vou ter que acrescentar muito mais tags como …No meu ponto de vista, vai ser uma batalha dura para que usa muitas divs os codigos vão sobrecarregar não acha? a ideia era facilitar o carregamento ou facilitar a semantica?
Eu procuro utilizar o minimo de divs possiveis, acredito que não vai sobrecaregar meus documentos, mas sabemos que a maioria dos desenvolvedores utilizam ainda até tabelas.
Uma observação nos exemplo que notei foi a sua utilização do h1, você utilizou ele em dois momentos no mesmo documento, eu procuro utilizar somente um por página, você sabe se tem alguma recomendação sobre a utilização?
[…] Navegação Semântica com HTML 5 – Blog do Majour […]
Trambulhão
A tabela publicada em http://zip.li/20L0 está certa.
O elemento
bignão faz parte da HTML5.O elemento
smallcontinua, mas em HTML5 tem um valor semântico diferente da HTML4. Ele se destina a marcar pequenas anotações complementares de um texto.Reparei que o elemento big está marcado como não suportado no html5, está correto?
Sendo verdade, o elemento small não deveria também estar marcado?
Mais uma vez, parabéns.
Obrigado Maujor
O html é uma linguagem que nunca vai sair de moda, pois em todas outras linguages ou modelos voce precisa dela, pode ate ser pouco mais precisa do basico em html…
http://www.liberdaderadical.com.br
Assim como o prêmio Nobel da Paz, Maujor deveria ser premiado
como Premio Nobel de Ensino ou alguma coisa do gênero!
O site do Maujor e seu blog possuem vasto conteúdo de qualidade,
servindo de alicerce para muitos profissionais, o mais incrível é que Maujor ensina porque tem prazer em ensinar. Quem dera nossas universidades e núcleos de ensino tivessem pessoas com este calibre! Parabéns Maujor, sinceramente um dos melhores sites da web
No entando eu já usava o elemento “nav” para navegações principais. Agora que sei que servem para outras partes. Bem legal o conteúdo do blog, já acompanho o site há alguns anos. Continue assim!
Que tela é esta que esta usando para editar seu código ?
ALgum programa especifico ?
Grato ! Aguardo Resposta por aqui ou por email !
parabens, otimo post
Fernanda
Ola maujor acompanho seu site e blog faz um bom tempo, e gosto muito. Minha duvida é o seguinte: Quando começar a usar HTML5? Qual é melhor HTML5 ou XHTML2? CSS3 pode começar a ser usada sem preocupação?
gostaria de aliar HTML5 + Microformatos + CSS3 mas tenho receito pois não sei se os navegadores atuais våo aceitar isso, curto muito a ideia de semantica, mas as vezes fica dificil, principalmente com a porcaria do IE.
Eu sinceramente não entendi a diferença entre o e o NAV e o MENU
Olá, vim conhecer seu blog,e desejar boa semana
bjs
aguardo sua visita 🙂
É o HTML camnihando para uma maneira mais semântica. No entanto a muita coisa a se considerar pois no primeiro exemplo algumas ancoras ficaram de fora da marcação
nav. Estes link seriam, os links auxiliares.Realmente não é a navegação principal, mais é um tipo de navegação. Talvez devesse ter uma marcação também. Já que a marcação
navé apenas para a navegação principal.E a navegação do contexto? Ao estamos em uma categoria por exemplo e tivermos que exibir os itens daquela categoria teriamos uma navegação para a exibição. Que maração receberiam estes itens?
Não aguento mais esperar o “lançamento oficial” do HTML5 e CSS3. São muitas tecnologias boas, que quero usar bastante hehe!
Valeu Maujor.
Trazendo essa questão para a minha realidade. Deveríamos utilizar a marcação nav tanto na lista de Categorias quanto no Blogroll (falando do wordpress) ? Como especificaríamos qual a navegação principal do site ? Há casos em que colocamos as Categorias, o Blogroll e ainda as Páginas do site.
Estou ‘viajando’ ou essa questão é válida ?
Excelente! O HTML cada vez mais inteligente. 🙂
Eu já li este texto no HTML5Doctor, mais uma opinião do Maujor sempre é valida.