1- Histrico do HTML

O HTML nasceu em 1991 no CERN (European Council for Nuclear Research),

na sua. Seu criador, o ingls Tim Berners-Lee, 44 anos, a concebeu
unicamente como uma linguagem que serviria para interligar computadores do
laboratrio e outras instituies de pesquisa e exibir documentos cientficos de
forma simples e fcil de acessar.
Um desenvolvimento fundamental aconteceu em Julho de 1992 com a
liberao da biblioteca de desenvolvimento para WWW - World Wide Web
(Rede de Alcance Mundial). Foi essa biblioteca que deu origem construo
de vrios browsers WWW e servidores que tornaram a WEB vivel. Um desses
foi o Mosaic, o primeiro browser multiplataforma que explorava completamente
a capacidade de hipermdia da WEB. Desenvolvido por Marc Andreeson, ento
do NCSA, o MOSAIC foi que iniciou o crescimento explosivo da WEB. No
outono 1993 tornou-se disponvel a milhes de usurios, com a liberao das
verses para Mac e Windows. Se por um lado novos browsers tm superado
os recursos do MOSAIC, por outro foi esse programa que tornou-se sinnimo
da Web.
Muitas pessoas concordam que os documentos HTML deveriam trabalhar bem
atravs de diferentes browsers e sistemas operativos. Alcanando
interoperabilidade baixa os custos para as pessoas que desenvolvem pginas
porque assim apenas se desenvolve uma verso do documento. Se um esforo
no for efetuado, existe um enorme risco que a web se desenvolva para um
sem nmero de formatos incompatveis, reduzindo, sem quaisquer dvidas,
todo o potencial comercial da web para todos os participantes.
Cada verso de HTML tem tentado refletir todo o consenso entre a indstria de
software para que o investimento feito pelos autores de pginas no seja
desperdiado e que os seus documentos no deixem de se poder ler num curto
perodo de tempo. O HTML tem sido desenvolvido com a viso que todos os
equipamentos fossem capazes de usar a informao da Web, computadores
com monitores de diversas resolues e vrios nmeros de cores,
equipamentos para input e output de voz, computadores com alta e baixa
largura de freqncia e muito mais.
O HTML 4.0 estende com mecanismos para style sheets (CSS), scripting,
frames (janelas), embedding objects, melhor suporte para texto com direo
varivel (esquerda, direita, e ambos), tabelas mais visualizveis, melhorias nos
forms, melhor acessibilidade para pessoas com incapacidades. Nessa imensa
biblioteca h de tudo. So mais de 1 bilho de pginas sobre os assuntos mais
variados. Tudo o que a imaginao humana pudesse conceber foi parar na
rede, que se tornou uma grande arena de conhecimento e diverso. Pode
apostar: depois da Internet, o mundo nunca mais vai ser o mesmo.

Evoluo do HTML

. 1992 - Primeira apario do HTML;

. 1993 - HTML+: Algumas definies da aparncia, tabelas, formulrios;
. 1994 - HTML 2.0: Padronizao para as caractersticas principais;
. 1994 - HTML 3.0: Uma extenso do HTML+ entendido como um rascunho de
padro;
. 1995 - HTML 3.2: Netscape e Internet Explorer definem seus prprios padres
baseados nas implementaes correntes;
. 1995 - JavaScript: criada por Brendan Eich da Netscape como uma extenso
do HTML para o browser Navigator v2.0. JavaScript uma linguagem de roteiro
(script) baseada em objetos e permite que sejam manipulados atravs de
eventos dinmicos que faltavam ao HTML;
. 1996 - CSS1: Em dezembro deste ano apresentada pela primeira vez a
Folha de Estilo, criada para complementar a linguagem HTML. Possua uma
formatao simples e cerca de 60 propriedades;
. 1997 - HTML 4.0: So lanados os browsers Netscape v4.0 (agosto) e Internet
Explorer v4.0 (outubro) que apresentaram um conjunto de tecnologias (CSS,
JavaScript/VBScript e DOM) que juntas disponibilizaram diversos recursos
tornando o HTML dinmico. Surge ento o DHTML;
. 1998 - CSS2: Em maio lanado a segunda verso da Folha de Estilo que,
alm de incluir todas as propriedades do CSS1 ainda apresenta por volta de 70
novas propriedades;
. 1999 - HTML 4.01: Alguma modificaes da verso anterior;
. 2000 - XHTML 1.0: criado e consiste de uma verso XML do HTML v4.01.

