Semântica da tag <nav>

[William Bruno 1501]

Leia:

http://wbruno.com.br/2011/10/04/semantica-da-tag-br/

[Thiago Moraes 32]

William, no seu post eu li o que eu ja sei..

 

"The <br> element represents a line break."

 

Na minha visão, a tag <br> é importante em um aspecto visual, e não semântico.

[William Bruno 1501]

Na minha visão, a tag <br> é importante em um aspecto visual, e não semântico.

então você não entendeu que você leu, ou então não expliquei direito no post.

 

html não define aspectos visuais. Isso é trabalho do CSS.

Se a tag br fosse unicamente para "aspectos visuais", ela teria sido banida, assim como foi a tag <font>.

[Thiago Moraes 32]

Li seu post e realmente não vi a resposta para a pergunta.

 

Não consigo ver uma quebra de linha de texto, como algo além de um aspecto visual, digo, o que mudaria para um crawler um texto com <br> ou não? Como poderia influenciar na relevancia do texto?

[William Bruno 1501]

Semântica não é só relevância.

 

Não pense no crawler somente. Pense no usuário. Pense nos diversos dispositivos de acesso.

Abra a mente.

 

 

O correto é não usar o BR para espaçamentos visuais, mas para quebras de texto, de idéias(pausa), de uma sequência de caracteres.

[Thiago Moraes 32]

Semântica não é só relevância.

 

Não pense no crawler somente. Pense no usuário. Pense nos diversos dispositivos de acesso.

Abra a mente.

 

 

O correto é não usar o BR para espaçamentos visuais, mas para quebras de texto, de idéias(pausa), de uma sequência de caracteres.

 

Aí eu discordo totalmente de você. Web semântica não foi feita para o usuário, para o usuário pouco importa o código que você usou, se você usou tag <h>, <strong>, <nav>...não vai mudar nada, ele vai ler e interpretar o texto da mesma maneira. Em nenhum momento eu falei que semantica é só relevância, assim como em nenhum momento falei pra usar a tag <br> para espaçamento.

 

E tenho mente aberta, tanto que estou discutindo sobre o assunto, se o meu ponto de vista está errado, ficarei grato se você me mostrar o certo.

[Evandro Oliveira 331]

Da especificação:

O elemento BR representa uma quebra de linha.

Nota: Enquanto quebras de linha são comumente representadas em mídia visual por mover fisicamente o texto subsequente para uma nova linha, uma folha de estilos ou um agente de usuário - browser, por exemplo - poderia ser justificado igualmente fazendo as quebras de linha serem renderizadas de uma maneira diferente, por exemplo como pontinhos verdes ou como espaçamento extra.

Os elementos BR devem ser utilizados apenas para quebras de linha que fazem parte do conteúdo atual, como em poemas ou endreçamentos

http://www.w3.org/TR/html5/the-br-element.html#the-br-element

[William Bruno 1501]

para o usuário pouco importa o código que você usou, se você usou tag <h>, <strong>, <nav>...não vai mudar nada, ele vai ler e interpretar o texto da mesma maneira.

Ok, vamos partir desse ponto.

 

Você tendo dito isso, mostra que você está limitado a browser visual web.(por isso eu disse abrir a mente)

Para um usuário que enxerga perfeitamente e usa um browser como Chrome, Firefox, InternetExplorer.. realmente não faz diferença.

 

Mas e os outros usuários ? aqueles que navegam com leitores de tela, por exemplo ?

[João Batista Neto 448]

Antes de começar a responder os posts quotados abaixo, quero só enfatizar dois pontos:

 

1. Evandro, você tem razão sobre a renderização no lynx. Foi falha minha ao gerar os screenshots. Havia cache da marcação e acabei gerando dois screenshot da mesma coisa.

 

2. Pessoal, semântica é o estudo do significado, não da exibição. Semanticamente falando, pouco importa como será exibido, tão pouco a forma que os leitores de tela interpretarão aquilo. O que realmente importa é o significado daquilo que está sendo utilizado.

 

Se utilizarmos algo "semanticamente correto", então os leitores de tela interpretarão o conteúdo de uma forma mais significativa para o usuário, mas isso é apenas consequência.

 

html não define aspectos visuais. Isso é trabalho do CSS.

 

Perfeito!

 

Não consigo ver uma quebra de linha de texto, como algo além de um aspecto visual, digo, o que mudaria para um crawler um texto com <br> ou não? Como poderia influenciar na relevancia do texto?

 

Thiago, vou tentar, de uma forma bem simplista, explicar para você o significado semântico da tag <br />, veja só:

 

Quando escrevemos qualquer tipo de conteúdo, utilizamos diversos artifícios para garantir a leitura do mesmo. Qual o significado de um ponto final? Ou de uma vírgula ou, até mesmo, da quebra de frases em parágrafos?

 

