Semântica da tag <nav>

João Batista Neto · Abril 11, 2012

Bruno, sua implementação ficou legal, mas deixa eu fazer uma pergunta importante:

Qual foi a motivação para usar nav?

Segundo a especificação, nav é para a navegação principal, então <nav class="main-nav"> é, no mínimo, redundante. Além disso, nav é para agrupar links de navegação, então a lista não ordenada também é desnecessária.

A forma correta de nav é a seguinte:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Repente CSS</title>
</head>
<body>
	<nav>
		<a href="#home">Home</a>
		<a href="#game">Game</a>
		<a href="#historia">História</a>
		<a href="#dicas-e-detonados">Dicas e Detonados</a>
		<a href="#estrategias">Estratégias</a>
	</nav>
</body>
</html>

;)

brunobispo · Abril 11, 2012

Bruno, sua implementação ficou legal, mas deixa eu fazer uma pergunta importante:

Qual foi a motivação para usar nav?

Na minha interpretação da especificação, a tag nav é usada para marcar menus semanticamente.

Ao mesmo tempo, compreendendo a possibilidade desse menu se repetir pela página (como na header e na footer, por exemplo), usei a classe main-nav para identificar este independentemente de suas condições na marcação.

E nav tem, principalmente, função semântica. Agrupar, seja tags a sequenciais, seja uma listagem com a tag ul, é necessário, uma vez que nav se comporta, graficamente, apenas como um bloco.

http://www.w3.org/wiki/HTML/Elements/nav

João Batista Neto · Abril 11, 2012

Na minha interpretação da especificação, a tag nav é usada para marcar menus semanticamente.

Marcar semanticamente blocos de navegação principal, a tag menu é usada para marcar semanticamente blocos de ação ou comandos.

Ao mesmo tempo, compreendendo a possibilidade desse menu se repetir pela página (como na header e na footer, por exemplo), usei a classe main-nav para identificar este independentemente de suas condições na marcação.

Okay,

Not all groups of links on a page need to be in a nav element.

The nav element is appropriate only for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.

E nav tem, principalmente, função semântica. Agrupar, seja tags a sequenciais, seja uma listagem com a tag ul, é necessário, uma vez que nav se comporta, graficamente, apenas como um bloco.

http://www.w3.org/wi...ML/Elements/nav

Ainda falando sobre semântica: Como nav é apropriada para seções que consistem em blocos de navegação principal, o nome "main-nav", usado na classe CSS é, semanticamente, redundante.

Mas enfim, a pergunta nem foi com o propósito de criticar, a ideia era apenas deixar claro para outros membros o propósito dessa nova tag.

;)

brunobispo · Abril 11, 2012

Marcar semanticamente blocos de navegação principal, a tag menu é usada para marcar semanticamente blocos de ação ou comandos.

Eu não disse "tag menu". Me referi aos chamados menus, os quais estariam inseridos na tag nav.

Not all groups of links on a page need to be in a nav element.

The nav element is appropriate only for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.

Na minha interpretação, esse trecho fala exatamente sobre esses "menus" dos sites.

PS.: "main-nav" de navegação principal (ou menu principal), aquele que você colocaria as principais sessões do site.

Ainda falando sobre semântica: Como nav é apropriada para seções que consistem em blocos de navegação principal, o nome "main-nav", usado na classe CSS é, semanticamente, redundante.

Não é redundante, mas menos dependente da marcação. Em qualquer momento você poderá reavaliar e melhorar a marcação sem sacrificar a estilização.

Mas enfim, a pergunta nem foi com o propósito de criticar, a ideia era apenas deixar claro para outros membros o propósito dessa nova tag.

Claro que não estou ofendido. Acho completamente saudável discutir o que é mais correto.

João Batista Neto · Abril 11, 2012

Eu não disse "tag menu". Me referi aos chamados menus, os quais estariam inseridos na tag nav.

Sim, eu entendi o que você disse, mas eu também me referi à nova tag <menu> pois, apesar de serem comandos, também se trata de um menu de opções; E é justamente essa separação semântica, onde a navegação principal pode contar com <nav>, blocos de ações pode contar com <menu> e outras seções que não são de navegação principal podem contar com uma lista não ordenada que fazem a diferença em uma marcação semântica.

Não é redundante, mas menos dependente da marcação. Em qualquer momento você poderá reavaliar e melhorar a marcação sem sacrificar a estilização.

Talvez por front-end não ser minha área, eu pense de forma totalmente diferente, mas se eu tiver que sacrificar alguma coisa, sacrificarei o estilo. Eu jamais sacrificaria a marcação, pois normalmente ela é gerada por uma aplicação com um nível de complexidade muito maior. Por outro lado, é muito mais simples eu ter várias folhas de estilo, ou modificá-las se for o caso para casos de uso diferentes.

