Listas ordenadas em HTML
A tag HTML <ol>
define uma lista ordenada. Uma lista ordenada pode ser numérica ou alfabética.
Lista HTML ordenada
Uma lista ordenada começa com a <ol>
tag. Cada item da lista começa com a <li>
tag.
Os itens da lista serão marcados com números por padrão:
Exemplo
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lista HTML ordenada - O atributo de tipo
O type
atributo da <ol>
tag, define o tipo do marcador de item da lista:
Type | Description |
---|---|
type="1" | The list items will be numbered with numbers (default) |
type="A" | The list items will be numbered with uppercase letters |
type="a" | The list items will be numbered with lowercase letters |
type="I" | The list items will be numbered with uppercase roman numbers |
type="i" | The list items will be numbered with lowercase roman numbers |
Números:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Letras maiúsculas:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Letras minúsculas:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Números romanos maiúsculos:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Números romanos minúsculos:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Contagem da lista de controle
Por padrão, uma lista ordenada começará a contar a partir de 1. Se você quiser começar a contar a partir de um número especificado, você pode usar o start
atributo:
Exemplo
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Listas HTML aninhadas
As listas podem ser aninhadas (lista dentro da lista):
Exemplo
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
Nota: Um item de lista ( <li>
) pode conter uma nova lista e outros elementos HTML, como imagens e links, etc.
Resumo do capítulo
- Use o elemento HTML
<ol>
para definir uma lista ordenada - Use o atributo HTML
type
para definir o tipo de numeração - Use o elemento HTML
<li>
para definir um item de lista - As listas podem ser aninhadas
- Os itens da lista podem conter outros elementos HTML
Tags de lista HTML
Tag | Description |
---|---|
<ul> | Defines an unordered list |
<ol> | Defines an ordered list |
<li> | Defines a list item |
<dl> | Defines a description list |
<dt> | Defines a term in a description list |
<dd> | Describes the term in a description list |
Para obter uma lista completa de todas as tags HTML disponíveis, visite nossa Referência de tags HTML .