Às vezes, você vai querer criar esboços ou outros tipos de dados complexos em suas páginas HTML5. Você pode facilmente listas ninho no interior uns dos outros, se quiser. Você pode ver uma lista mais complexa descrever nomes do gato populares em os 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) no seu interior. 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 desordenada 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 maneira 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
 
Tigger
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á uma grande

definir em torno toda a lista principal.

• A lista principal tem apenas dois itens da lista.

• Cada um desses itens representa um país.

• Cada país tem um elemento, descrevendo o nome do país no interior do

• .

• Cada país também tem um conjunto com uma lista de nomes.

• O recuo realmente ajuda a ver como as coisas estão ligadas.

Como recuar seu código

Você deve ter notado que o código HTML é geralmente recuado. Os navegadores ignorar todas 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 a marca está dentro do elemento, você pode recuar para indicar isso. Da mesma forma, o

• elementos são sempre recuado para dentro
ou pares.

• Alinhar seus elementos. Se um elemento ocupa mais de uma linha, a linha até o 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 vez 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 de profundidade é comum. Se você usar guias ou demasiados 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 alguma coisa. recuo adequada torna vendo sua organização página 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 pela primeira vez.

   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 o 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 interior.

   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 em os EUA

5. Repita até terminar.

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

6. Validar com frequência.

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