4- Diferenas entre HTML5 e HTML4

O HTML4 ocupou lugar de destaque no mundo web por muitos anos. Ainda
teremos um bom tempo de espera at que o HTML5 se torne de fato um
padro na web e que todos os browsers e tecnologias afins o assumam como
centro de implementao. Como programador web, muito interessante que
saiba quais as principais diferenas entre ambas as verses, justamente para
que possa poupar tempo e aumentar a produtividade em situaes como essa.
Uma das caractersticas mais marcantes dessa nova verso da linguagem o
fato de que ela no uma verso final isto : seguir mudando ao longo do

tempo. Isso inclui dizer que os desenvolvedores da linguagem estaro sempre

adicionando e removendo atributos, tags e o que considerarem interessantes a
ela. Ao mesmo tempo, constitui um risco se voc estiver usando HTML 5 como
algo definitivo no seu projeto. Isso significa que se optar pela linguagem mais
recente ter de seguir suas atualizaes e estar constantemente evoluindo seu
cdigo.
O HTML5 foi feito para ser simples, o que implica em uma sintaxe
extremamente mais simples e limpa. A simples declarao do doctype foi mais
uma das facilidades includas na nova verso. Agora, voc precisa inserir
apenas um <!doctype html> no incio do seu documento e tudo estar pronto.
Alm disso, a sintaxe do HTML5 compatvel tambm com o HTML4 e o
XHTML1.
A linguagem apresenta um elemento novo, o <canvas>, responsvel por
substituir muitas das implementaes antes feitas em Flash. Muitos
desenvolvedores o veem como obsoleto e futuramente morto.
A extenso de tags a um tool de novos e interessantes recursos fez uma
grande diferena na linguagem. Tags como <header> e <footer> (que
estendem a funcionalidade de tabelas para a pgina como um todo), <section>
e <article> (que permitem marcar reas especficas dos layouts), <video> e
<audio> (para uma incluso melhorada de contedos multimdia nas pginas) e
<menu> e <figure> (para bem arranjar textos, imagens e menus) trazem todo
um conjunto de implementaes e funcionalidades bastante pertinentes para a
web de hoje.
A remoo de alguns recursos como as tags <center>, <big>, <font>, etc fazem
com que a responsabilidade do CSS aliado nova linguagem s aumente,
otimizando o desenvolvimento front-end.

6- Template mnimo para a HTML5

A sintaxe HTML5 bastante flexvel, pois a marcao pode ser escrita segundo
as regras da HTML4 que admitem, por exemplo, que valores de atributo sejam
ou no marcados com aspas ou apstrofes, que algumas tags, como p e li, no
sejam fechadas e uma srie de outras regras que do liberdade de escolha da
marcao conforme a preferncia pessoal do autor. Escrever HTML5 com base
nessas regras significa produzir um documento HTML5, ou em conformidade
com a sintaxe HTML.
A seguir, sero mostradas e comentadas vrias verses de templates mnimos
para HTML5.

6.1. Template HTML5 verso 1

A seguir, vamos examinar e comentar um template HTML5 com base em
sintaxe HTML4.

A seo head de um documento HTML5 deve conter obrigatoriamente o

