[Dúvida] UL e LI

[ske]

Olá galera! Bom, sou novo aqui no fórum e desde já agracedo a atenção.

Sou iniciante em linguagens de programação web, estou começando com HTML e CSS. Já adquiri algumas noções básicas e felizmente já consigo montar um site em HTML e CSS a partir de um .PSD.

Para estudar, eu baixei alguns arquivos e vi que os mesmos continham algumas 'propriedades' como "ul" e "li". Desde então eu não soube distinguir para que serve os mesmos.

Gostaria de saber mais sobre ambas as propriedades, quais suas funções, quando usa-las e afins. E se possível, gostaria de exemplificações. =)

Obrigado pela atenção, abraços à todos!

[Devexz]

http://www.w3schools.com/html/html_lists.asp

[Rui Carlos]

O elemento ul é usado para criar listas de items, e o elemento li para criar um item.

Por exemplo, o seguinte código:

<ul>
<li>Primavera</li>
<li>Verão</li>
<li>Outono</li>
<li>Inverno</li>
</ul>

produziria uma lista das estações, que por defeito costuma ser formatado do seguinte modo:

• Primavera
  
• Verão
  
• Outono
  
• Inverno
  

Outro exemplo de aplicação é o menu aqui do fórum. No topo deste site tens uma lista de links para o Blog, Fórum, Downloads, Calendário, Membros, etc. E se é uma lista, os elementos ul/li são a forma natural de a especificar. Repara que a formatação dos links não tem nada a ver com as listas habituais (em que aparece um item por linha, com um bullet antes). Mas com CSS podes formatar a lista como quiseres.

Se analisares o código de páginas web, vais encontrar outros usos para estes elementos.

[I-NOZex]

acrescentando ao que foi dito, ul/li sao tag, cujos nomes nao passam de abreviaturas:

ul = unordered list (lista não-ordenada)

li = list item (item de lista)

existe tambem o ol que significa ordered list (lista ordenada)

as vezes sabendo o que significa estas siglas, ajuda a fixar o que faz cada coisa 😉

btw, outro uso que se dá as UL é a criação de menus horizontais/verticais (que agora com o html passa a ser mais correcto o uso de NAV)

Edited April 3, 2014 by I-NOZex

[Rui Carlos]

btw, outro uso que se dá as UL é a criação de menus horizontais/verticais (que agora com o html passa a ser mais correcto o uso de NAV)

O facto de se usar o nav não invalida (ou torna menos correcta) a utilização do ul.

Note: In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation.

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-nav-element

[ske]

Obrigado à todos pela atenção! =)