Estrutura básica
Texto
Imagem
Tabela
Link
Lista
Iframe
CSS
Div / Span / Blockquote
Lista
Você pode usar listas para várias funções: fazer uma lista propriamente dita ou simplesmente melhorar seu layout, ou ainda, facilitar o uso do CSS. As listas pode ser: de marcadores, numeradas, glossário.
- listas com marcadores – listas não classificadas
<UL> + tag genérico de item de lista: <LI>
<UL>
<LI>primeiro item com marcador</LI>
<LI>segundo item com marcador</LI>
<LI>último item com marcador</LI>
</UL>
atributos:
<UL type="square"> quadrado
<UL type="circle"> círculo vazado
<UL type="disc"> círculo cheio (é o padrão, pode ser omitido)
Vamos fazer nosso exemplo no bloco de notas? Abra o bloco de notas e copie o código abaixo.
<html>
<head>
<!—título da home page -->
<title>Trabalhando com listas</title>
</head>
<body>
<UL>
<LI>primeiro item com marcador</LI>
<LI>segundo item com marcador</LI>
<LI>último item com marcador</LI>
</UL>
</body>
</html>
Salve seu arquivo como "tag_listas.htm" na pasta "html4blog" e veja o resultado no navegador.
Acrescente agora as seguintes tags (logo após a tag </ul>):
<UL type="square">
<LI>primeiro item com marcador quadrado</LI>
<LI>segundo item com marcador quadrado</LI>
<LI>último item com marcador quadrado</LI>
</UL>
<UL type="circle">
<LI>primeiro item com marcador circular</LI>
<LI>segundo item com marcador circular</LI>
<LI>último item com marcador circular</LI>
</UL>
Salve o arquivo e atualize o navegador para ver o resultado.
É muito simples trabalhar com listas.
- listas numeradas seqüencialmente com algarismos ou letras – listas classificadas
<OL> + tag genérico de item de lista: <LI>
<OL>
<LI>primeiro item numerado</LI>
<LI>segundo item numerado</LI>
<LI>último item numerado</LI>
</OL>
atributos:
<OL type="1"> algarismo arábico (é o padrão, pode omitir)
<OL type="a"> letras minúsculas
<OL type="A"> letras maiúsculas
<OL type="i"> algarismo romano minúsculo
<OL type="I"> algarismo romano maiúsculo
<OL type="I" start="7"> algarismo romano maiúsculo, começando no nº7 (aqui é arábico, mas na lista é romano maiúsculo)
Aproveite o exemplo anterior e crie listas com cada um dos modelos acima.
- listas de glossário
<DL> para indicar o início de uma lista de glossário
<DT> termo de definição
<DD> dado de definição
<H1>Tags de lista em HTML</H1>
<DL>
<DT>O tag UL</DT>
<DD>Cria uma lista não classificada, ou com marcadores.</DD>
<DT>O tag OL</DT>
<DD>Cria uma lista classificada, ou numerada.</DD>
<DT>O tag LI</DT>
<DD>Utilizado tanto em listas classificadas como não classificadas par ressaltar itens.</DD>
<DT>O tag DL</DT>
<DD>Cria uma lista de glossário, ou dicionário.</DD>
<DT>O tag DT</DT>
<DD>Define um termo ou cria uma lista de definições.</DD>
<DT>O tag DD</DT>
<DD>Cria uma definição em uma lista de glossário ou dicionário.</DD>
</DL>
Continue usando o arquivo anterior e copie todo o código acima para ver o resultado de listas tipo glossário. Lembre-se de que o código dev ficar entre as tag <body> e </body>.
- utilizando imagens como marcadores
<DL><DT><img src=“bolinhaverde.gif”>definição número um</DT>
Se quiser usar estas imagens como exemplo, basta salvá-las na sua pasta "html4blog/figuras". 
Vamos continuar a usar a mesma página do primeiro exemplo, portanto só acrescente o código abaixo:
<DL>
<DT><img src="figuras/star1.gif">definição número um</DT>
<DD>Esta é a aparência da definição usando uma estrela.<DD>
<DT>definição número dois</DT>
<DD>Agora estou criando uma nova definição sem estrela.<DD>
<DT><img src="figuras/star2.gif">definição número três</DT>
<DD>Última definição, agora usando uma estrela animada.<DD>
</DL>
- aninhando listas
Último exemplo da nossa relação. Vamos manter o código no mesmo arquivo, assim completamos uma única página com todas as variações de listas para você escolher a sua preferida ou a que melhor se adapta ao seu caso.
<UL>
<LI>item 1 de lista numérico</LI>
<LI>item 2 de lista numérico</LI>
<UL>
<LI>sub item 1 de lista numérico</LI>
<LI>sub item 2 de lista numérico</LI>
</UL>
<LI>item 3 de lista numérico</LI>
</UL>
<OL>
<LI>Tortas</LI>
<UL>
<LI>chocolate</LI>
<LI>ameixa</LI>
</UL>
<LI>Sorvetes</LI>
<UL>
<LI>creme</LI>
<LI>flocos</LI>
</UL>
</OL>
Copie o código acima e cole-o na sua página (antes da tag </body>). Para ver o resultado atualize o navegador.
fim