elemento title e opcionalmente so admitidos os seguintes elementos naquela
seo: base, command, link, meta, noscript, script, style. Desses sete
elementos opcionais apenas o elemento command no previsto nas verses
anteriores da linguagem HTML, pois se trata de um novo elemento da HTML5.
Em aplicaes que j possuem um ttulo intrnseco, por exemplo, um e-mail
escrito em HTML que j tem um campo destinado ao assunto, o elemento title
pode ser dispensado.
Observe a marcao a seguir:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Template</title>
<meta name="description" content="Template HTML5 do livro do Maujor.">
<meta name="keywords" content="lista de palavras-chave">
<meta name="author" content="Mauricio Samy Silva">
<meta name="generator" content="HTML-Kit 292">
<meta name="robots" content="all">
<link rel="stylesheet" href="mais.css">
<style>
/* estilos incorporados */
</style>
<script src="path/modernizr-1.5.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<!-- Aqui os contedos da pgina -->
</body>
</html>
O elemento meta destina-se a fornecer metadados, ou seja, informaes
adicionais sobre a pgina. Informaes essas que no podem ser transmitidas
com uso dos demais elementos permitidos na seo head do documento.

Os atributos previstos nas especificaes da HTML5 para o elemento meta

so: name, http-equiv, content e charset, alm dos atributos globais. Sempre
que o atributo name ou http-equiv for definido, deve-se definir tambm o
atributo content. Nesses casos, o metadado do tipo par nome/valor no qual o
valor do atributo name o nome no par e o valor do atributo content o valor
no par.
A quantidade de elementos meta a inserir na seo head do documento e o
tipo de metadado a codificar so funes de cada projeto; no exemplo
mostrado, os elementos foram inseridos apenas a ttulo de ilustrao, assim
aquela seo no pretende ser um guia rgido de metadados.
No exemplo, inserimos na seo head, tambm a ttulo de ilustrao, os
elementos link, style e script.
Notar que todos os valores de atributos na marcao mostrada esto entre
aspas.

6.2. Template HTML5 verso 2

Vamos examinar e comentar a seguir um template HTML5 idntico ao template
mostrado no item anterior, tambm com base em sintaxe HTML4.
Observe a marcao a seguir:
<!DOCTYPE html>
<html lang=pt-br>
HTML 5 50
<head>
<meta charset=utf-8>
<title>Template</title>
<meta name=description content="Template HTML5 do livro do Maujor.">
<meta name=keywords content="lista de palavras-chave">
<meta name=author content="Mauricio Samy Silva">
<meta name=generator content="HTML-Kit 292">
<meta name=robots content=all>
<link rel=stylesheet href=mais.css>
<style>
/* estilos incorporados */
</style>

<script src="path/modernizr-1.5.min.js"></script>
<script src=scripts.js></script>
</head>
<body>
<!-- Aqui os contedos da pgina -->
</body>
</html>
Nessa verso mostramos a sintaxe alternativa que admite valores de atributos
sem aspas.
Mas por que conservamos as aspas em alguns valores do atributo content?
Notar que para os casos em que isso ocorreu o valor do atributo uma frase
ou conjunto de palavras separadas por espaos e, se tirarmos as aspas, o
valor do atributo deixa de ser nico, o que no vlido. Com aspas, o parser
HTML interpreta o valor do atributo como uma s string. Notar que, para o
elemento meta que fornece informaes para os robs que visitam a pgina, o
valor do atributo content est sem aspas, pois tal valor uma s palavra.

6.3. Template XHTML5 verso 1

Vamos examinar e comentar a seguir um template XHTML5 com base em
sintaxe XML e destinado a ser servido com o tipo de MIME text/html.
Observe a marcao a seguir:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Template</title>
<meta name="description" content="Template HTML5 do livro do Maujor." />
<meta name="keywords" content="lista de palavras-chave" />
<meta name="author" content="Mauricio Samy Silva" />
<meta name="generator" content="HTML-Kit 292" />
<meta name="robots" content="all" />
<link rel="stylesheet" href="mais.css">
<style>

/* estilos incorporados */
</style>
<script src="path/modernizr-1.5.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<!-- Aqui os contedos da pgina -->
</body>
</html>
Nessa verso o template compatvel com a sintaxe XML, pois valores de
atributo esto entre aspas e elementos vazios esto fechados. Convm
ressaltar que, embora escrito com a sintaxe XML, o template no est apto a
se valer das funcionalidades da XML e dever ser servido com o tipo de MIME
text/html.

