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 é:

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.

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.

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:

No HTML 5, a definição do DOCTYPE foi reduzida ao extremo. Se a página for estruturada com esta versão, basta declarar:

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:

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: 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.

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.

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!