Início
Entrar
Cadastre-se
Mensagens
MoedasPela quantidade de tutoriais ensinando intrincados efeitos utilizando CSS e javascript é fácil termos a impressão que só existem desenvolvedores web experientes. O que sem dúvida é um engano.
Diariamente entra gente nova no mercado web e nem sempre com muito conhecimento. Vendo esta avalanche de informação ficam desnorteados e como não entendem muitos apenas copiam e colam. Tirando os preguiçosos, alguns simplesmente não conseguem encontram um material bem organizado que explique o básico.
E no caso de uma página de internet, o básico é a linguagem HTML. Já vi programadores criando código desnecessário ou inventando soluções mirabolantes devido à falta de conhecimento real sobre os elementos da página.
Neste artigo não vou abordar todas as tags HTML. Vou explicar ao papel das mais importantes, o que muda nelas com o HTML 5 e como utilizá-las corretamente para conseguir um melhor posicionamento em sites de busca.
HTML é a sigla para Hyper Text Markup Language, é uma linguagem para marcação de hipertexto. O que segundo diretrizes, não torna o HTML uma linguagem de programação. E sim uma linguagem de estruturação. Aí esta o principal motivo pelo qual não podemos inserir código CSS, de formatação, dentro das tags HTML.
A estrutura básica de uma página HTML é:
XHTML
O XHTML surgiu com a popularização dos dispositivos móveis e visualização dos websites em outras mídias. Ele tornou a escrita do HTML mais limpa e organizada baseando-se nas regras do XML.
Mas ao contrário do que somos levados a pensar, o XHTML não é uma versão posterior ao HTML 4, mas apenas uma forma de estruturar o código de forma otimizada. A W3C considera o XHTML uma recomendação apenas.
De qualquer maneira são apenas rótulos e uma página em XHTML é visivelmente superior em velocidade e percepção pelos mecanismos de busca.
Entre os melhoramentos esta a obrigatoriedade de escrever as tags em minúsculo, o fechamento dos elementos vazios e aninhamento correto das tags e inserir código CSS inline é pecado mortal.
Os elementos utilizados para criar a estrutura são chamados de tags. Elas propriamente ditas não são mostradas pelo navegador que as utiliza apenas para interpretar o conteúdo da página. Ficam entre sinais de maior (>) e menor (<). Quase sempre trabalham em dupla que englobam a parte do código. Uma abre e a outra fecha.
Já nos elementos vazios, que são tags que não trabalham em dupla, por exemplo br, hr, img, o fechamento ocorre da seguinte maneira:
No HTML 5, o fechamento dos elementos vazios é opcional.
Antes mesmo da abertura da primeira tag HTML, é preciso informar ao navegador como o documento será estruturado. Existem três tipos:
Strict – O código segue rigorosamente os padrões sem misturar formatação com marcação. Além de outros por menores.
Transitional – O código segue os padrões na maioria das vezes, mas podem haver deslizes.
Frameset – A página é estruturada utilizando frames.
Sem uma declaração, o navegador acaba interpretando a página ao seu modo, chamado de quirks mode, o que pode desconfigurar o layout totalmente.
Para trabalhar com o HTML, o aconselhável é o strict. A declaração padrão fica:
No HTML 5, a definição do DOCTYPE foi reduzida ao extremo. Se a página for estruturada com esta versão, basta declarar:
Você pode informar quem desenvolveu a página, palavras-chave, uma breve descrição sobre o conteúdo, atualizar a página automaticamente após algum tempo (refresh), a codificação da página e por aí vai. Vejamos três dos atributos mais úteis para esta tag:
As duas primeiras linhas dispensam explicações e tem como objetivo os buscadores. Apenas uma observação sobre a segunda: devido a utilização para fins maléficos, a declaração de palavras-chave já é considerada desnecessária. Mas eu sempre coloco por garantia.
A última linha informa o tipo de conteúdo da página, que é HMTL e a codificação dos caracteres. Muitos problemas de acentuação nas palavras ocorrem devido à configuração desta linha.
De forma resumida, o ISO é preferencial para idiomas advindos do latim, caso do português, pois as palavras podem conter acentos. O UTF-8 é um padrão internacional que também pode ser utilizado em páginas com palavras acentuadas com tanto que os acentos sejam representados por entidades. Neste caso no código da página o “á” fica:
Em última análise também influencia a configuração do navegador do usuário.
No HTML 5 esta linha foi simplificada e passa a ser declarada assim:
Para uma lista mais completa dos atributos do elemento meta acesse:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Ainda no cabeçalho da página, a nova versão do HTML trouxe uma mudança na declaração dos estilos e scripts.
Agora não precisa declarar o type.
Esta mudança já pode ser aplicada às páginas ainda desenvolvidas com a versão 4 ou com XHTML.
Em tempos do Rei Google, uma página além de parecer atraente para o usuário, precisa ser relevante para os mecanismos de busca. Livros e discussões a este respeito são muitos e até o número de vezes que a palavra-chave aparece no texto é contado para obter melhores resultados.
Sem o intuito de aprofundar o assunto, vou apresentar os atributos e elementos HTML mais relevantes na página quando o propósito é a otimização para os mecanismos de busca.
title (elemento): Começamos pelo cabeçalho da página. O elemento title tem o maior peso na definição da relevância da página em relação as palavras-chave. Parte-se do suposto de que se o desenvolvedor colocou no título da página a palavra é porque ela realmente é importante e faz parte do conteúdo.
title(atributo) : Utilizado principalmente em links, este atributo pode ser configurado para outros elementos também, como imagens. Quase sempre tem a palavra-chave.
h1-h6: Definem os títulos. Sendo que o h1 tem o maior tamanho de fonte padrão e é o mais relevante de todos. Englobe o título principal com esta tag e conforme a importância utilize os outros até chegar ao h6.
strong e italic: Em ordem de importância, as palavras negritadas vem logo depois dos cabeçalhos (h1-h6). As palavras em itálico completam a lista.
alt: Um texto alternativo a ser mostrado enquanto a imagem não carrega ou não foi encontrada é uma bem-vinda adição nos esforços para atingir bom posicionamento nas buscas.
A correta utilização destas tags por si só trará ganhos significativos de SEO.
Fonte WebMaster
Diariamente entra gente nova no mercado web e nem sempre com muito conhecimento. Vendo esta avalanche de informação ficam desnorteados e como não entendem muitos apenas copiam e colam. Tirando os preguiçosos, alguns simplesmente não conseguem encontram um material bem organizado que explique o básico.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
E no caso de uma página de internet, o básico é a linguagem HTML. Já vi programadores criando código desnecessário ou inventando soluções mirabolantes devido à falta de conhecimento real sobre os elementos da página.
Neste artigo não vou abordar todas as tags HTML. Vou explicar ao papel das mais importantes, o que muda nelas com o HTML 5 e como utilizá-las corretamente para conseguir um melhor posicionamento em sites de busca.
HTML é a sigla para Hyper Text Markup Language, é uma linguagem para marcação de hipertexto. O que segundo diretrizes, não torna o HTML uma linguagem de programação. E sim uma linguagem de estruturação. Aí esta o principal motivo pelo qual não podemos inserir código CSS, de formatação, dentro das tags HTML.
A estrutura básica de uma página HTML é:
- Código:
<html>
<body>
<p>texto</p>
</body>
</html>
XHTML
O XHTML surgiu com a popularização dos dispositivos móveis e visualização dos websites em outras mídias. Ele tornou a escrita do HTML mais limpa e organizada baseando-se nas regras do XML.
Mas ao contrário do que somos levados a pensar, o XHTML não é uma versão posterior ao HTML 4, mas apenas uma forma de estruturar o código de forma otimizada. A W3C considera o XHTML uma recomendação apenas.
De qualquer maneira são apenas rótulos e uma página em XHTML é visivelmente superior em velocidade e percepção pelos mecanismos de busca.
Entre os melhoramentos esta a obrigatoriedade de escrever as tags em minúsculo, o fechamento dos elementos vazios e aninhamento correto das tags e inserir código CSS inline é pecado mortal.
Tags Do HTML
Os elementos utilizados para criar a estrutura são chamados de tags. Elas propriamente ditas não são mostradas pelo navegador que as utiliza apenas para interpretar o conteúdo da página. Ficam entre sinais de maior (>) e menor (<). Quase sempre trabalham em dupla que englobam a parte do código. Uma abre e a outra fecha.
- Código:
<p>Texto entre tags.</p>
Já nos elementos vazios, que são tags que não trabalham em dupla, por exemplo br, hr, img, o fechamento ocorre da seguinte maneira:
- Código:
<img src=”imagem.jpg”/>
No HTML 5, o fechamento dos elementos vazios é opcional.
DOCTYPE
Antes mesmo da abertura da primeira tag HTML, é preciso informar ao navegador como o documento será estruturado. Existem três tipos:
Strict – O código segue rigorosamente os padrões sem misturar formatação com marcação. Além de outros por menores.
Transitional – O código segue os padrões na maioria das vezes, mas podem haver deslizes.
Frameset – A página é estruturada utilizando frames.
Sem uma declaração, o navegador acaba interpretando a página ao seu modo, chamado de quirks mode, o que pode desconfigurar o layout totalmente.
Para trabalhar com o HTML, o aconselhável é o strict. A declaração padrão fica:
- Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
…
</html>
No HTML 5, a definição do DOCTYPE foi reduzida ao extremo. Se a página for estruturada com esta versão, basta declarar:
- Código:
<!DOCTYPE html>
<html>
</html>
Elemento Meta Do HTML
Dentro do elemento head estão contidas informações gerais sobre a página. São as meta-informações, que tem mais significado para os navegadores e sistemas de busca do que para o usuário.Estas meta-informações possuem um elemento específico para serem declaradas, o meta.Você pode informar quem desenvolveu a página, palavras-chave, uma breve descrição sobre o conteúdo, atualizar a página automaticamente após algum tempo (refresh), a codificação da página e por aí vai. Vejamos três dos atributos mais úteis para esta tag:
- Código:
<meta name="description" content=”Resumo sobre o conteúdo da página" />
<meta name="keywords" content="palavras, chave" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
As duas primeiras linhas dispensam explicações e tem como objetivo os buscadores. Apenas uma observação sobre a segunda: devido a utilização para fins maléficos, a declaração de palavras-chave já é considerada desnecessária. Mas eu sempre coloco por garantia.
A última linha informa o tipo de conteúdo da página, que é HMTL e a codificação dos caracteres. Muitos problemas de acentuação nas palavras ocorrem devido à configuração desta linha.
De forma resumida, o ISO é preferencial para idiomas advindos do latim, caso do português, pois as palavras podem conter acentos. O UTF-8 é um padrão internacional que também pode ser utilizado em páginas com palavras acentuadas com tanto que os acentos sejam representados por entidades. Neste caso no código da página o “á” fica:
- Código:
á
Em última análise também influencia a configuração do navegador do usuário.
No HTML 5 esta linha foi simplificada e passa a ser declarada assim:
- Código:
<meta charset=" ISO-8859-1"/>
Para uma lista mais completa dos atributos do elemento meta acesse:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Outra Mudança No HTML 5
Ainda no cabeçalho da página, a nova versão do HTML trouxe uma mudança na declaração dos estilos e scripts.
- Código:
<script type="text/javascript">
//cod
</script>
<style type="text/css">
//cod
</style>
Agora não precisa declarar o type.
- Código:
<script>
//cod
</script>
<style>
//cod
</style>
Esta mudança já pode ser aplicada às páginas ainda desenvolvidas com a versão 4 ou com XHTML.
HTML Para SEO
Em tempos do Rei Google, uma página além de parecer atraente para o usuário, precisa ser relevante para os mecanismos de busca. Livros e discussões a este respeito são muitos e até o número de vezes que a palavra-chave aparece no texto é contado para obter melhores resultados.
Sem o intuito de aprofundar o assunto, vou apresentar os atributos e elementos HTML mais relevantes na página quando o propósito é a otimização para os mecanismos de busca.
title (elemento): Começamos pelo cabeçalho da página. O elemento title tem o maior peso na definição da relevância da página em relação as palavras-chave. Parte-se do suposto de que se o desenvolvedor colocou no título da página a palavra é porque ela realmente é importante e faz parte do conteúdo.
title(atributo) : Utilizado principalmente em links, este atributo pode ser configurado para outros elementos também, como imagens. Quase sempre tem a palavra-chave.
h1-h6: Definem os títulos. Sendo que o h1 tem o maior tamanho de fonte padrão e é o mais relevante de todos. Englobe o título principal com esta tag e conforme a importância utilize os outros até chegar ao h6.
strong e italic: Em ordem de importância, as palavras negritadas vem logo depois dos cabeçalhos (h1-h6). As palavras em itálico completam a lista.
alt: Um texto alternativo a ser mostrado enquanto a imagem não carrega ou não foi encontrada é uma bem-vinda adição nos esforços para atingir bom posicionamento nas buscas.
A correta utilização destas tags por si só trará ganhos significativos de SEO.
Fonte WebMaster
