Às vezes, você vai querer criar esboços ou outros tipos de dados complexos em suas páginas HTML5. Você pode facilmente listas ninho dentro de si, se quiser. Você pode ver uma lista mais complexa descrevendo nomes do gato populares nos EUA e Austrália.

Este exemplo usa uma combinação de listas para fazer seu trabalho. Este contém uma lista de dois países: os EUA e Austrália. Cada país tem um título H3 e uma outra lista (ordenada) dentro dela. Você pode aninhar vários elementos dentro de uma lista, mas você tem que fazê-lo com cuidado se você quiser que a página para validar.

Neste exemplo, há uma lista não ordenada com apenas dois elementos. Cada um desses elementos contém um cabeçalho e uma lista ordenada. A página lida com todos esses dados de uma forma relativamente limpa e valida corretamente.

O exemplo lista aninhada

Todo o código para nestedList.html é reproduzido aqui:

Listas aninhadas
Nomes do gato populares
EUA
Tigre
Tigre
Max
Smokey
Sam
Austrália
Oscar
Max
Tigre
Sam
enevoado

Aqui estão algumas coisas que você pode notar nesta listagem de código:

Há um grande conjunto em torno toda a lista principal.

Como recuar seu código

Você deve ter notado que o código HTML é geralmente recuado. Os navegadores ignorar tudo recuo, mas ainda é um hábito de codificação importante.

Há muitas opiniões sobre como o código deve ser formatado, mas o formato padrão irá atendê-lo bem até que você desenvolver seu próprio estilo.

Geralmente, as seguintes regras são aplicadas ao código HTML travessão:

• Recuar cada elemento aninhada. Porque o etiqueta está no interior da elemento, você pode recuar para indicar isso. Da mesma forma, o

• elementos são sempre recuadas dentro

ou pares.
• 
  
  
  

  Alinhar seus elementos. Se um elemento ocupa mais de uma linha, alinhar a tag terminando com a marca de início. Dessa forma, você sabe o que termina o quê.

• Use espaços, não Tabs. O caractere de tabulação muitas vezes causa problemas no código-fonte. Guias diferentes formatos editores de forma diferente, e uma mistura de tabulações e espaços pode fazer seu olhar página cuidadosamente formatado terrível quando você vê-lo em outro editor.

  A maioria dos editores têm a capacidade de interpretar a tecla tab como espaços. É uma ótima idéia para encontrar esse recurso em seu editor e ligá-lo, portanto, qualquer tempo que você pressionar a tecla tab, é interpretado como espaços. Em Komodo Edit, você fazer isso em Editar &# 10154- Preferências &# 10154- editor &# 10154- recuo.

• Use dois espaços. A maioria dos programadores utilizar dois ou quatro espaços por nível de recuo. elementos HTML podem ser aninhados muito profundamente. Indo sete ou oito camadas profundas é comum. Se você usar guias ou muitos espaços, você vai ter muito espaço em branco que você não pode ver o código.

• Terminar na margem esquerda. Se você terminar a página e você não está de volta para a margem esquerda, você esqueceu de terminar algo. recuo adequada torna vendo sua organização page fácil. Cada elemento deve estar alinhada com a sua marca de fechamento.

Como construir uma lista aninhada

Quando você olhar sobre o código para a lista aninhada, pode parecer intimidador, mas não é realmente tão difícil. O segredo é construir a lista De fora para dentro:

1. Criar a lista exterior primeiro.

   Construir a lista principal (se é ordenada ou desordenada). No exemplo, havia originalmente apenas a lista não ordenada com os dois países na mesma.

2. Adicionar itens de lista para a lista externa.

   Se você quiser texto ou manchetes na lista maior, você pode colocá-los aqui. Se você está colocando nada além de uma lista dentro de sua lista principal, você pode querer colocar algumas tags de espaço reservado lá só assim você pode estar trabalhando certeza de tudo.

3. Validar antes de adicionar o próximo nível lista.

   listas aninhadas pode confundir o validador (e você). Validar seu código com a lista externa para se certificar de que não há problemas antes de adicionar listas internas.

4. Adicionar a primeira lista interna.

   Depois de conhecer a estrutura básica está bem, adicione a primeira lista interior. Para o exemplo, esta foi a lista ordenada de nomes do gato nos EUA

5. Repita até terminar.

   Continue adicionando listas até sua página parece certo.

6. Validar com freqüência.

   É muito melhor para validar as you go do que esperar até que tudo está terminado. Pegar seus erros cedo para que você não reproduzi-los.