- Como Criar Um Site, Blog – WebMaster.pt - https://www.webmaster.pt -

HTML Básico

Tweet [3]

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.

Aprender HTML

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:

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:


&aacute;

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.

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!

Tweet [3]
Be Sociable, Share!
  • [4]
  • [5]
  • [6]
  • [7]
  • [8]