Este post foi migrado lá do Melancia na Cabeça.
Sabe Matrix? Pois é… Comece a se conformar que olhar para códigos e ver documentos é possível.
Páginas em XHTML (o X antes é só pra dizer que é extensível, não tem nada a ver com os X-men) são os códigos e o que você vê no navegador é o resultado (o que você vê no navegador na verdade é o resultado do seu HTML somado com seu CSS, mas explico depois). O grande problema aparece quando se percebe que para o mesmo resultado existe uma infinidade de códigos possíveis. Existem muitos motivos para se fazer HTML da melhor forma possível indo de profissionalismo e cuidado à otimização para busca.
Para a criação de um bom HTML é preciso um pouco de prática e senso crítico. Para quem nunca viu, o processo normalmente é assim: o webdesigner cria um layout (no Photoshop, no Illustrator ou outro parecido) e você cria o HTML e o CSS (essa função também é conhecida como HTMLer).
Você então olha pra cara do layout e analisa cada elemento buscando identificar qual é o significado daquela parte no todo. Por exemplo o layout de uma página interna de um site: Existe um topo, um menu lateral, o conteúdo e um rodapé.
Se essas partes estão claramente divididas cada uma delas provavelmente será uma div (o provavelmente é porque existem exceções), ou seja, uma divisão da página. Se no topo tem um título provavelmente ele será o <h1> da página, ou seja, o primeiro título, o título de maior importância. Se ao lado existe um slogan está aí um candidato a <h2>.
O menu lateral provavelmente é uma lista de links, então tasque uma <ul> e pra cada item uma <li>. Tente entender cada tag que você usar para facilitar a memorização – todo nome de tag tem um porquê. A <ul> é ul por ser uma lista desordenada – unordered list – e a <li> por ser um item da lista – list item.
No conteúdo pode ter uma penca de coisas, mas possivelmente será só uma penca de parágrafos então vamos de <p> pra eles.
No rodapé mora um perigo: se for uma lista de itens (tipo “Fale Conosco”, “Mapa do Site”, etc) também vá de <ul>. Mesmo tendo seus itens um do lado do outro continua sendo uma lista.
Quando terminar abra seu HTML e veja se realmente o que está sendo mostrado pelo seu navegador é o que o layout está transmitindo. Se estiver de acordo com o planejado chegou a hora de estilizar, se não volte e melhore seu código.
Um código bem escrito ajuda não só a diminuir o tamanho do arquivo como também a ser entendido melhor pelos buscadores e leitores de tela pra cegos (sim, cegos usam internet).
Para ver se seu código está no mínimo bem formado utilize os validadores da W3C (existe extensão do firefox pra isso), mas lembre-se: nem sempre código validado pela W3C é semântico, ou seja, tem no seu conteúdo o significado desejado.
Antes que surja alguma dúvida: lista não é só pra links não tá?
Outra coisa importante: esqueça a parte estética, isto é, não veja cores, posicionamentos, alinhamentos, negritos, itálicos, nada disso entra no seu HTML. Nele entra só o que cada coisa é. Seu HTML só vai parecer com o layout proposto quando começar a parte de CSS, mas isso fica para um próximo post.
Abraços e comentem!
