Listas

Listas são mais comuns do que você imagina. Se você já participou de uma aula de programação, o primeiro projeto pode ter sido criar uma lista de compras ou uma lista de tarefas. São listas. Os testes de múltipla escolha geralmente são listas numeradas de perguntas: as múltiplas respostas possíveis para cada pergunta são listas aninhadas.

O HTML nos fornece algumas maneiras diferentes de marcar listas. Há listas ordenadas (<ol>), listas não ordenadas (<ul>) e listas de descrição (<dl>). Os itens da lista (<li>) são aninhados em listas ordenadas e não ordenadas. Dentro de uma lista de descrições, você vai encontrar termos de descrição (<dt>) e detalhes da descrição <dd>. Vamos abordar todos eles aqui.

Em formulários HTML, listas de elementos <option> compõem o conteúdo de <datalist>, <select> e <optgroup> em uma <select>. Eles são discutidos em formulários HTML.

Em menus e listas não ordenadas, os itens da lista normalmente são exibidos com marcadores. Em listas ordenadas, elas geralmente são precedidas por um contador crescente, como um número ou uma letra. Os marcadores e a ordem de numeração podem ser controlados ou invertidos com HTML, CSS ou ambos.

Por padrão, os itens de lista ordenados e não ordenados são prefixados com números ou marcadores. Mesmo quando não quiser que as listas se pareçam com listas, você ainda quer uma lista de itens, como em barras de navegação, uma lista de tarefas com caixas de seleção em vez de marcadores ou perguntas verdadeiras e falsas em um teste de múltipla escolha. Para todas essas listas sem marcadores, é apropriado usar elementos de lista HTML.

Listas não ordenadas

<ul> é o elemento pai de listas não ordenadas de itens. Os únicos filhos de um <ul> são um ou mais elementos de item da lista <li>. Vamos criar uma lista de máquinas. Usamos uma lista não ordenada porque a ordem não importa (não diga isso a eles):

Por padrão, cada item da lista não ordenada é prefixado com um marcador. A lista não ordenada não tem atributos específicos do elemento. É necessário fechar suas listas com uma </ul>.

Listas ordenadas

<ol> é o elemento pai das listas ordenadas de itens. Os únicos filhos de uma <ol> são um ou mais elementos <li> ou itens de lista. No entanto, os "marcadores" neste caso são números de uma infinidade de tipos. O tipo pode ser definido em CSS com a propriedade list-style-type ou com o atributo type.

O <ol> tem três atributos específicos de elementos: type, reversed e start.

O atributo type enumerado define o tipo de numeração. Há cinco valores válidos para type, o padrão é 1 para números, mas você também pode usar a, A, i ou I para letras minúsculas e maiúsculas ou numerais romanos. A propriedade list-style-type fornece muitos outros valores.

Conforme indicado no codepen, a propriedade list-style-type substitui o valor do atributo type ao escrever uma documentação em que o tipo numérico é importante, como em documentos legais, por exemplo, é necessário incluir o type.

O atributo booleano reversed, se incluído, inverte a ordem dos números, indo do maior para o menor. O atributo start define o valor inicial. O padrão é 1.

Assim como </ul>, o </ol> de fechamento é obrigatório.

É possível aninhar listas, mas elas precisam ser aninhadas em um item da lista. Lembre-se, o único elemento que pode ser filho de uma <ul> ou um <ol> é um ou mais elementos <li>.

Itens em lista

Usamos o elemento <li>, mas ainda não fizemos a introdução formal. O elemento <li> pode ser um filho direto de uma lista não ordenada (<ul>), uma lista ordenada (<ol>) ou um menu (<menu>). O <li> precisa ser aninhado como filho de um desses elementos e não é válido em outro lugar.

O fechamento de um item da lista não é obrigatório para a especificação, já que ele será fechado implicitamente quando o navegador encontrar a próxima tag de abertura <li> ou a tag de fechamento de lista obrigatória: </ul>, </ol>, </menu>. Embora a especificação não exija isso e algumas práticas recomendadas internas da empresa sugiram que não é possível fechar os itens da lista para economizar alguns bytes, feche as tags <li>. Ela torna seu código mais fácil de ler e seu próprio eu do futuro agradecerá. É mais fácil fechar todos os elementos do que lembrar quais tags precisam ser fechadas e quais têm uma tag de fechamento opcional.

Há apenas um atributo <li> específico do elemento: value, um número inteiro. O value só é útil em uma <li> quando o <li> está aninhado em uma lista ordenada e não tem significado para listas ou menus não ordenados. Ele vai substituir o valor do início da <ol> se houver um conflito.

O value é o número do item em uma lista ordenada. Nos itens de lista subsequentes, continue a numeração do conjunto de valores, a menos que o item também tenha um atributo value definido. O valor não precisa estar em ordem. No entanto, se não estiver em ordem, haverá um bom motivo.

Quando você combina reversed no <ol> com atributos value em itens da lista, o navegador vai definir esse <li> como o valor fornecido e, em seguida, contar os <li>s anteriores e a contagem regressiva para os que vêm depois. Se um segundo item da lista tiver um atributo de valor, o contador será redefinido nesse segundo item, e o valor subsequente será reduzido em um.

Tudo isso também pode ser controlado com contadores CSS que fornecem conteúdo gerado para o pseudoelemento ::marker. Se o número for puramente de apresentação, use CSS. Se a numeração for importante semanticamente ou tiver significado, use esses atributos.

Até agora, vimos itens de lista que contêm apenas nós de texto. Os itens de lista podem conter todo o conteúdo do fluxo, ou seja, qualquer elemento encontrado no corpo que possa ser aninhado como um filho direto do <body>, incluindo cabeçalhos e, assim, seção de conteúdo.

