HTML - Listas
O HTML oferece aos autores da web três maneiras de especificar listas de informações. Todas as listas devem conter um ou mais elementos de lista. As listas podem conter -
<ul>- Uma lista não ordenada. Isso listará os itens usando marcadores simples.
<ol>- Uma lista ordenada. Isso usará diferentes esquemas de números para listar seus itens.
<dl>- Uma lista de definições. Isso organiza seus itens da mesma maneira que são organizados em um dicionário.
Listas HTML não ordenadas
Uma lista não ordenada é uma coleção de itens relacionados que não possuem ordem ou sequência especial. Esta lista é criada usando HTML<ul>tag. Cada item da lista é marcado com um marcador.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Isso produzirá o seguinte resultado -
O tipo Attribute
Você pode usar typeatributo para tag <ul> para especificar o tipo de marcador que você gosta. Por padrão, é um disco. A seguir estão as opções possíveis -
<ul type = "square">
<ul type = "disc">
<ul type = "circle">Exemplo
A seguir está um exemplo onde usamos <ul type = "square">
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Isso produzirá o seguinte resultado -
Exemplo
A seguir está um exemplo onde usamos <ul type = "disc"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Isso produzirá o seguinte resultado -
Exemplo
A seguir está um exemplo onde usamos <ul type = "circle"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Isso produzirá o seguinte resultado -
Listas ordenadas em HTML
Se você for solicitado a colocar seus itens em uma lista numerada em vez de com marcadores, a lista ordenada em HTML será usada. Esta lista é criada usando<ol>tag. A numeração começa em um e é incrementada em um para cada elemento de lista ordenado sucessivo marcado com <li>.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Isso produzirá o seguinte resultado -
O tipo Attribute
Você pode usar typeatributo para tag <ol> para especificar o tipo de numeração que você gosta. Por padrão, é um número. A seguir estão as opções possíveis -
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.Exemplo
A seguir está um exemplo onde usamos <ol type = "1">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Isso produzirá o seguinte resultado -
Exemplo
A seguir está um exemplo onde usamos <ol type = "I">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Isso produzirá o seguinte resultado -
Exemplo
A seguir está um exemplo onde usamos <ol type = "i">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Isso produzirá o seguinte resultado -
Exemplo
A seguir está um exemplo onde usamos <ol type = "A">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Isso produzirá o seguinte resultado -
Exemplo
A seguir está um exemplo onde usamos <ol type = "a">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Isso produzirá o seguinte resultado -
O Atributo inicial
Você pode usar startatributo para tag <ol> para especificar o ponto de partida da numeração que você precisa. A seguir estão as opções possíveis -
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.Exemplo
A seguir está um exemplo em que usamos <ol type = "i" start = "4">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Isso produzirá o seguinte resultado -
Listas de definição de HTML
HTML e XHTML suportam um estilo de lista que é chamado definition listsonde as entradas são listadas como em um dicionário ou enciclopédia. A lista de definições é a forma ideal de apresentar um glossário, lista de termos ou outra lista de nomes / valores.
A lista de definições usa as três tags a seguir.
- <dl> - Define o início da lista
- <dt> - Um termo
- <dd> - Definição de termo
- </dl> - Define o fim da lista
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>Isso produzirá o seguinte resultado -