10

Recentemente eu estava pensando na estrutura de um componente para um projeto em que estamos tentando seguir a risca as especificações de semântica da W3C, mas acabei ficando com uma certa dúvida.

Eis o código do componente:

<div class="cmp-scrollBanner">
    <div class="message">Message One</div>
    <div class="message hide">Message Two</div>
    <div class="message hide">Message Three</div>

    <div class="controls">
        <!-- código irrelevante -->
    </div>
</div>

Como vocês podem ver, ele mostra várias mensagens, uma de cada vez, podendo ser n mensagens.

A minha dúvida é se eu deveria estar utilizando elementos ul e li no lugar das div das mensagens. Semanticamente falando, qualquer lista que eu tiver é passivel de se utilizar uls? Mesmo que dentro desta lista estejam conteúdos grandes e complexos?

Quando eu devo e quando não devo utilizar listas não-ordenadas?

3 Respostas 3

10

A especificação do HTML5 define ul assim (tradução livre):

O elemento ul representa uma lista de itens não ordenados; ou seja, uma lista cujo significado não se altera se a ordem dos itens que a compõem for alterada.

Se quiser seguir à risca o que diz a especificação, pode ser o caso de usar uma lista ordenada, já que seu conteúdo parece um feed de mensagens, que perderia o sentido se não estiver em ordem cronológica (me corrija se entendi errado o seu exemplo).

Semanticamente falando, qualquer lista que eu tiver é passivel de se utilizar uls? Mesmo que dentro desta lista estejam conteúdos grandes e complexos?

Recomenda-se que qualquer lista seja representada como lista, ou seja, ul, ol ou dl (a última é um pouco diferente, pode ser considerada uma lista de pares chave/valor). Porém...


Aviso: conteúdo opinativo abaixo!

Qualquer discussão sobre semântica sempre envolve um volume considerável de opinião. Já vi gente defender que uma lista de links dentro de um nav não precisa ser representada como lista, pois o nav já significaria uma "lista de itens de navegação"; tem gente que defende o contrário.

Um dos grandes argumentos a favor de "HTML semântico" é que seria um passo em direção à web semântica. E a web semântica é aquela em que as máquinas conseguem trocar informações sobre o sentido do conteúdo que acessam ou armazenam. Pois bem, e qual seria ganho em saber que tal conteúdo é uma lista sem ordenação? Isso não diz nada sobre o conteúdo, e muito pouco sobre sua estrutura.

Portanto, sempre olhe as discussões sobre semântica com um pé atrás. Não existem verdades absolutas; não adianta querer seguir tudo o que dizem, ou fatalmente você cai em contradição. É interessante sim que seu conteúdo seja bem estruturado e que essa estrutura faça sentido ao ser lida por humanos. Na minha opinião isso é o mais importante neste momento, em 2014. Eu representaria sim as suas mensagens como itens de uma lista, mas isso não é tão diferente de possuir divs com a classe mensagem dentro de outra div com a classe mensagens. Se a lista e seus itens não levarem classe nenhuma, as divs com classes inclusive carregam mais sentido.

9

Quando decidimos qual componente usar, devemos pensar além da apresentação em si, pois, esteticamente não faria diferença para um usuário se estamos usando div ou ul, porém precisamos pensar que existem outros tipos de usuários, por exemplo:

  • Leitores de tela para deficientes visuais
  • Bot de sites de buscas

Esses tipos de usuários não estão interessados na apresentação do site, e sim na sua formatação. HTML tem a capacidade de expressar listas de coisas, assim você pode ajudar esses tipos de usuários a entender melhor o conteúdo.

Quanto ao conteúdo extenso dentro de uma li, uma li pode conter qualquer elemento que é válido em body, porém para HTML 4.0.1 pode conter elementos de fluxo que é um conjunto de elementos de bloco e inline, para HTML 5 é válido conteúdo de qualquer fluxo.

6
  • 1
    Eu posso estar enganado, mas tinha a impressão de que o HTML 4.01 era bem restritivo em relação ao que poderia ir dentro de um <li>. Já o HTML5 é bem permissivo, permite até cabeçalhos, o que segundo a própria especificação seria contraditório (pois cabeçalhos determinam seções, e não faz sentido uma lista ultrapasse a fronteira de uma seção para outra). No geral eu concordo com a sua resposta (a minha segue a mesma linha), mas para ser sincero nunca entendi bem que grande ganho um leitor de tela, e principalmente um bot, teria ao saber que um conteúdo é uma lista.
    – bfavaretto
    22/05/2014 às 22:17
  • 2
    @bfavaretto, você tem razão quando diz do HTML 4.0.1, corrigi minha resposta, quanto ao leitor de tela, já precisei e preciso, e realmente noto diferença na formatação, não em todos mas em grande parte deles.
    – abfurlan
    22/05/2014 às 22:27
  • 1
    Realmente leitores de tela parecem ser os maiores beneficiados pelo uso das listas. Podem dar uma pausa entre os itens, etc. Tenho pouquíssima experiência com eles, mas entendo como possam usá-los. Já o Google, por exemplo, não sei que distinção poderia fazer para rankear algo com base em estar ou não contido em lista. Note que não estou criticando sua resposta, achei ela ótima, só estou pensando alto!
    – bfavaretto
    22/05/2014 às 22:30
  • 2
    @bfavaretto, concordo e acho interessante, porém pelo que tenho pesquisado, usar ul pode ajudar o boot identificar mais facilmente, uma sequência de itens relacionados entre si, uma lista de assuntos, um grupo de links ou opções, uma galeria de imagens e etc.
    – abfurlan
    22/05/2014 às 22:51
  • 2
    boot ou bot?
    – brasofilo
    23/05/2014 às 4:05
8

A semântica do HTML é algo que faz sentido (principalmente) para mecanismos de busca, que se baseiam na estrutura semântica do seu código para efetuar o correto rankeamento. Naturamente que obedecer à ordem semântica é importante em qualquer situação, pois acaba tornando seu trabalho mais fácil e fluído. Para a questão atual, vejo como adequado o uso de listas quando se tem uma hierarquia de conteúdo. Daí a você poder ter o encadeamento de listas:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
            <li>Subitem 3</li>
        </ul>
    </li>
</ul>

Como não há uma ordem hierárquica nas suas mensagens, não vejo problema em usar div para representá-las.


Referências

http://www.w3.org/MarkUp/html3/bulletlists.html

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .