Listas

As listas são mais comuns do que você imagina. Se você já fez um curso de programação, talvez o primeiro projeto tenha sido criar uma lista de compras ou de tarefas. Essas são listas. Os testes de múltipla escolha geralmente são listas numeradas de perguntas, e as várias respostas possíveis para cada pergunta são listas aninhadas.

O HTML oferece algumas maneiras diferentes de marcar listas. Há listas ordenadas (<ol>), não ordenadas (<ul>) e de descrição (<dl>). Os itens de lista (<li>) são aninhados em listas ordenadas e não ordenadas. Em uma lista de descrição, você encontra termos de descrição (<dt>) e detalhes da descrição <dd>.. Abordamos todos eles aqui.

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

Em menus e listas não ordenadas, os itens são geralmente mostrados usando marcadores. Em listas ordenadas, eles geralmente são precedidos por um contador crescente, como um número ou uma letra. A ordem dos marcadores e da numeração pode ser controlada ou invertida com HTML ou CSS, ou ambos.

Por padrão, os itens de listas ordenadas e não ordenadas são prefixados com números ou marcadores. Mas mesmo quando você não quer que as listas pareçam listas, 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 de verdadeiro ou falso em um teste de múltipla escolha. Para todas essas listas sem marcadores, é adequado usar elementos de lista HTML.

Listas não ordenadas

O elemento <ul> é o elemento pai das listas não ordenadas de itens. Os únicos filhos de um <ul> são um ou mais elementos de item de 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 de lista não ordenada tem um marcador. A lista não ordenada não tem atributos específicos do elemento. É necessário encerrar as listas com um </ul>.

Listas ordenadas

O elemento <ol> é o elemento pai das listas ordenadas de itens. Os únicos filhos de um <ol> são um ou mais elementos <li> ou itens de lista. No entanto, os "marcadores" nesse caso são números de vários 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 do elemento: type, reversed e start.

O atributo enumerado type 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 números romanos. A propriedade list-style-type oferece muito mais valores.

Como observado no codepen, a propriedade list-style-type substitui o valor do atributo type. No entanto, ao escrever 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, 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.

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

Itens em lista

Usamos o elemento <li>, mas ainda não o apresentamos formalmente. 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 nenhum outro lugar.

O fechamento de um item de lista não é exigido pela especificação, já que ele é fechado implicitamente quando o navegador encontra 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 você não feche os itens da lista para economizar alguns bytes, ainda é necessário fechar as tags <li>. Isso facilita a leitura do código, e seu eu do futuro vai 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 um <li> quando ele está aninhado em uma lista ordenada e não tem significado para listas ou menus não ordenados.<li> Ele substitui o valor do início de <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 valor definido, a menos que esse item também tenha um atributo value definido. O valor não precisa estar em ordem, mas, se não estiver, deve haver um bom motivo.

Quando você combina reversed no <ol> com atributos value em itens da lista, o navegador define esse <li> como o valor fornecido, aumenta a contagem para os <li>s anteriores e diminui para os posteriores. Se um segundo item da lista tiver um atributo de valor, o contador será redefinido nesse segundo item, e o valor subsequente vai diminuir em um.

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

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

Temos algumas listas não ordenadas no MLW. Os professores na seção "Professores" são uma lista, assim como as máquinas dos estudantes na seção "Avaliações". O instrutor <ul> tem dois <li>s, um para cada professor. Em 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, então três <li>s. Cada um contém uma imagem, uma citação em bloco 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.</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

Também é muito comum aninhar listas dentro de listas. Embora o MLW não tenha listas aninhadas, este site tem. No primeiro módulo 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 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 percebido que role="list" está incluído em <ul>. Embora a função implícita de <ul> e <ol> seja list, a remoção da aparência da lista com CSS, incluindo a definição de display: grid ou list-style-type: none, pode fazer com que o VoiceOver (leitor de tela do iOS e do macOS) remova a semântica implícita no Safari. Isso é um recurso, não um bug. Em geral, não é necessário adicionar o atributo de função ao usar elementos semânticos. E geralmente não é necessário adicionar um número a uma lista, a menos que o usuário realmente precise saber que é uma lista, como quando ele se beneficiaria de saber quantos itens ela tem.

Listas de descrição

Uma lista de descrição é um elemento lista de descrição (<dl>) que contém uma série de termos de descrição (<dt>) e seus 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 dinâmico.

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

Podemos criar uma lista de máquinas com o histórico e as aspirações de carreira delas. Uma lista de descrição de estudantes, indicada por <dl>, inclui um grupo de termos especificados usando o elemento <dt>, além de uma descrição para cada termo especificado pelos elementos <dd>. Nesse caso, os "termos" são os nomes dos estudantes, e as descrições são os objetivos de carreira de cada um.

Essa lista de descrição não faz parte da página MLW. As listas de descrição não são apenas para termos e definições. Por isso, os nomes dos elementos foram generalizados.

Ao criar uma lista de termos e suas definições ou descrições, ou listas semelhantes de pares de chave-valor, os elementos de lista 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 outras funções permitidas. Ao contrário de <ul> e <ol>, <dl> não tem uma função ARIA implícita. Isso faz sentido porque o <dl> nem sempre é uma lista. Mas, quando é, ele aceita as funções list e group.

Na maioria das vezes, você encontra listas de descrição com números iguais de elementos <dt> e <dd>. Mas as listas de descrição nem sempre são e não precisam ser pares de termo-descrição correspondentes. É possível ter vários para um ou um para vários, como um termo de dicionário que tem 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 de irmãos adjacentes ou o seletor relacional :has() para segmentar números variáveis desses elementos com CSS, se necessário, você pode incluir um <div> como filho de um <dl>, e o pai de um ou mais elementos <dt> ou <dd> (ou ambos) é permitido. O <dl> pode ter outros filhos: é permitido aninhar um <div>, <template> ou <script>. Nenhum dos elementos da lista de descrição tem atributos específicos do elemento.

Agora que você entende links e listas, podemos juntar os dois para criar navegação.

Teste seu conhecimento

Teste seus conhecimentos sobre listas.