Como utilizar as tags html de forma correta?

Olá, amigos.

Vou falar neste post sobre um tema popular mais ainda carente e não implementado fielmente.

Quase todo site que navego eu fico observando como os desenvolvedores utilizaram as tags html, e vejo que em MUITOS sites… ou todos (hehe:))  até mesmo sites grandes como americanas.come-facil.com.br , submarino.com.br estão utlizando as tags html de forma equivocada.

Estava até pensando em fazer um artigo mostrando as falhas dos maiores sites do brasil, fazer uma pequena auditoria de uns 5 sites. Será que rola?

Abaixo vou mostrar alguns exemplos que mais observei:

A tag Table é para tabulação de dados (grid). Agora se for fazer uma lista, utilize Ul, il ou ol.
Exemplo de utilização:
table: informações tabuladas, planilhas e relatorios. Tente criar uma similaridade com o excel.
ul, il ou ol: lista de noticias, o menu do site, mapa do site… assim por diante.

h1, h2, h3, h4: são utilizadas para criar uma hierarquia de assuntos na sua pagina, como se fosse uma lista ordenada. Tipo um sumario de um livro (word).
Exemplo de utilização:
<h1>Produto de informatica</h1>
<h2>Acessorio e periferico</h2>
<h3>Mouse</h3>
<h3>Teclado</h3>
<h3>Impressora</h3>
<h4>Impressora lazer</h4>
<h4>Impressora tinta</h4>
<h2>Memoria</h2>
<h3>Memoria ddr</h3>
<h3>Memoria ddr2</h3>
<h2>HD</h2>
<h2>CPU</h2>

Nota mestre:
Para seus titulos e subtitulos terem mais peso nas buscas utilize somente de h1 até h4 e utilize h1 somente uma vez por página. Já o h2 utilize no máximo cinco por página.
Eu ja vi em alguns sites e achei bem interessante, usar h2 para os itens de menu.

Outra tag que tem finalidade simples e especifica mas que muita gente se perde no conceito são as tags META, em especial os atributos DESCRIPTION e KEYWORDS.

Sinceramente eu não entendo a confusão que a galera faz, é tal simples. 😛

A META Description é para descrever o que aquela pagina representa. Se for uma página detalhando um produto, coloque então a descrição do produto la dentro. Eu não estou falando para copiar e colar a descrição do produto, estou dizendo que deve ser criada uma descrição resumida e objetiva do produto.

A META keywords é para informar as palavras chaves, ou seja palavras importantes e relevantes que exista naquela pagina. Uma boa dica é usar o conteudo das tags h1, h2, h3 e h4 lá dentro e  mais algumas palavras especificas e exclusivas daquela pagina.

O ideal é criar no banco de dados dois novos campos (fields) na tabela de produtos, sendo um para keywords e outra para description.

Para melhores resultados leia abaixo o que vc não pode esquecer:

  1. Se o Description e keywords são especificas para descrever o conteudo da pagina então vc não pode ter páginas com Description e keywords iguais ou muito semelhantes.
  2. Não faça um description muito longo nem muito curto. Use na faixa de 20-50 palavras e 100-250 caracteres.
  3. Use palavras compostas no keyword, pois especificará mais sua pagina, conseguentemente seu publico-alvo. ex.: Troque “informatica” por “produto de informatica”. Troque “sexshop” por “sexshop em uberlândia”
  4. No keyword, tente usar palavras no singular. como assim? tá louco? Explicando resumidamente, imagine que a pessoa pesquisou “produtos de informatica” e vc utilizou “produto de informatica”. A palavra “produto” contem dentro de “produtos” assim vc terá uma leve vantagem sem cima dos outros sites, apenas uma leve vantagem.

Eu acho que a maioria destes problemas estão ligadas as IDES de desenvolvimento, que fazer tudo para os analistas/programadores, uma caixa preta. Hoje em dia os desenvolvedores não sabem ou não tem a curiosidade de ver os htmls que a IDE esta criando tentando otimizar estes codigos. Sinto que eles não se sentem responsaveis por esta ação. Eu sou da epoca que site era feito no bloco de notas. Aprendi a utilização de cada tag html ou pelo menos as mais utilizadas e até hoje uso naturalmente o conceito mesmo utilizando Visual studio.

Uma dica para sua equipe de desenvolvedores… FAÇA UM CURSO BASICO DE HTML, estou falando de html puro… pq muitas escolas de html estão ensinando Dreamweaver no lugar de html.

“Um bom atirador sabe como montar e desmontar sua arma.”

Bons estudos para todos!!! e se estiver com dúvida não tenha vergonha… a dúvida mais simples e básica respondida pode trazer solidez para seu desenvolvimento no dia a dia, fazendo toda a diferença no mercado de trabalho… então é só escrever um comentário.

Um comentário sobre “Como utilizar as tags html de forma correta?

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s