Se você analisar a versão abaixo dessa mesma explicação, talvez você compreenda que, assim como vírgulas, as quebras de linha tem um valor semântico importante.

 

-------- versão sem pontuação e quebra de linha --------

Quando escrevemos qualquer tipo de conteúdo utilizamos diversos artifícios para garantir a leitura do mesmo qual o significado de um ponto final ou de uma vírgula ou até mesmo da quebra de frases em parágrafos se você analisar a versão abaixo dessa mesma explicação talvez você compreenda que assim como vírgulas as quebras de linha tem um valor semântico importante.

-------- /versão sem pontuação e quebra de linha --------

 

Semântica não tem nada a ver com a forma com que algo é exibido em algum lugar, mas com a compreensão de alguma coisa, veja abaixo um exemplo interessante:

 

Um dia, em um país qualquer, o rei mandou chamar o mensageiro e deu-lhe a seguinte instrução:

-- Mensageiro, envie ao carrasco a seguinte mensagem: "Não corte a cabeça do prisioneiro".

 

O mensageiro então se dirigiu até a masmorra e disse ao carrasco:

-- Carrasco, o rei disse: "Não, corte a cabeça do prisioneiro".

 

E o prisioneiro foi morto decapitado.

 

Semântica Thiago, é o estudo do significado das coisas, e uma vírgula, assim como uma quebra de linha, podem sim, modificar o significado das coisas.

 

mas para quebras de texto, de idéias(pausa), de uma sequência de caracteres.

 

Esse é o significado semântico de uma quebra de linha, quebrar frases, ideias (sem acento), etc. Assim como <nav>, que tem o valor semântico de agrupar links de navegação principal. Meu ponto de vista é bastante simples, se <nav> já é um agrupamento de links, qual o sentido em utilizar mais um agrupamento, dessa vez na forma de lista? O que é uma lista, senão um agrupamento de itens? Devemos ser redundantes e ter um agrupamento dentro de outro agrupamento? Para quê? Qual o significado disso?

[brunobispo 20]

Esse é o significado semântico de uma quebra de linha, quebrar frases, ideias (sem acento), etc. Assim como <nav>, que tem o valor semântico de agrupar links de navegação principal. Meu ponto de vista é bastante simples, se <nav> já é um agrupamento de links, qual o sentido em utilizar mais um agrupamento, dessa vez na forma de lista? O que é uma lista, senão um agrupamento de itens? Devemos ser redundantes e ter um agrupamento dentro de outro agrupamento? Para quê? Qual o significado disso?

João, concordo com tudo.

 

A listagem serve como separação dos itens. Pelo mesmo motivo que você usa a tag br para quebrar frases ou ideias, as tags a de dentro do menu precisam ser separadas, seja por uma listagem, por tags br ou por vírgulas.

 

Segue um trecho do post do membro Evandro de Oliveira que demonstra a mesma preocupação semântica desta separação.

 

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!

[William Bruno 1501]

as tags a de dentro do menu precisam ser separadas, seja por uma listagem, por tags br ou por vírgulas.

semãnticamente não precisam. Se o leitor de tela não é capaz de ler corretamente, de uma forma que identifique, então o erro está no leitor de tela, e não na marcação usada.

 

Semanticamente, uma navegação com NAV > A, possui um significado muito claro e está super bem representado por essa marcação.

[brunobispo 20]

semãnticamente não precisam. Se o leitor de tela não é capaz de ler corretamente, de uma forma que identifique, então o erro está no leitor de tela, e não na marcação usada.

 

Semanticamente, uma navegação com NAV > A, possui um significado muito claro e está super bem representado por essa marcação.

 

Esse suposto comportamento é tão pouco provável que não foi documentado e tampouco usado em qualquer exemplo da W3C.

[Evandro Oliveira 331]

Exemplo perfeitamente válido de uso de NAV

 

