Listas não-ordenadas

São listas que apresentam um conjunto de itens. A renderização padrão define uma linha para cada item e que inicia com um marcador. Para definir uma lista não-ordenadas utilizamos a tag ul e para os itens utilizamos a tag li. Todos os itens devem ser definidos como conteúdo da tag ul. Veja o exemplo a seguir:

  <ul>
    <li>Araruna</li>
    <li>Boi Calemba</li>
    <li>Chegança</li>
    <li>Maculelê</li>
  </ul>
          

É possível usar outras tags como conteúdo de um item de lista. Por exemplo:

  <ul>
    <li>
      <img src="https://curiozzzo.com/wp-content/uploads/2018/12/post-curiozzzo-com-danc3a7a-araruna-pista-dancarinos-thumb.png" alt="Araruna">
    </li>
    <li>
      <a href="http://www.tribunadonorte.com.br/noticia/boi-calemba-pintadinho-tem-hista-ria-documentada/451989">Boi Calemba</a>
    </li>
  </ul>
          

Também é possível criar listas aninhadas. Para tal, basta definir uma lista como conteúdo do item de outra lista.

    <ul>
      <li>
        Zona Oeste:
        <ul>
          <li>Planalto</li>
          <li>Guarapes</li>
          <li>Cidade da Esperança</li>
        </ul>
      </li>
      <li>
        Zona Leste:
        <ul>
          <li>Rocas</li>
          <li>Ribeira</li>
          <li>Tirol</li>
        </ul>
      </li>
    </ul>
          

Listas ordenadas

Listas ordenadas são definidas através da tag ol e cada item recebe uma numeração como marcador. Assim como nas listas não-ordenadas, um item é definido através da tag li.

      <ol>
        <li>Natal</li>
        <li>Mossoró</li>
        <li>Parnamirim</li>
      </ol>
          

É possível indicar o tipo de numeração desejado através do atributo type e os seguintes valores: 1 (algarimos indo-arábicos - valor padrão); A (letras maiúsculas); a (letras minúsculas); I (algarismos romanos maiúsculos); i (algarimos romanos minúsculos).

      <ol type="I">
        <li>Natal</li>
        <li>Mossoró</li>
        <li>Parnamirim</li>
      </ol>
          

Entidades de caractere

Em HTML alguns caracteres são reservados, isto é, não podem ser utilizados como conteúdo de tag ou como valor de atributo (i.e., de forma literal). Isto acontece porque estes caracteres possuem um significado especial, como o símbolo < que é utilizado no início de uma tag. Também há a situação em que um determinado caractere não está presente no teclado e desta forma não pode ser inserido de forma direta, como o caractere ®. Quando houver a necessidade da utilização de tais caracteres de forma literal, devemos recorrer às entidades de caractere, as quais possuem o formato &nome_da_entidade; ou &#código_da_entidade;. Por exemplo, para inserir a expressão 3 < 5 podemos utilizar uma das duas formas a seguir:

      <p>3 &lt; 5</p>
      
      <p>3 &#60; 5</p>
          

A seguir é apresentada uma pequena relação de algumas entidades de caractere disponíveis. Uma relação mais ampla está disponível em https://www.w3schools.com/charsets/ref_html_entities_4.asp.

Exercícios

1) Crie uma página HTML com uma lista ordenada contendo os nomes dos estados da região Nordeste com suas respectivas quantidades de habitantes. Ordene a lista de forma decrescente de acordo com a quantidade de habitantes.

2) Escreva uma página HTML com uma lista não-ordenada de dois níveis. No primeiro nível informe nomes de categorias de animais (e.g., anfíbios, mamíferos, etc) e no segundo nível insira imagens de animais pertencentes à categoria. Veja o exemplo abaixo.

Referências

• PAPAIZ, Fabiano. Caracter de Entidade. Notas de aula.
• W3Schools. HTML Lists. Disponível em <https://www.w3schools.com/html/html_lists.asp>.
• W3Schools. HTML 4 Entity Names. Disponível em <https://www.w3schools.com/html/html_entities.asp>.