Devo usar <ul> se <li> s dentro dos meus <nav> s?

O título explica muito bem.

Agora que temos uma <nav>tag dedicada ,

É isto:

<nav>
  <ul>
    <li><a href="#foo">foo</a></li>
    <li><a href="#bar">bar</a></li>
    <li><a href="#baz">baz</a></li>
  </ul>
</nav>

melhor do que o seguinte?

<nav>
  <a href="#foo">foo</a>
  <a href="#bar">bar</a>
  <a href="#baz">baz</a>
</nav>

Quer dizer, supondo que eu não precise de um nível DOM extra para algum posicionamento / preenchimento CSS, qual é a forma preferida e por quê?

o elemento nav e a lista fornecem informações semânticas diferentes:

• O elemento nav comunica que estamos lidando com um bloco de navegação principal

• A lista comunica que os links dentro deste bloco de navegação formam uma lista de itens

Em http://w3c.github.io/html/sections.html#the-nav-element, você pode ver que um elemento nav também pode conter prosa.

Então, sim, ter uma lista dentro de um elemento nav adiciona significado.

Neste ponto, eu manteria os <ul><li>elementos, porque nem todos os navegadores suportam tags HTML5 ainda.

Por exemplo, encontrei um problema ao usar a <header>tag - o Chrome e o FF funcionaram perfeitamente, mas o Opera funcionou.

Até que todos os navegadores suportem HTML completamente, eu os colocaria, mas confio nos antigos para compatibilidade com versões anteriores.

Depende de você realmente. Se você normalmente usa uma lista não ordenada para marcar seu menu de navegação, eu diria para continuar a fazer isso dentro do elemento <nav>. O objetivo do elemento <nav> é identificar a navegação do site para um leitor de computador, por exemplo, se você usa uma lista ou simplesmente links é irrelevante.

Para mim, as listas não ordenadas são marcações extras que não são realmente necessárias. Quando vejo um documento HTML, quero que seja o mais limpo e fácil de ler possível. Já está claro para o visualizador que uma lista está sendo apresentada se o recuo adequado for usado. Portanto, adicionar a UL a essas tags é desnecessário e torna a leitura do documento mais difícil.

Embora você possa ganhar alguma flexibilidade, eu acredito que é uma ideia melhor não aumentar a marcação com classes ul não-semânticas e estilizar os elementos a de uma só vez. E você não tem desculpa: use os pseudo-seletores: before e: after.

Editar : fui informado de que alguns leitores de tela ARIA tratam as listas de maneira diferente das tags âncora simples. Se o seu site for voltado para pessoas com deficiência, posso considerar o uso da abordagem baseada em lista.

Não, eles são equivalentes. Lembre-se de que o HTML 5 é compatível com as listas do HTML 4, então você pode ficar à vontade para usá-las da mesma forma. A compensação é menos código para a 2ª versão.

Se você estiver preocupado com a compatibilidade com versões anteriores em relação aos navegadores, certifique-se de incluir este shim para fornecer funcionalidade de tags como <nav>e <article>.

Se estivermos falando "pelo livro", então não; você não precisa usar listas para marcar sua navegação. A única vantagem real que oferecem é fornecer um maior grau de flexibilidade ao estilizar.

Eu manter as <ul><li>marcas, porque as novas tags ( <nav>, <section>, <article>e assim por diante) são apenas versões mais semânticas de<div> s.

Pela mesma razão, você não teria apenas uma carga de links em a <div>, eles também deveriam ser estruturados dentro de uma <nav>tag.

Existe uma postagem realmente detalhada sobre truques de CSS sobre essa questão exata. Obviamente, é uma questão muito debatida; a postagem tem mais de 200 comentários.

Navegação em listas: ser ou não ser (truques CSS, janeiro de 2013)