Tags aninhadas e indentação de código HTML

A medida que formos estudando mais e mais tags em nossa apostila online de HTML, você irá notar que nosso código vai ficando cada vez maior e mais complexo, e será necessário ter organização, e isso é conseguido através das tags aninhadas e indentação de código.

Tags aninhadas em HTML

Não é difícil encontrar páginas na internet com milhares de linhas de código, e se formos analisar um portal de médio porte inteiro, o código passa fácil de milhões de linha.

Nesse tutorial de HTML, não vamos aprender algo específico de HTML ou mais uma tag, vamos aprender os conceitos de tags aninhadas e indentação de código, que são técnicas usadas para organizar melhor seus códigos HTML, que irão lhe ajudar muito na hora de criar seu site.

Como o próprio nome diz, tags aninhadas são aquelas que estão misturadas, embaralhadas, uma dentro das outras. Mas nunca de forma aleatória.

Por exemplo, aprendemos duas tags: <html> e <marquee>, se quisermos aninhá-las, fazemos:

<html>
<marquee>
Texto que vai aparecer rolando na tela!
</marquee>
</html>

Ou seja, colocamos a tag marquee dentro da tag html.
Note que a tag <HTML> ela é a mais geral, ou seja, ela engloba a outra, e só é fechada quando as de dentro também fecharem. É como se houvesse uma hierarquia entre as tags.

Vamos supor que os locais de uma casa sejam tags.
Um possível código aninhado que descrevesse essa casa seria:

<casa>
Entrando na casa...
<quarto>
Aqui dentro fica meu quarto
</quarto>
Sai do quarto, mas ainda estou na casa
</casa>
Agora sim saí da casa

E se dentro do quarto houvesse um banheiro?

<casa>
<quarto>
<banheiro>
Estamos no banheiro!
</banheiro>
</quarto>
</casa>


Note que a tag quarto está dentro da tag casa, pois o quarto fica realmente dentro da casa.
Agora note como a tag banheiro fica dentro da tag quarto, pois aquele banheiro fica dentro do quarto.
Mas a tag banheiro também está dentro da tag casa, que é a tag maior, de mais alta hierarquia.

Indentação de códigos HTML

Indentar nada mais é que organizar seu código, fazer com que ele fique mais bonito.

Mas não é só estética, como vamos mostrar aqui, eles podem ajudar muito o Webmaster, pois fica mais fácil de encontrar determinada informação/código quando estamos criando um site.

Para fazer a indentação, temos que usar de espaços em branco (ou TAB) em nosso código HTML.

As tags correspondentes (de abertura e fechamento) devem ficar na mesma linha vertical, e as tags internas (aninhadas) devem ficar a frente.

Veja os códigos HTML, mas agora indentados:

<casa>
 Entrando na casa...
 
 <quarto>
  Aqui dentro fica meu quarto
 </quarto>
 
  Saí do quarto, mas ainda estou na casa
</casa>
Agora sim saí da casa


<casa>
 <quarto>
  <banheiro>
   Estamos no banheiro!
  </banheiro>
 </quarto>
</casa>

Veja como facilita a leitura, entendemos bem mais facilmente a hierarquia das tags.
Lembre-se: quando for criar seu site, usará dezenas, centenas e até milhares de tags, por isso a organização é essencial. Há muitos Webmasters por aí que simplesmente ignoram isso, mas aqui em nossa apostila de HTML, daremos atenção não só ao ato de criar uma página, mas também de criar de forma mais profissional.



Tags de HTML de mesma hierarquia

Não é necessário que todas as tags estejam dentro uma das outras, elas podem estar dentro de um mesmo nível hierárquico. Por exemplo, vamos criar uma código HTML de uma casa, que tenha quarto, sala e cozinha:

<casa>
 <quarto>
  Estamos no quarto!
  <banheiro>
   Agora, dentro do banheiro do quarto!
  </banheiro>
 </quarto>
 
 <cozinha>
  Que tal um lanche na cozinha?
 </cozinha>
</casa>

Tanto quarto como a cozinha estão dentro da casa, mas o quarto não está dentro da cozinha (ainda bem), nem a cozinha está dentro do quarto. Ou sejam, são tags de mesmo nível.
Tivemos o cuidado de colocar as tags de mesmo nível da mesma cor, para você notar mais claramente a hierarquia,

Exercícios de HTML:
1. Crie um código, como foi usado nos exemplos dessa aula de nossa apostila de HTML, que mostra a organização de sua casa. Use código indentado, tags aninhadas e de mesmo nível.

2. Assim como fizemos usando o exemplo de uma casa, crie seu próprio código, mas agora que mostre a hierarquia de sua cidade, em relação ao seu estado, região, país e continente.

2 comentários:

Beth Garcia disse...

Finalmente achei uma explicação inteligente! Isso sim é criar a conscientização da construção do texto html! Esse é meu método naquilo que ensino! Tem que se construir uma linha de raciocínio! Porque conscientizada uma ordem, não tem porquê decorar! É saber exatamente o caminho a seguir! Muito obrigada pelas explicações!Estou construindo meu blog, que nada tem a ver com tutoriais de html,e sim artesanato, mas como ''quebrei a cabeça" para aprender tudo o que já aprendi,para poder costumizar da melhor forma possivel, resolvi divulgar sites que ensinam, para iniciantes leigos como eu! E o site já está na minha lista! Thanks again! :D

Géberson Cardoso disse...

Esse cara que escreveu esse tutorial é simplesmente muito bom. Você deveria dar aula em alguma universidade (se é que já não faz isso). Sou aluno de Sistema de informação na PUC Minas, são poucos os professores lá que conseguem ensinar de forma tão simples e de fácil compreensão. Parabéns! Se resolver dar aula em alguma universidade, escolha a PUC de contagem, ficarei feliz em ser seu aluno. hahahaha