6.4. Template XHTML5 verso 2

Vamos examinar e comentar um template XHTML5 com base em sintaxe XML,
destinado a ser servido com o tipo de MIME application/xml ou application /
xhtml+xml.
Observe a marcao a seguir:
<!DOCTYPE html>
<html lang="pt-br">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Template</title>
<meta name="description" content="Template HTML5 do livro do Maujor." />
<meta name="keywords" content="lista de palavras-chave" />
<meta name="author" content="Mauricio Samy Silva" />
<meta name="generator" content="HTML-Kit 292" />
<meta name="robots" content="all" />
<link rel="stylesheet" href="mais.css" />
<style>

/* estilos incorporados */
</style>
<script src="path/modernizr-1.5.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<!-- Aqui os contedos da pgina -->
</body>
</html>
Nessa verso o template compatvel com a sintaxe XML e apto a valer-se das
funcionalidades da XML devendo ser servido com o tipo de MIME
application/xml ou application/xhtml+xml.
Em documentos XML, no h necessidade da declarao de DOCTYPE, pois
por padro a renderizao acontece em modo standard. Tambm no h
necessidade de declarao da codificao de caracteres, pois por padro ela
em UTF-8. Contudo, indispensvel que se declare o atributo xmlns no
elemento-raiz do documento apontando para o arquivo que contm o
namespace para XML. Notar ainda que o atributo para definio do principal
idioma no qual os contedos do documento foram escritos xml:lang e no
lang como na sintaxe HTML.

6.5. Template XHTML5 verso 3

Com a chegada da HTML5, o Consrcio W3C criou o conceito de marcao
poliglota e publicou especificaes e diretrizes para a criao de tal marcao.
As especificaes definem marcao poliglota assim:
Documento que usa marcao poliglota um documento HTML5, que , ao
mesmo tempo, um documento HTML e XML escrito conforme um conjunto de
regras definidas. Marcao poliglota processada e compatvel com a HTML e
com a XHTML, segundo as regras das especificaes para a HTML5.
Nessa verso o template usa uma marcao poliglota, conforme segue:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Template</title>

<meta name="description" content="Template HTML5 do livro do Maujor." />

<meta name="keywords" content="lista de palavras-chave" />
<meta name="author" content="Mauricio Samy Silva" />
<meta name="generator" content="HTML-Kit 292" />
<meta name="robots" content="all" />
<link rel="stylesheet" href="mais.css" />
<style>
/* estilos incorporados */
</style>
<script src="path/modernizr-1.5.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<!-- Aqui os contedos da pgina -->
</body>
</html>
A marcao poliglota deve satisfazer aos seguintes requisitos:
O DOCTYPE, como prev a XML, deve ser declarado em maisculas e o html
que se segue ao DOCTYPE deve ser em minsculas. Lembre-se de que em
HTML a sintaxe insensvel ao tamanho de caixa, mas em marcao poliglota
rgida.
Os elementos html, head, title e body devem obrigatoriamente constar da
marcao.
O elemento html deve obrigatoriamente conter os atributos xmlns, lang e
xml:lang.
Os namespaces XML permitidos em marcao poliglota so aqueles para as
tecnologias SVG e MathML e devem ser declarados nos elementos svg e math
respectivamente, conforme sintaxe mostrada a seguir:
<svg xmlns = "http://www.w3.org/2000/svg">...</svg>
<math xmlns="http://www.w3.org/1998/Math/MathML">...</math>
O outro namespace permitido para xlink que pode ser declarado tanto no
elemento html quanto no elemento svg que contenha essa funcionalidade,
como mostrado a seguir:
<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:xlink="http://www.w3.org/1999/xlink" lang="pt-br" xml:lang="pt-br">

ou
<svg xmlns:xlink="http://www.w3.org/1999/xlink">...</svg>
A declarao de caracteres deve constar da seo head do documento.
A sintaxe da marcao deve seguir as regras da XML.