Para que servem estruturas aninhadas?

Geralmente quando se migra da forma antiga de se estruturar sites, utilizando tabelas para sustentar o conteúdo, para os web standards, a antiga maneira de pensar acaba sendo um péssimo hábito difícil de deixar. Acho que o “conceito” da metodologia antiga que as pessoas tem mais dificuldade de abandonar é o de aninha tabelas. Ou seja, colocavam-se tabelas dentro de outras criando grupos separados de blocos distintos de conteúdo. Isso era feito para conseguir o efeito desejado no design; quanto mais blocos de tds e tabelas existir, mais conteúdo aninhado em camadas se conseguia inserir. Assim era possível colocar elementos gráficos sobre outros.

Geralmente quando a pessoa já sabe escrever HTML mas ainda estrutura um site em tabelas e está começando a aprender a escrever de acordo com os padrões, os primeiros passos geralmente se dão ao simplesmente trocar as tabelas por divs. Foi assim comigo no início, foi assim com outras pessoas que eu acompanhei o aprendizado e observo dezenas de sites que são feitos desta maneira. Nesta fase, “semântica” ou é um luxo ou algo sem significado. Naturalmente. O que acontece é que o processo de assimilação nestes casos específicos de pessoas que estão migrando de uma maneira de escrever (e de pensar) para outra – o que é diferente de alguém que tem a oportunidade de aprender web standards desde o início – é que ela ainda mantêm na cabeça a maneira com que as coisas se organizam, ou seja, tudo aninhado.

A Semântica da coisa

Libertar-se disso é um processo que implica em aprender a escrever um código semântico, relacionando o significado do conteúdo a uma tag. O que isto significa? Antes geralmente tudo estava dentro de uma <td>, agora você precisa aprender que existe uma tag apropriada e relacionada a certos tipos de conteúdo. Se você for escrever um endereço, uma receita de bolo, uma listagem de jogadores que possuem cartão amarelo, um artigo com títulos e subtítulos, uma lista de links que você chama de menu, um glossário e por aí vai. Estes conteúdos possuem um significado, mas para que eles possam ser indexados e relacionados por mecanismos de busca, você precisa dizer ao certo o que eles realmente representam através do uso de tags corretas. Para uma listagem você possui três tipos delas, como eu escrevi aqui anteriormente, para o endereço existe o <address>, para títulos os headings e assim por diante.

Novas estruturas

Separar o conteúdo da apresentação é uma regra. Você deve se dedicar a conseguir deixar a aparência do seu site completamente em uma folha de estilos externa. Um código XHTML com estilos inseridos no código, bgs, fonts e outras coisas desnecessárias é apenas transtorno. Depois dessa façanha você deve se concentrar em aprender a estruturar seu site de forma mais limpa, sem ficar aninhando divs dentro de outras divs infinitamente. Com certeza, criar divisões de bloco serão necessárias, esse é o significado do div, mas vale lembrar que cada elemento do HTML é tão manipulável quanto o próprio div. Tudo pode ter posicionamento absoluto, tudo pode possuir um background, tudo pode ter tamanho e altura definidos tanto quanto o famoso div. Se você pode manipular uma listagem por si só, por que coloca-la dentro de um div que está dentro de outro e de outro? Obviamente se ela faz parte de um bloco junto de outros elementos, nada mais apropriado do que separar este bloco colocando-o dentro de uma div, mas não é preciso tornar sua página em uma convenção internacional de divs.

O melhor exercício para se alcançar um código limpo, semanticamente correto e bem estruturado é procurar criar desafios para você mesmo. Observe esta lista.

  1. Primeiro aprenda muito sobre as tags do XHTML para aprender a escrever corretamente. Este é o principal passo.
  2. Toda a apresentação do seu site tem que estar em uma folha de estilos externa. Se algo estiver fora desta regra, “no donuts for you”!
  3. Verifique novamente se você está utilizando as tags correspondente ao conteúdo correto. Esta regra é tão importante que ele deve ser uma rotina até que você não erre mais.
  4. Procure retirar divs de sustentação e tentar alcançar exatamente o mesmo efeito de apresentação. Se para posicionar um elemento você precisa colocá-lo dentro de uma div, que estava dentro de outra e que estava dentro de outra, comece arrancando as divs, uma por uma, e tente alcançar o mesmo efeito visual com uma tag aninhada a menos. Faça este exercício repetidamente até que você se liberte do vício de aninhar tudo o que vê. Ainda será preciso criar blocos de divs? Claro que sim, mas de forma racional e sensata. Não existe validador no mundo que consiga verificar se seu código foi bem escrito ou não. O que eles fazem é te informar se não há erros na sintaxe do seu código e nunca te informar se ele está ou não semanticamente correto.

Feitos todos estes passos você estará pronto para começar sua carreira como guru do CSS. E ao fim você verá que sua maneira de estruturar elementos de HTML foi completamente modificada.

  • https://accounts.google.com/ServiceLogin?service=blogger&hl=en&passive=86400&continue=http://www.blogger.com/blogin.g?blogspotURL%3Dhttp://evolutionfields.blogspot.com/%26zx%3Dzpfseudkiejh juliano

    Ae, esse texto ilustra bem a transição do modo antigo para os ws, mas acho que trocar tabelas por div's é normal no começo, depois o cara pensa, e se eu colocasse um background na lista? e por aí vai.

    Já quanto a indexação, acho que isso é só o começo, é o primeiro mecanismo que age dessa maneira, mas você pode pensar por exemplo em uma busca apenas por ingredientes de bolo.

    Vai uma dica aí, por que você não faz um post com todas as tags explicando cada uma? Tenho certeza que viraria referência.

    Abrass

  • http://www.direis.com Diego

    É eu venho estudando standards a algum tempo e tal estou sempre aninhando em divs :) mais tudo bem agora eu to percebendo melhor a importancia do codigo ser semantico e tal… gostei do artigo da uma clareada muito boa nas ideias e ainda por cima acabei de usar eu tava quase colocando div nos label pq eu não tava conseguindo deixar com um tamanho agora ta bala acabei vendo o code aqui precisa usar um float pra funcionar… viva o css

  • http://www.brunodulcetti.com/blog/ Bruno Dulcetti

    Manero Henrique. Quem tá inciando pensa que somente em mudar de table, tr, td para div já é o suficiente. Agora é esperar que todos tenham esse interesse de "semanticar" seus códigos. :D

  • Pedro

    Achei muito claro e interessante o artigo. Além de tudo mostra que eu não sou o único a fazer isso de tascar div em tudo. :P

    Achei muito interessante a idéia do Juliano de se fazer um post explicando as tags, seria de grande ajuda para quem está iniciando, como eu mesmo.

  • Michel

    Gostei do artigo e me identifiquei pois estou deixando de usar tabelas e cai nessa div mania sem querer ^^ Mas como os outros colegas disseram este é um caminho para se aprender. Vou estudar mais.