Meu ponto de vista é que a marcação deve ser desacoplada do estilo e comportamento, permitindo que a marcação de uma GUI possa variar livremente, independente do seu estilo, comportamento ou dispositivo utilizado na renderização.

Claro que não estou ofendido. Acho completamente saudável discutir o que é mais correto.

:D

William Bruno · Abril 11, 2012

a lista não ordenada também é desnecessária.

perfeito João. E nisso você adiantou um dos pontos da minha solução :lol:

brunobispo · Abril 11, 2012

Sim, eu entendi o que você disse, mas eu também me referi à nova tag <menu> pois, apesar de serem comandos, também se trata de um menu de opções; E é justamente essa separação semântica, onde a navegação principal pode contar com <nav>, blocos de ações pode contar com <menu> e outras seções que não são de navegação principal podem contar com uma lista não ordenada que fazem a diferença em uma marcação semântica.

Foi até legal você ter falado da tag menu para deixar claro que não estamos falando dela. Essa tem outra função semântica e obviamente não seria usada nesse Décimo Segundo Menu. Inclusive esta parece não ter qualquer suporte em qualquer browser atualmente (04/12).

Talvez por front-end não ser minha área, eu pense de forma totalmente diferente, mas se eu tiver que sacrificar alguma coisa, sacrificarei o estilo. Eu jamais sacrificaria a marcação, pois normalmente ela é gerada por uma aplicação com um nível de complexidade muito maior. Por outro lado, é muito mais simples eu ter várias folhas de estilo, ou modificá-las se for o caso para casos de uso diferentes.

Meu ponto de vista é que a marcação deve ser desacoplada do estilo e comportamento, permitindo que a marcação de uma GUI possa variar livremente, independente do seu estilo, comportamento ou dispositivo utilizado na renderização.

Acho que desacoplar, seja a lógica ou estilo, uma boa ideia. Embora talvez você não concorde que o meu exemplo está semanticamente correto, eu o fiz tentando ser. Até seria interessante que outros usuários também dessem, cada um, seu parecer sobre a especificação.

PS.: O primeiro exemplo da especificação da W3C que citei usa lista ordenada:

<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>

E exemplifico meu descontentamento com a solução sem lista, uma vez que sem estilo apresenta um formato completamente incorreto.

João Batista Neto · Abril 11, 2012

PS.: Inclusive, o primeiro exemplo da especificação da W3C que citei usa lista ordenada:

 <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>

Sim, mas perceba que antes da lista não ordenada, nesse exemplo da W3C, existe um h1, o que não ocorre no caso do 12º menu. Se houvesse, especificamente nesse décimo segundo menu, um título antes das opções, ai, talvez, a lista não ordenada fosse bastante adequada. Mas como não temos, a <nav> com os <a> para os links é suficiente.

;)

PS: A frase abaixo, em uma discussão sobre semântica, valeu o tópico inteiro pois ilustra bem o termo "semântica".

Foi até legal você ter falado da tag menu para deixar claro que não estamos falando dela.

William Bruno · Abril 11, 2012

E exemplifico meu descontentamento com a solução sem lista, uma vez que sem estilo apresenta um formato completamente incorreto.

em uma conversa sobre semântica, isso é oque menos importa.

vale lembrar que HTML é conteudo, e que toda a estilização é cargo do CSS.

Se sem CSS, o formato fica "incorreto", isso é oque chamamos de separar camadas =)

O importante é estar acessível.(do ponto de vista do html)

Pois se for levar essa tua frase a risca, então a tag <font> não deveria ter sido depreciada :lol:

João Batista Neto · Abril 11, 2012

vale lembrar que HTML é conteudo, e que toda a estilização é cargo do CSS.

Se sem CSS, o formato fica "incorreto", isso é oque chamamos de separar camadas =)

Eu costumo validar minha marcação segundo a legibilidade do conteúdo no lynx. Se o conteúdo fizer sentido e tudo estiver separado hierarquicamente como deveria ser, tanto no lynx quanto em qualquer outro navegador em texto puro, então tenho uma boa marcação.

brunobispo · Abril 11, 2012

Quero colocar minha ideia sobre a questão da semântica e as novas tags do HTML5:

Criar tags como nav, header ou footer foi para determinar o valor real das informações para aqueles que por algum motivo não veem a estilização ou que precisam, por outros meios que não visuais, compreender o conteúdo.

Semanticamente, pra mim, isso:

