HTML: listas


HTML: Listas

(Elivelto Ebermam)

Em html temos basicamente três tipos de listas: listas ordenadas, listas desordenadas e listas de definição.

Lista ordenada

Nesse tipo de lista, os itens da lista tem um determinada ordem, por exemplo uma numeração. Para inserir uma lista ordenada usamos a tag <ol>, e para cada item da lista usamos a tag <li>, veja um exemplo:

    <ol>
       <li> Brasil </li>
       <li> Estados Unidos </li>
       <li> China </li>
    </ol>

Lembrando que, para uma página html, não basta escrever apenas o trecho acima, é necessário escrever toda a estrutura da página. Veja o exemplo abaixo:

<html>
    <head>
        <title> Exemplo </title>
    </head>
    <body>
        <ol>
      <li> Brasil </li>
      <li> Estados Unidos </li>
      <li> China </li>
        </ol>
    </body>
</html>

Se inserimos esse código no editor online do site W3Schools [1], disponível no link https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default , e clicarmos em “run” temos o seguinte resultado:



Repare que cada item foi numerado em ordem. Se forem acrescentados mais itens, essa numeração será continuada.

Lista desordenada

A lista desordenada é usada de forma semelhante a lista ordenada, a diferença é que ela não é numerada. A tag usada para inserir uma lista desordenada é <ul>, e a inserção de itens segue da mesma forma que a lista anterior. Veja um exemplo:



Veja que no lugar da numeração apareceu apenas um pequeno círculo, que é igual para todos os itens.

Lista de definição

Essa lista é utilizada quando queremos listar alguns itens e mostrar o significado deles. Essa lista é usada de uma forma um pouco diferente das outras listas. A tag usada para iniciar essa lista é a <dl>. Para inserir os itens nessa lista, ao contrário das anteriores, usamos a tag <dt>. E por último, devemos utilizar a tag <dd> para inserirmos a definição do item. Veja um exemplo:

Referências


[1] HTML Tutorial. W3Schools,  2020. Disponível em <https://www.w3schools.com/html/>. Acesso em: 18 de mai. de 2020.

Comentários

Postagens mais visitadas deste blog

CSS: margin, padding e border

HTML: Formulários - caixas de texto

CSS: Introdução