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 um lista de compras ou uma lista de tarefas. Essas são listas. Os testes de múltipla escolha geralmente são listas numeradas de perguntas: as respostas de múltipla escolha para cada pergunta são listas aninhadas.

O HTML nos oferece algumas maneiras diferentes de marcar listas. Há listas ordenadas (<ol>), listas não ordenadas (<ul>) e listas de descrições (<dl>). Os itens de lista (<li>) ficam aninhados em listas ordenadas e não ordenadas. Em uma lista de descrições, você vai encontrar os termos de descrição (<dt>) e a descrição. detalhes <dd>. Falaremos sobre todas elas aqui.

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

Em menus e listas não ordenadas, os itens da lista geralmente são exibidos usando 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 revertidos com HTML ou CSS, ou ambos.

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

Listas não ordenadas

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

Por padrão, cada item da lista não ordenado é prefixado com um marcador. A lista não ordenada não tem atributos específicos do elemento. Você precisa fechar suas listas com um </ul>.

Listas ordenadas

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

O <ol> tem três atributos específicos do elemento: 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 números romanos. A propriedade list-style-type fornece muitos outros valores.

No entanto, conforme observado no codepen, a propriedade list-style-type substitui o valor do atributo type ao gravar 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, vai inverter a ordem dos números, indo do maior número para o menor. O atributo start define o valor inicial. O padrão é 1.

Semelhante a </ul>, o </ol> de fechamento é obrigatório.

É possível aninhar listas, mas elas precisam ser aninhadas em um item da lista. Lembre-se de que 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 o introduzimos formalmente. O elemento <li> pode ser um filho direto de um elemento lista (<ul>), uma lista ordenada (<ol>) ou um menu (<menu>). O <li> precisa ser aninhado como filho de um desses elementos. não é válido em nenhum outro lugar.

O fechamento de um item de lista não é obrigatório para a especificação, já que ele será fechado implicitamente quando o navegador encontrar a próxima <li>. tag de abertura ou a tag de fechamento de lista obrigatória: </ul>, </ol>, </menu>. Embora isso não seja exigido pelas especificações, alguns funcionários internos as práticas recomendadas sugerem que você não feche os itens da lista para economizar alguns bytes. Feche as tags <li>. Ele torna seu código mais fácil de ler e seu futuro eu agradeço. É 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 dentro dele. uma lista ordenada e não tem significado para listas ou menus não ordenados. Ele substitui o valor de início da <ol> em caso de conflito.

O value é o número do item em uma lista ordenada. Nos itens seguintes da lista, continue a numeração do valor definido, a menos que o item também tenha um atributo value definido. O valor não precisa estar em ordem. mas, se não estiver em ordem, deve haver uma boa razão.

Quando você combina reversed no <ol> com atributos value nos itens da lista, o navegador define esse <li> como o valor fornecido, conte os <li>s antes dele e faça a contagem regressiva dos próximos <li>s. Se um segundo item da lista tiver um atributo de valor, o contador será redefinido nesse segundo item da lista e o valor subsequente será reduzido 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 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, encontrado no corpo que pode ser aninhado como um filho direto de <body>, incluindo cabeçalhos e, assim, separe o conteúdo.

Temos algumas listas não ordenadas no MLW. Os professores na seção de instrutores são uma lista, assim como os computadores dos alunos nas avaliações. nesta seção. O professor <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, um bloco de aspas 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 da 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 aninhada lista desordenada 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 uma <ul> é uma <li>, uma lista aninhada é encontrada aninhada em uma <li>, nunca diretamente em um <ol> ou <ul>.

No último exemplo, você pode ter notado que role="list" está incluído no <ul>. Embora o papel implícito de ambas <ul> e <ol> são list, removendo o aspecto da lista com CSS, incluindo a configuração display: grid ou list-style-type: none pode fazer com que o VoiceOver (o leitor de tela para iOS e MacOS) remova a semântica implícita no Safari. Isso é um recurso, não um bug. Geralmente, não é necessário adicionar o atributo de função ao usar elementos semânticos. Em geral, não é necessário adicionar um a uma lista, a menos que o usuário realmente precise saber que se trata de uma lista, por exemplo, quando o usuário se beneficiaria em saber quantos itens há na lista.

Listas de descrições

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

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>, o <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 profissional e as aspirações delas. Uma lista descritiva de estudantes, indicada por <dl>, inclui um grupo de termos. Neste caso, os "terms" são nomes de estudantes especificados usando o elemento <dt>, junto com uma descrição para cada termo (neste caso, as metas de carreira de cada estudante) especificadas pelos elementos <dd>.

Essa lista de descrições não faz parte da página da MLW. As listas de descrições não servem apenas para termos e definições, o que é por que os nomes dos elementos foram feitos mais gerais.

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

Na maioria das vezes, você encontrará listas de descrições com números iguais de elementos <dt> e <dd>. Mas nem sempre as listas de descrições não precisam corresponder entre termo e descrição; é possível ter vários para um ou um para vários, como um termo do 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 use o combinador irmão adjacente ou o :has() relacional seletor para segmentar números variáveis desses elementos com CSS. Se necessário, inclua um <div> como filho de um <dl>, e o pai de um ou mais elementos <dt> ou <dd> (ou ambos) são permitidos. O <dl> pode realmente têm alguns outros filhos: o aninhamento de <div>, <template> ou <script> é permitido; Nenhum dos elementos da lista de descrições tem atributos específicos do elemento.

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

Teste seu conhecimento

Teste seus conhecimentos sobre listas.