<nav>
   <p>O portal <a href="http://imasters.com.br" title="Página inicial do portal iMasters">iMasters</a> oferece diversos serviços à comunidade.
   Existem <a href="http://imasters.com.br/indice/artigos" title="índice de artigos fornecidos no iMasters">artigos técnicos</a>,
   <a href="http://imasters.com.br/indice/noticias" title="Todas as novidades de TI">notícias</a>,
   <a href="http://imasters.com.br/agenda/" title="Participe com a sua presença!">eventos</a> e, o meu favorito,
   um <a href="http://forum.imasters.com.br" title="Dúvidas, dicas e sugestões. Compartilhe aqui!>fórum</a> para você tirar suas dúvidas e compartilhar conhecimento.
   Dentre a sessão de <a href="http://forum.imasters.com.br/forum/98-programacao/" title="Tudo sobre as linguagens mais utilizadas no Brasil">programação</a>,
   o destaque vai para <a href="http://forum.imasters.com.br/forum/3-php-parceiro-hostnet/" title="Conteúdo de primeira">PHP</a> que é, sem dúvida, a sessão mais movimentada do fórum como um todo.
   Com a popularização do HTML5, a sessão de <a href="http://forum.imasters.com.br/forum/79-webstandards-css-xml-xhtml-html/" title="Semântica é importante? Participe!">Webstandards</a>,
   localizada sob <a href="http://forum.imasters.com.br/forum/99-desenvolvimento/" title="Formas alternativas e técnicas para desenvolver bem">Desenvolvimento</a>,
   aliada à sessão de <a href="http://forum.imasters.com.br/forum/6-javascript-dhtml/" title="A linguagem da Web moderna!">Javascript</a>,
   ganharam notável aumento em sua demanda e participação.</p></nav>

Nota: As quebras de linha foram adicionadas apenas para melhorar a legibilidade e não fazem parte do código fonte.

 

O portal iMasters oferece diversos serviços à comunidade. Existem artigos técnicos, notícias, eventos e, o meu favorito, um fórum para você tirar suas dúvidas e compartilhar conhecimento. Dentre a sessão de programação, o destaque vai para PHP que é, sem dúvida, a sessão mais movimentada do fórum como um todo. Com a popularização do HTML5, a sessão de Webstandards, localizada sob Desenvolvimento, aliada à sessão de Javascript, ganharam notável aumento em sua demanda e participação.

 

Queridos, eu acredito que, pelo menos quem participa neste tópico, todos têm um conhecimento razoável do uso do Microsoft Word. Eu trabalhei durante 4 anos em um Centro Universitário e presenciei, rotineiramente, formandos utilizando de artifícios primários para formatação e configuração de seus TCC's. Desde a inserção manual do número de página no rodapé, até mesmo a criação, tópico a tópico, do índice remissivo.

 

A minha recomendação: Escreva o texto - o que realmente importa - no bloco de notas e, quando estiver concluído, aplique no Word. A partir deste momento você estará proibido de alterar texto. Apenas deverá se utilizar das ferramentas que o editor provê.

 

Talvez por possuir essa visão, eu tendo a seguir o mesmo princípio quando falamos de WEB. O usuário chega ao seu site pelo conteúdo, é isso que ele busca! É isso que discutimos por aqui sempre, devemos ser capazes de fornecer o nosso conteúdo ao máximo possível de usuários! Essa é a justificativa para não sermos dependentes de JavaScript ou CSS.

 

Onde eu quero chegar é que, uma vez que HTML adiciona signficiado ao conteúdo para as máquinas, não podemos esquecer que aquele conteúdo sempre existiu. Ainda que de forma textual, crua, escrito no bloco de notas, é aquilo que importa, aquilo que interessa e é atrás daquilo que o usuário vai! Nosso conteúdo deve ser legível e utilizável, também, fora do contexto de HTML.

 

A nossa preocupação em incluir o significado correto é que todos nós utilizamos a ajuda das máquinas para obter o conteúdo da web. Seja utilizando um leitor de tela ou utilizando o Google. Mas tenhamos uma coisa muito forte em mente: não é o que vai dentro de uma TAG que deve se adequar à ela. São as TAG's que devem marcar um conteúdo que já existia.

 

Portanto, me desculpem mas, "Home Game História Dicas e Detonados Estratégia" não faz o menor sentido para mim. São apenas palavras jogadas. Enquanto todos aqui concordam que "Home, Game, Dicas e detonados e Estratégia" fazem parte de uma lista bem distribuída e cheia de significado.

[William Bruno 1501]

São apenas palavras jogadas.

Semânticamente cada palavra é um link. Na minha opinião, isto por si só basta, e é auto suficiente.

 

Nós é que nos acostumamos a dizer que "um menu" é uma lista de links. Porém uma navegação pode ser qualquer coisa, como vcs mesmo já demonstraram.

Eu defendo que uma nav podem ser apenas links. Cada link é único, e semanticamente falando não há nenhum problema nisso.

 

Além doque no Decimo Segundo Menu, UL LI foram um desperdício de marcação.

Eu costumo acreditar que "qnto menos HTML melhor", desde que esse HTML faça sentido por si só.

[João Batista Neto 448]

A nossa preocupação em incluir o significado correto é que todos nós utilizamos a ajuda das máquinas para obter o conteúdo da web. Seja utilizando um leitor de tela ou utilizando o Google. Mas tenhamos uma coisa muito forte em mente: não é o que vai dentro de uma TAG que deve se adequar à ela. São as TAG's que devem marcar um conteúdo que já existia.

 

