Como criar um site em HTML5 - Doctype, charset meta tag

Agora que já explicamos, no tutorial de HTML5 passado, sobre o que é HTML5, qual seu propósito, para que serve, para que é usado e suas principais diferenças para o antigo HTML 4.01, vamos de fato colocar a mão na massa e criar um site em HTML5.

Vamos mostrar o que mudou inicialmente, o que foi abandonado, o que é indicado e outros detalhes para iniciar seu desenvolvimento web em HTML5.

Curso de HTML5 com CERTIFICADO! Online! Clique aqui e Comece Agora

Doctype em HTML5

Se você estudou todos nossos tutoriais iniciais, sobre o antigo HTML, saiba que já percorreu mais de meio caminho em relação ao HTML5, pois para nossa alegria e felicidade geral da nação, a maior parte das tags, conceitos, ideias e estruturas da criação de um site, não mudou, e o que mudou foi pouco.

Uma grande, enorme vantagem é que: o que mudou, mudou para melhor, para ser de maneira mais fácil, mais simples e de forma que faça mais sentido.

Resumindo: o HTML5 deixou a tarefa de criar um site bem mais simples, e é possível fazer coisas mais poderosas e interessantes.
Uma dessas coisas é o Doctype, na qual já explicamos no tutorial sobre Especificações em HTML e Doctype.

Basicamente, ele serve para dizer ao browser que vai interpretar seu site sobre o tipo de linguagem que vai ser usada. Esse Doctype mudou muito no decorrer das variações do (X)HTML, e como nem todos obedeciam essas mudanças e alguns sites são simplesmente abandonados no tempo, sempre houve muito problema.

Para o HTML 4.01, usávamos a sintaxe:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">

Já no HTML5 vamos usar simplesmente:
<!DOCTYPE html>

Sim, menos código, mais simples, mais poderoso e flexível, pois foi decidido que, mesmo alterando o HTML5, este código vai permanecer, como indicativo de quem o código para a criação de sites é sempre em HTML5, e com as propriedades mais recentes.

Estrutura básica de um site em HTML5 - As tags <html>, <head> e <body>

Já mostramos as três tags básicas e essenciais, em nossos tutoriais de HTML: <html>, <head> e <body>.

A boa notícia sobre estas tags é que você pode continuar usando-as do mesmo jeito, lógica e com a mesma estrutura, no HTML5, que você usava no HTML 4.01

A notícia ainda melhor é que estas tags são opcionais.
Isso mesmo. O HTML5 funciona mesmo se você não usar a tag <html>, o que seria algo inconcebível alguns anos atrás, com o antigo HTML.

Porém, aconselhamos a usar estas tags, ela delimitam uma estrutura lógica nas páginas de seu site, separam bem conteúdo de cabeçalho. E organização nunca é demais.

Codificação de Caracteres em HTML5 - A meta tag charset
Em nosso Tutorial Sobre Formatação de Textos em HTML, vimos que ocorria problemas quando tentávamos usar alguns caracteres especiais, como os de acentuação da língua portuguesa.

Para contornar este problema, fizemos uso da meta tag charset, que adicionada ao código HTML, era feito da seguinte maneira:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Já no HTML5, simplificamos, e muito, esta codificação de caracteres, pois agora temos que fazer somente:
<meta charset="utf-8">




Língua do Site em HTML5 - O atributo lang (pt-br)

Uma outra particularidade que o HTML5 facilitou muito à memorização foi uso do atributo lang (de language, língua em inglês), que recebe como valor a língua do conteúdo do site.

Por exemplo, no antigo HTML 4.01, fazíamos o seguinte para definir uma língua:
<meta http-equiv="content-language" content="pt-br">

Já em HTML5, os webmasters que vão escrever em português do Brasil, irão usar somente:
<html lang="pt-br">

Isso tem várias utilidades, uma delas é para ferramentas de busca, como o Google.
Se você procurar algum conteúdo no Google, ele vai exibir para você resultados na língua portuguesa, aqui do Brasil.

Há duas maneiras do Google saber a língua do seu site: a primeira é analisando as palavras e checando no seu próprio serviço de tradução à que língua pertencem aquelas palavras.

A outra possibilidade, é simplesmente o Google ir em busca da tag html e do atributo lang, que se você deixar bem explícito, o Google vai entender que a língua na qual o seu conteúdo foi escrito é a pt-br, um processo bem mais otimizado e indicado que o anterior.

Um comentário:

Admin disse...

Amigo, tenho dúvidas se o meu blog é HTML 4.01 ou HTML 5, não sei se vou usar o modo de identificar a linguagem do blog de um jeito, se so tenho o CSS do tema do blog? Se tiver como descobrir o HTML do meu blog ele é do MyWapBlog.com