HTML Básico
Pela 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 é:
<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.
<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:
<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:
<!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:
<!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:
<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:
á
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:
<meta charset=" ISO-8859-1"/>
Para uma lista mais completa dos atributos do elemento meta acesse: http://www.w3schools.com/tags/tag_meta.asp
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.
<script type="text/javascript">
//cod
</script>
<style type="text/css">
//cod
</style>
Agora não precisa declarar o type.
<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.
HTML em Conclusão
A preocupação excessiva com intrigados modos de otimizar a página, às vezes nos faz esquecer do básico, que é o que realmente funciona. Se você tem alguma dúvida ou adição ao que foi escrito, não hesite em adicionar um comentário, será muito bem vindo!
Notei que não falou nada do basica das tabelas, elas já foram abolidas na forma moderna de se fazer um site?
Danilo, lê este tutorial:http://www.webmaster.pt/css-criacao-layout-912.ht… Rui Soares
Olá uma duvida depois das recentes mudanças em seo o atributo rel=”nofollow” ainda é aplicavel para links internos
realmente vejo que com o css as tabelas estão sendo abolidas sim
URGENTE….
NECESSITO SABER ENTRAR NA CONFIGURAÇÃO SITE LOJA 2 QUERO MEXER NO FUNDO COLOCANDO LAYOTS OU SEJA PERSONALIZAR MEU SITE!
NÃO SEI SE TEM ALGO A VER ESSES DIAS ESTAVA TENTANDO MEXER E CONSEGUI VISUALIZAR ATE + OU – O QUE EU QUERIA NO "INSPENSIONAR ELEMENTO" SÓ QUE NAO CONSIGO DEIXAR DESSE JEITO QUANDO TIRO FICA TUDO COMO TAVA DENOVO COM FUNDO BRANCO NAO QUERO DE UMA SÓ COR PQ ATE TEM CUSTOMIZAR FUNDO MAS NAO QUERO COLOCAR FUNDOS MAIS ATRAENTES!
POR FAVOR ME DIZEM ALGO!!!!
Ótimo artigo e interessantes dicas sobre HTML!