Evandro, sua resposta no geral é ótima, de verdade, ela valoriza ainda mais esse tópico, que já está com um conteúdo de alto nível. Continuo vendo a lista não ordenada dentro da lista de links de navegação como sendo redundante, mas sua argumentação foi excelente.

 

Um ponto que achei muito relevante é:

São as TAG's que devem marcar um conteúdo que já existia

 

Está absolutamente correto. Usamos as tags para marcar um conteúdo que já existia. Usamos <p> para parágrafos, <table> para tabelas, <ul> com <li> para listas não ordenadas, <ol> com <li> para listas ordenadas E <nav> para navegação. Temos tags com significados, exatamente para que esses significados sejam aplicados corretamente no conteúdo que já existe.

 

Da mesma forma que muitos veem o uso de table sem ser para dados tabulares uma prática errada, eu vejo essa redundância como não sendo uma boa prática. Se <nav> define uma lista de links de navegação, e essa lista não está sendo adequadamente renderizada ou lida, então o que estamos vendo é uma renderização ou "leitura" ainda não atualizada, seja com leitores de tela ou outros U.A.

 

:seta: E se amanhã, Evandro, todos os U.A. passarem a renderizar os filhos de <nav> da mesma forma que é renderizada uma lista não ordenada.

 

nav > a { display: list-item; }

 

Mudaria seu ponto de vista? Ou você continuaria utilizando uma <ul> dentro de <nav>?

[Thiago Moraes 32]

 

Se utilizarmos algo "semanticamente correto", então os leitores de tela interpretarão o conteúdo de uma forma mais significativa para o usuário, mas isso é apenas consequência.

 

 

Concordo. Web semantica são um conjunto de práticas que visa o entendimento e indexação do conteúdo por outros sistemas, não é focada diretamente no usuário.

 

Afinal de contas, vcs estão discutindo sobre web semântica ou o sentido literal da palavra semântica ?

[Evandro Oliveira 331]

Da mesma forma que muitos veem o uso de table sem ser para dados tabulares uma prática errada, eu vejo essa redundância como não sendo uma boa prática. Se <nav> define uma lista de links de navegação, e essa lista não está sendo adequadamente renderizada ou lida, então o que estamos vendo é uma renderização ou "leitura" ainda não atualizada, seja com leitores de tela ou outros U.A.

 

É aí que está! NAV não define uma lista de links. E neste ponto eu estaria mais próximo de concordar com a abordagem do William do que com a sua, ainda que ambas levem ao mesmo resultado final.

 

A especificação define NAV como uma sessão - o que torna incorreto utilizar <SECTION><NAV></NAV></SECTION> - que linka para outras páginas ou partes dentro da página - âncoras. Uma sessão com links de navegação. Não especifica a forma como o conteúdo interno deve ser disposto. Você fica livre para incluir até mesmo formulários, se isso fizer parte de sua navegação.

 

:seta: E se amanhã, Evandro, todos os U.A. passarem a renderizar os filhos de <nav> da mesma forma que é renderizada uma lista não ordenada.

 

nav > a { display: list-item; }

 

Mudaria seu ponto de vista? Ou você continuaria utilizando uma <ul> dentro de <nav>?

 

Eu dispensaria a UL e continuaria a utilizar as LI. Se a representação de NAV fosse uma lista, seus filhos diretos seriam items de lista. Temos, pois, uma tag para marcar itens de lista. E sua especificação - principalmente na sessão "content model" - mudaria para o que hoje já temos em OL, UL e MENU.

 

Content model:

Zero or more li elements.

 

 

Em tempo: Essa linha de raciocínio resume completamente a minha forma de pensar:

 

 

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 uma navegação (Grifo, Evandro).

[João Batista Neto 448]

É aí que está! NAV não define uma lista de links.

 

A especificação define NAV como uma sessão - o que torna incorreto utilizar <SECTION><NAV></NAV></SECTION> - que linka para outras páginas ou partes dentro da página - âncoras. Uma sessão com links de navegação. Não especifica a forma como o conteúdo interno deve ser disposto. Você fica livre para incluir até mesmo formulários, se isso fizer parte de sua navegação.

 

:clap:

[Yuri Camara 0]

Mesma discussão rolando em

https://www.facebook.com/groups/desenvolvimentoweb/340094659382313/

[Henrique Barcelos 290]

Só um adendo, não li a discussão toda, mas peguei a parte do "não utilizar UL LI dentro de NAV".

Como seria a criação de um menu drop-down então? Vários links aninhados???

E quando esse menu se torna mais complexo, como por exemplo, o do globoesporte.com???