<body><h1>Minha Empresa</h1>
               <nav>
                       <a href="#home">Home</a>
                       <a href="#game">Game</a>
                       <a href="#historia">História</a>
                       <a href="#dicas-e-detonados">Dicas e Detonados</a>
                       <a href="#estrategias">Estratégias</a>
               </nav>
       </body>

Equivale a isso:

Minha Empresa
HomeGameHistóriaDicas e DetonadosEstratégias

Sim, sem espaços, já que quebras de linha não significam nada.

Ou seja, em nenhum lugar foi determinado que se trata de uma listagem. Semanticamente, isso é uma linha.

Entretanto, concordo que o seguinte formato é válido, mas não ideal:

<nav>
                       <a href="#home">Home</a> - <a href="#game">Game</a> - <a href="#historia">História</a> - <a href="#dicas-e-detonados">Dicas e Detonados</a> - <a href="#estrategias">Estratégias</a>
               </nav>

William Bruno · Abril 11, 2012

Ou seja, em nenhum lugar foi determinado que se trata de uma listagem.

exato, e não existe nenhum problema nessa abordagem.

nós Desenvolvedores é que nos "acostumados" a dizer que menus são listas. Mas quem disse que um menu é uma lista ? (não foi nenhuma especificação)

João Batista Neto · Abril 11, 2012

Minha Empresa

HomeGameHistóriaDicas e DetonadosEstratégias[/code]

Ou seja, em nenhum lugar foi determinado que se trata de uma listagem. Semanticamente, isso é uma linha.

Não, semanticamente falando, isso é uma navegação. O estilo é irrelevante, você está vendo a forma que o navegador renderiza e pensando que se trata de semântica.

Veja só:

Usando <nav> tanto com os <a> como filho direto, quanto tendo uma <ul> com várias <li> e os <a> como filho das <li>:

Como pode ver, em um navegador sem estilização, a exibição é a mesma nos dois casos. Já em um navegador como Firefox ou qualquer outro que tenha uma folha de estilo embutida, a exibição é a seguinte:

<nav> com <a> como filho direto:

<nav> com <ul>, <li> e o <a> como filho da <li>:

Essa diferença na exibição no navegador não se trata de semântica e sim de uma folha de estilos embutida no próprio navegador.

brunobispo · Abril 11, 2012

Não, semanticamente falando, isso é uma navegação. O estilo é irrelevante, você está vendo a forma que o navegador renderiza e pensando que se trata de semântica.

Não me referi à renderização, só tentei representar a interpretação do HTML.

Como sabemos, a tag a é do tipo linha e, claro, também tem seu valor semântico. Mas uma coisa ela não é: um bloco. Por mais que esse comportamento possa ser modificado com a estilização, a semântica não se modifica. Ela deve ser clara e acessível inclusive por leitores de tela.

Elementos li, pelo contrário, são blocos, o que também tem importante valor semântico: A separação. Como eu disse anteriormente, a simples quebra de linha (ao contrário da tag br) não é um elemento e não tem qualquer valor semântico.

Podemos usar como base essa outra especificação, bem mais completa: http://dev.w3.org/html5/spec/single-page.html#the-nav-element.

A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose

Embora pareça que o trecho acima contradiz o que eu digo, não é isso o que ele faz. Justamente por a tag nav ser flexível e permitir também outros formatos que não a lista, é que precisamos especificar claramente seu conteúdo. Pra isso temos as tags: p, dl, ul e etc. Nav não substitui qualquer uma delas, só especifica que ali contém um menu.

A especificação continua com o seguinte exemplo:

<nav>
<h1>Navigation</h1>
<p>You are on my home page. To the north lies <a href="/blog">my
blog</a>, from whence the sounds of battle can be heard. To the east
you can see a large mountain, upon which many <a
href="/school">school papers</a> are littered. Far up thus mountain
you can spy a little figure who appears to be me, desperately
scribbling a <a href="/school/thesis">thesis</a>.</p>
<p>To the west are several exits. One fun-looking exit is labeled <a
href="http://games.example.com/">"games"</a>. Another more
boring-looking exit is labeled <a
href="http://isp.example.net/">ISP™</a>.</p>
<p>To the south lies a dark and dank <a href="/about">contacts
page</a>. Cobwebs cover its disused entrance, and at one point you
see a rat run quickly out of the page.</p>
</nav>

Eu entendo que as coisas podem parecer iguais, visualmente falando, mas se falamos de semântica, as tags corretas devem ser usadas. Não deveriam ser facultativas, destinas somente aos sites que realmente se preocupam com deficientes, por exemplo, mas a todos, por padrão.

William Bruno · Abril 11, 2012

Ela deve ser clara e acessível inclusive por leitores de tela.

elementos de linha são acessíveis por leitores de tela.

