A marca\u00e7\u00e3o (X)HTML utiliza tr\u00eas tipos de listas para apresentar uma lista de informa\u00e7\u00f5es, s\u00e3o elas:<\/p>\n
<\/p>\n
Um exemplo b\u00e1sico da utiliza\u00e7\u00e3o das listas \u00e9 em um mecanismo de navega\u00e7\u00e3o, uma barra de navega\u00e7\u00e3o ou um menu lateral. Infelizmente ainda encontramos sites na internet que n\u00e3o utilizam a marca\u00e7\u00e3o de listas para marcar o conte\u00fado de navega\u00e7\u00e3o do site.
\nTodas as listas devem conter mais do que um elemento.<\/p>\n
Utilizada para marcar uma ordena\u00e7\u00e3o no conte\u00fado. Quando a informa\u00e7\u00e3o tem uma seq\u00fc\u00eancia a ser respeitada. Para iniciar a marca\u00e7\u00e3o utilizamos o elemento ol<\/em>. Depois para marcamos os itens das listas, utilizamos o elemento li<\/em>. As listas s\u00e3o renderizadas com uma marca\u00e7\u00e3o seq\u00fcencial antes do conte\u00fado da lista. Veja o exemplo<\/strong>:<\/p>\n O tipo de lista mais comum de se utilizar em sites s\u00e3o as listas n\u00e3o-ordenadas. Esse tipo de lista \u00e9 utilizado quando a informa\u00e7\u00e3o a ser mostrada n\u00e3o segue uma seq\u00fc\u00eancia. Para iniciar uma lista n\u00e3o ordenada usamos o elemento ol<\/em>. Para marcar os itens dessa lista usamos o mesmo elemento li<\/em>. Veja o exemplo<\/strong>:<\/p>\n S\u00e3o poucos os desenvolvedores que utilizam as listas de defini\u00e7\u00e3o. Essas listas s\u00e3o formadas por uma defini\u00e7\u00e3o da lista e sua descri\u00e7\u00e3o. Para iniciar a lista utilizamos o elemento dl<\/em>. Depois cada grupo de defini\u00e7\u00e3o \u00e9 marcado com dt<\/em>. Para definir o termo da lista usamos o dd<\/em> que devera estar contido dentro do elemento dt<\/em> que por sua vez est\u00e1 dentro do elemento dl<\/em>. Veja o exemplo<\/strong>.<\/p>\n As listas podem ser usadas em conjuntos em um documento, ou seja, simultaneamente, uma lista dentro da outra. Podemos tamb\u00e9m criar n\u00edveis. No exemplo que segue temos uma lista n\u00e3o-ordenada dentro de uma lista ordenada.<\/p>\n\r\n\r\n<ol>\r\n\t<li>Rio Grande Do sul<\/li>\r\n\t<li>Minas Gerais<\/li>\r\n\t<li>Rio de Janeiro<\/li>\r\n<\/ol>\r\n<\/pre>\n
Listas n\u00e3o-ordenadas.<\/h3>\n
\r\n<ul>\r\n<li>Cria\u00e7\u00e3o de sites<\/li>\r\n<li>Montagem e manuten\u00e7\u00e3o de computadores<\/li>\r\n<li>Aulas particulares<\/li>\r\n<\/ul>\r\n<\/pre>\n
Listas de defini\u00e7\u00e3o<\/h3>\n
\r\n<dl> \r\n\t<dt>Curso de web Standards<\/dt> \r\n\t\t<dd>Manh\u00e3\/tarde\/noite<\/dd> \r\n\t\t<dd>20\/12\/2009<\/dd> \r\n\t<dt>Curso de PHP<\/dt> \r\n\t\t<dd>noite<\/dd> \r\n\t\t<dd>22\/12\/2009<\/dd> \r\n<\/dl> \r\n<\/pre>\n
Lista com v\u00e1rios n\u00edveis e n\u00e3o-ordenadas<\/h3>\n
\r\n<ul>\r\n\t<li>Pa\u00edses<\/li>\r\n \t<ul>\r\n \t<li>Am\u00e9rica do sul<\/li>\r\n \t<ul>\r\n \t<li>Brasil<\/li>\r\n <li>Argentida<\/li>\r\n <li>Paraguai<\/li>\r\n <\/ul>\r\n <li>Am\u00e9rica do norte<\/li>\r\n \t<ul>\r\n \t<li>Estados Unidos<\/li>\r\n <li>Canad\u00e1<\/li>\r\n <li>M\u00e9xico<\/li>\r\n <\/ul>\r\n\t\t<\/ul> \r\n\t<li>Cidades<\/li>\r\n \t<ul>\r\n \t<li>Curitiba<\/li>\r\n <li>Salvador<\/li>\r\n <li>Floarian\u00f3polis<\/li>\r\n <\/ul>\r\n<\/ul>\r\n<\/pre>\n
Lista com v\u00e1rios n\u00edveis, n\u00e3o-ordenadas e ordenadas<\/h3>\n
\r\n<ol>\r\n\t<li>Pa\u00edses<\/li>\r\n \t<ul>\r\n \t<li>Am\u00e9rica do sul<\/li>\r\n \t<ul>\r\n \t<li>Brasil<\/li>\r\n <li>Argentina<\/li>\r\n <li>Paraguai<\/li>\r\n <\/ul>\r\n <li>Am\u00e9rica do norte<\/li>\r\n \t<ul>\r\n \t<li>Estados Unidos<\/li>\r\n <li>Canad\u00e1<\/li>\r\n <li>M\u00e9xico<\/li>\r\n <\/ul>\r\n\t\t<\/ul> \r\n\t<li>Cidades<\/li>\r\n \t<ul>\r\n \t<li>Curitiba<\/li>\r\n <li>Salvador<\/li>\r\n <li>Floarian\u00f3polis<\/li>\r\n <\/ul>\r\n<\/ol>\r\n<\/pre>\n