Temos algumas listas não ordenadas no MLW. Os professores na seção de instrutores são uma lista, assim como as máquinas dos alunos na seção de avaliações. O instrutor <ul> tem dois <li>s: um para cada professor. Dentro de cada <li>, temos uma imagem e um parágrafo:

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal">
    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve">
    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
  </li>
</ul>

A seção de avaliações tem três avaliações, portanto, três <li>s. Cada um contém uma imagem, uma citação e um parágrafo de três linhas com duas quebras de linha.

<ul>
  <li>
    <img src="images/blender.svg" alt="Blender">
    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
    <p>
      --Blendan Smooth,<br/>
      Former Margarita Maker, <br/>
      Aspiring Load Balancer
    </p>
  </li>
  <li>
    <img src="images/vaccuum.svg" alt="Vaccuum"/>
    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
    <p>
      --Hoover Sukhdeep,<br/>
      Former Sucker, <br/>
      Aspiring DDoS Cop
    </p>
  </li>
  <li>
    <img src="images/toaster.svg" alt="Toaster">
    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has
    <span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ&nbsp;̗̰͓̲̞̀t͙̀o̟̖͖̹̕&nbsp;͓̼͎̝͖̭dó̪̠͕̜&nbsp;͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢&nbsp;̰̳̯̮͇i</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

O aninhamento de listas em listas também é muito comum. Embora o MLW não tenha listas aninhadas, este site tem. No primeiro capítulo desta série, "Visão geral do HTML", a seção de elementos principais tem duas subseções. No sumário, que é uma lista não ordenada, há uma lista não ordenada e aninhada com links para estas duas seções:

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Non-replaced elements</a>
      </li>
      <li>
        <a href="#rave">Replaced and void elements</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#a">Attributes</a>
  </li>
  <li>
    <a href="#aoe">Appearance of elements</a>
  </li>
  <li>
    <a href="#e2">Element, attributes, and JavaScript</a>
  </li>
</ul>

Como o único filho de um <ul> é um <li>, uma lista aninhada é encontrada aninhada em um <li>, nunca diretamente em um <ol> ou <ul>.

No último exemplo, você pode ter notado que role="list" está incluído no <ul>. Embora a função implícita de <ul> e <ol> seja list, remover a aparência da lista com CSS, incluindo a configuração display: grid ou list-style-type: none, pode levar o VoiceOver (o leitor de tela do iOS e MacOS) a remover a semântica implícita no Safari. Isso é um recurso não um bug. Geralmente, você não deve adicionar o atributo "role" ao usar elementos semânticos, já que ele não é necessário. Além disso, geralmente não é necessário adicionar um item à lista, a menos que o usuário precise saber que se trata de uma lista, por exemplo, quando o usuário saber quantos itens estão nela.

Listas de descrições

Uma lista de descrições é um elemento de lista de descrições (<dl>) que contém uma série de termos de descrição (<dt>) (<dt>) e os respectivos detalhes de descrição (<dd>). Os nomes originais desses três elementos eram "lista de definição", "termo de definição" e "definição de definição". O nome mudou no padrão vivo.

Assim como as listas ordenadas e não ordenadas, eles podem ser aninhados. Ao contrário das listas ordenadas e não ordenadas, elas são compostas por pares de chave-valor. Semelhante a <ul> e <ol>, o <dl> é o contêiner pai. Os elementos <dt> e <dd> são os filhos do <dl>.

Podemos criar uma lista de máquinas com a história de carreira e aspirações delas. Uma lista de descrição de estudantes, indicada por <dl>, inclui um grupo de termos. Neste caso, os "termos" são nomes de estudantes, especificados usando o elemento <dt>, com uma descrição de cada termo. Nesse caso, as metas profissionais de cada estudante, especificadas pelos elementos <dd>.

Esta lista de descrição não faz parte da página do MLW. As listas de descrições não são apenas para termos e definições. É por isso que os nomes dos elementos passaram a ser mais gerais.

Ao criar uma lista de termos e as definições ou descrições deles, ou listas semelhantes de pares de chave-valor, os elementos das listas de descrição fornecem a semântica adequada. O papel implícito de um <dt> é term, sendo listitem outro papel permitido. O papel implícito de um <dd> é definition, sem outros papéis permitidos. Ao contrário de <ul> e <ol>, o <dl> não tem um papel ARIA implícito. Isso faz sentido porque <dl> nem sempre é uma lista. Mas, quando é, ele aceita os papéis list e group.

Na maioria das vezes, você vai encontrar listas de descrição com o mesmo número de elementos <dt> e <dd>. No entanto, as listas de descrições nem sempre precisam e não precisam corresponder a pares termo-descrição. É possível ter vários para um ou um para vários, como um termo de dicionário que tenha mais de uma definição.

Cada <dt> tem pelo menos um <dd> associado, e cada <dd> tem pelo menos um <dt> associado. Embora seja possível usar o combinador irmão adjacente ou o seletor relacional :has() para segmentar números de variáveis desses elementos com CSS, se necessário, é possível incluir um <div> como filho de um <dl>, e o pai de um ou mais elementos <dt> ou <dd> (ou ambos) é permitido. A <dl> pode ter alguns outros filhos: o aninhamento de <div>, <template> ou <script> é permitido. Nenhum dos elementos da lista de descrição tem atributos específicos.

Agora que você conhece links e listas, vamos unir os dois para criar a navegação.

Teste seu conhecimento

Teste seus conhecimentos sobre listas.