Há vários tipos de listas em HTML. Primeiro, temos as listas de itens. Neste tipo de lista, os itens individuais são equipados com um marcador, chamado de Bullet.
As listas de itens são introduzidas pelo elemento ul. Os itens individuais são marcados pelo elemento li.
<p>Temas atuais do fórum</p> <ul> <li>CSS não está sendo executado</li> <li>Showroom Hollywood estilo dos anos 40</li> <li>Lista de outono de CSS</li> <li>Conectar/desconectar de PHP</li> <li>Meu pequeno showroom - iniciante pede dicas!</li> </ul>
Aqui está um visual do resultado no navegador:
Um Bullet é inserido antes de cada postagem. A aparência padrão disso é determinada pelos navegadores. Embora existam atributos para influenciar a aparência das listas, estes não devem mais ser usados. Em vez disso, entram em jogo as propriedades CSS.
As listas de itens também podem ser aninhadas. Dê uma olhada na imagem a seguir:
Aqui fica claro o que significa tal aninhamento.
A sintaxe para isso é a seguinte:
<ul>
<li>Tutoriais
<ul>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ul>
</li>
<li>Videoaulas
<ul>
<li>3D</li>
<li>Design de mídia</li>
<li>Web</li>
</ul>
</li>
<li>Dicas</li>
<li>Lojas</li>
</ul>
Dentro de um item de lista, pode haver outra lista. Vale ressaltar que não é necessário que seja uma lista de itens. De fato, outros tipos de listas - que serão apresentados neste tutorial - também podem ser inseridos.
Aliás, em HTML5 não é estritamente necessário usar um </li> de fechamento. No entanto, por uma questão de legibilidade, eu sempre recomendaria fechá-lo. No entanto, sintaticamente correto seria algo assim:
<p>Os temas atuais do fórum</p> <ul> <li>CSS não está sendo executado <li>Showroom Hollywood estilo dos anos 40 <li>Lista de outono de CSS <li>Conectar/desconectar de PHP <li>Meu pequeno showroom - iniciante pede dicas! </ul>
Listas Numeradas
Além das listas de itens, também é possível definir listas numeradas. Novamente, uma imagem inicial para mostrar o que são essas listas numeradas.
Os itens da lista são precedidos por números consecutivos. Listas numeradas são introduzidas pelo elemento ol.
O exemplo a seguir mostra como usar esse elemento.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Assim como nas listas de itens, os itens individuais também são marcados pelo elemento li.
Teoricamente, também é possível aninhar listas de itens.
<ol>
<li>Tutoriais
<ol>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ol>
</li>
<li>Videoaulas
<ol>
<li>3D</li>
<li>Design de mídia</li>
<li>Web</li>
</ol>
</li>
<li>Dicas</li>
<li>Lojas</li>
</ol>No entanto, o resultado no navegador é decepcionante.
Uma numeração seguindo o seguinte esquema não é alcançada:
1. Tutoriais 2D
1.1 3D
1.2 Web
- Videoaulas 3D
2.1 Design de mídia
2.2 Web - Dicas
- Lojas
Isso não é possível com apenas HTML. Na verdade, é necessário recorrer ao CSS para numerar automaticamente o conteúdo de acordo com esse esquema.
Listas de Definições
Outra variante de lista são as chamadas listas de definições. Mais um exemplo de como essa lista se parece no navegador:
O principal uso das listas de definições são os glossários. Aqui está a sintaxe que resultou na saída mostrada anteriormente:
<dl>
<dt>AM</dt>
<dd>AM - Correio Aéreo</dd>
<dd>AM - Marechal do Ar</dd>
<dd>AM - Amberg</dd>
<dd>AM - Americium</dd>
<dd>AM - Amstetten</dd>
<dt>AN</dt>
<dd>AN - acima mencionado</dd>
<dd>AN - Nó de Acesso</dd>
<dd>AN - Ancona</dd>
</dl>Ao lidar com listas de definição, sempre há três elementos envolvidos. As listas são iniciadas pelo elemento dl. Esta é a estrutura externa. A expressão a ser definida é marcada por um elemento dt. Este é basicamente o termo da definição. Por sua vez, a descrição da definição é fornecida pelo elemento dd.
Além disso, é possível aninhar listas de definição. Isso funciona da mesma forma que foi mostrado nas outras variantes de listas.
A aparência padrão das listas de definição é determinada pelo navegador. No entanto, no final das contas, você pode definir o layout desejado por meio de CSS.
Nas versões anteriores do HTML, havia também listas de menu e diretórios. Para isso, eram usados os dois elementos menu e dir. O elemento dir não está mais presente no HTML5. A situação é diferente com o elemento menu. Esse elemento foi recém-implementado e no futuro poderá ser utilizado para menus de contexto e barras de ferramentas. Aqui está um exemplo de como o W3C imagina uma aplicação típica de menu:
<menu type="toolbar"> <li> <menu label="Arquivo"> <button type="button" onclick="fnew()">Novo...</button> <button type="button" onclick="fopen()">Abrir...</button> <button type="button" onclick="fsave()">Salvar</button> <button type="button" onclick="fsaveas()">Salvar como...</button> </menu> </li> <li> <menu label="Editar"> <button type="button" onclick="ecopy()">Copiar</button> <button type="button" onclick="ecut()">Recortar</button> <button type="button" onclick="epaste()">Colar</button> </menu> </li> <li> <menu label="Ajuda"> <li><a href="help.html">Ajuda</a></li> <li><a href="about.html">Sobre</a></li> </menu> </li> </menu>
No entanto, atualmente nenhum navegador suporta isso desta forma.
Portanto, o uso do menu neste momento também não é recomendado.
Estilizando listas
Uma observação sobre as listas. Em muitos sites, a estilização das listas é feita através de atributos HTML adequados. Por exemplo, ao usar <ul type="square"> é possível fazer com que retângulos sejam exibidos antes dos itens de listas não ordenadas.
Da mesma forma, para listas numeradas, é possível definir o tipo de enumeração.
<ol type="A">
No entanto, é importante não usar tudo o que é oferecido. Melhor é fazer uso das propriedades CSS adequadas. Portanto, você deve realmente usá-las para ajustar as listas de acordo com seus desejos. Informações detalhadas sobre CSS serão fornecidas ao longo desta série.
