{"id":1675,"date":"2010-12-16T09:19:07","date_gmt":"2010-12-16T11:19:07","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=1675"},"modified":"2010-12-16T09:19:07","modified_gmt":"2010-12-16T11:19:07","slug":"como-usar-o-elemento-nav-do-html5","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/html\/como-usar-o-elemento-nav-do-html5","title":{"rendered":"Como usar o elemento NAV do HTML5"},"content":{"rendered":"

\"Elemento
\nUma das novidades da Linguagem HTML5<\/a> \u00e9 fornecer aos desenvolvedores de web um conjunto padronizado de estruturas sem\u00e2nticas e tornando a linguagem HTML muito mais inteligente.<\/p>\n

O elemento nav<\/code> da HTML5 representa uma se\u00e7\u00e3o de uma p\u00e1gina com links para outras p\u00e1ginas do site ou para determinadas partes da mesma p\u00e1gina<\/strong>. Esse elemento nada mais \u00e9 que uma se\u00e7\u00e3o com links de navega\u00e7\u00e3o. Nem todos os grupos de links, em uma p\u00e1gina, precisam estar dentro do elemento nav<\/code>, somente se\u00e7\u00f5es que consistem em blocos de navega\u00e7\u00e3o principais s\u00e3o adequadas para o elemento nav<\/code>.
\n
\nAtualmente os desenvolvedores utilizam divs para criar blocos de navega\u00e7\u00e3o, e isso n\u00e3o pasa nenhum valor sem\u00e2ntico aos mecanismos de busca. Pela l\u00f3gica o poder de indexa\u00e7\u00e3o ser\u00e1 ainda maior com os novos elementos HTML5. Isso tudo por causa da sua estrutura mais sem\u00e2ntica<\/strong>. Outra vantagem ser\u00e1 para os leitores de tela.<\/p>\n

Aplicando o elemento NAV<\/H2><\/p>\n

Voc\u00ea pode utilizar o elemento nav<\/code> em qualquer lugar do seu site. Dentro do elemento header<\/code>, footer<\/code>, section<\/code>, etc.<\/p>\n

Caso voc\u00ea tenha em seu site uma sidebar com uma lista de links para outros sites esses n\u00e3o precis\u00e3o ser marcados com o elemento nav<\/code>. O elemento nav<\/code> n\u00e3o deve ser usado em links mencionados em um par\u00e1grafo de conte\u00fado e tamb\u00e9m em links no rodap\u00e9 do tipo “site criado por…”. Apenas aqueles grupos que cont\u00e9m links importantes devem ser englobados por esse elemento.<\/p>\n

Forma tradicional de marca\u00e7\u00e3o para blocos de navega\u00e7\u00e3o.<\/p>\n

\r\n<div id="navegacao">\r\n  <ul>\r\n\t<li><a href="index.html">Home<\/a><\/li>\r\n\t<li><a href="sobre.html">Sobre<\/a><\/li>\r\n\t<li><a href="blog.html">Blog<\/a><\/li>\r\n  <\/ul>\r\n<\/div>\r\n\r\n<\/pre>\n
Utilizando o elemento nav<\/code>.<\/p>\n
\r\n<nav id="nav-principal">\r\n  <ul>\r\n\t<li><a href="index.html">Home<\/a><\/li>\r\n\t<li><a href="sobre.html">Sobre<\/a><\/li>\r\n\t<li><a href="blog.html">Blog<\/a><\/li>\r\n  <\/ul>\r\n<\/nav>\r\n<\/pre>\n
Sempre quando falamos de HTML5 \u00e9 importante ressaltar que as especifica\u00e7\u00f5es da linguagem n\u00e3o foram completamente definidas ainda.<\/p>\n
Onde podemos aplicar esse elemento<\/H2><\/p>\n
At\u00e9 o presente momento a especifica\u00e7\u00e3o diz que o elemento nav<\/code> deve ser utilizado em qualquer lugar que voc\u00ea considera ser a principal forma que o usu\u00e1rio navega no seu site, como por exemplo:<\/p>\n
\n