Elementos li, pelo contrário, são blocos, o que também tem importante valor semântico: A separação.

"separação" não é "um valor semântico".

Aqui neste ponto, você está começando a confundir as coisas.

Como eu disse anteriormente, a simples quebra de linha (ao contrário da tag br) não é um elemento e não tem qualquer valor semântico.

exato. Quebra de linha não tem valor semântico.

A tag <br /> tem sim valor semântico.

brunobispo · Abril 11, 2012

Lamento minha falta de clareza.

elementos de linha são acessíveis por leitores de tela.

Eu não disse que não são acessíveis, eu quis dizer que é correto, por semântica, especificar que isso não é uma linha de texto comum.

"separação" não é "um valor semântico".
Aqui neste ponto, você está começando a confundir as coisas.

Obviamente, há valor semântico se isso altera a valor do conteúdo. O seguinte exemplo deve transmitir a preocupação com a separação do conteúdo e seu valor semântico:

Isso é uma <div>linha de texto e está</div> incorreto

exato. Quebra de linha não tem valor semântico.

A tag <br /> tem sim valor semântico.

Sim, como bem coloquei em parênteses.

Evandro Oliveira · Abril 11, 2012

Bem queria eu que essa discussão acalorada tivesse acontecido quando eu iniciei isso aqui.

Eu já estava levantando esse raciocínio desde o último post do João e compartilho da opinião do Bruno Bispo.

João, eu não sei em qual versão do lynx que você testou, mas aqui, utilizei a seguinte markup:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
	<meta charset="utf-8">
	<title>Título</title>
</head>

<body>
	<h1>Título</h1>
	<nav>
		<ul>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
		</ul>
	</nav>
</body>
<html>

e obtive a seguinte output:

É, inclusive, o comportamento esperado. Algum tipo de diferenciação entre os itens de lista, porque, não se esqueça, também temos listas ordenadas que deveriam apresentar alguma forma de separação. Mesmo que fosse um navegador modo texto, uma lista deveria ser exibida como se espera, independente de estilo. Podemos considerar, como adicional, o fato de um item de lista permitir uma marcação muito mais dinâmica dentro de si, como uma série de parágrafos ou formulários. Se não houvesse nenhuma forma de diferenciar cada item, como faríamos isso??

Peço ainda que instale um utilitário de leitura de tela como o ChromeVox ou você mesmo, faça um dump do markup que apresentou, sem as LI, e leia em voz alta, como se fosse um texto. Você notará uma série de palavras jogadas sem conexão alguma e sequer separação por vírgula!

Se você fizer um dump, verá que nem mesmo é possível distinguir quais palavras pertencem a qual link, uma vez que a separação entre "Dicas e Detonados" é a mesma que separa "Home" de "Game", ou seja, um espaço!

Jon Neoqeav · Abril 12, 2012

Cavalheiros, desculpem não ter lido tudo, mas dito isto já ou não, gostaria de ressaltar que o mais importante no HTML é mantê-lo o mais limpo possível de uma forma que a marcação possa ser interpretada pelo maior número de dispositivos.

Então, o exemplo que o João Batista Neto apresentou no começo me parece bastante plausível, mas se quisermos enfatizar a natureza de lista do nosso menu de navegação principal, pode ser usada a tag <menu> com itens de lista dentro, dispensando o uso da tag <ul>, pois a tag <menu>, além de representar uma sequência de comandos, também representa semanticamente uma lista.

<nav>
  <menu>
     <li> <a>Um link</a> </li>
     <li> <a>Um link</a> </li>
     <li> <a>Um link</a> </li>
  </menu>
</nav>

Dessa forma me parece que a marcação teria toda a semântica pretendida pelo brunobispo, mantendo o código limpo. Sobre usar uma classe no elemento nav, entendo que pode servir ao CSS, para fins de formatação, independente da semântica tão desejada por todos nós.

Evandro Oliveira · Abril 12, 2012

A semântica da tag MENU já foi discutida.

Cavalheiros, desculpem não ter lido tudo [...]

Volte, leia e veja que você está equivocado, principalmente diante da especificação da W3C.

Thiago Moraes · Abril 12, 2012

elementos de linha são acessíveis por leitores de tela.

"separação" não é "um valor semântico".

Aqui neste ponto, você está começando a confundir as coisas.

exato. Quebra de linha não tem valor semântico.

A tag <br /> tem sim valor semântico.

A tag br não é usada exatamente para quebra de linha? Qual a importancia semântica dessa tag?

Arquivado

Semântica da tag <nav>

Recommended Posts

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunobispo 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunobispo 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunobispo 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunobispo 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunobispo 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunobispo 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jon Neoqeav 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Moraes 32