HTML 5 – Parte 1 – história e elementos de estrutura
Olá galera, tudo certin?
Nos últimos dias, estive bastante envolvido com um tópico da maior importância para mim: a consolidação de uma comunidade técnica aqui no RS. Se você quer saber mais sobre essa iniciativa, visite o post em que lanço essa idéia ou ainda o blog que construí para essa comunidade.
Sobre o que desejo falar hoje? HTML5. Para mim, esse tópico é extremamente “quente”. Muito se fala sobre as potencialidades dessa tecnologia. Sobre o impacto dela para tecnologias como Flash e Silverlight, sobre a internet como um todo.
Qual é a minha proposta? Fazer uma “viagem” pela tecnologia. Demonstrar seus principais aspectos e possibilidades. Como o tema é extenso, já começo com um “Parte 1”. Não sou especialista em HTML. Estou aprendendo HTML5! Por isso, não espere artigos profundos por enquanto. O que você vai ver será “baby steps”. Quem quiser embarcar comigo, sinta-se a vontade.
Não pretendo construir um guia de referência, no lugar disso, quero mostrar uma série de exemplos e ir me aprofundando a cada exemplo. Se você quer uma referência, considere acessar a especificação no W3C ou a especificação da WHATWG
Sem mais delongas…
Um pouco de história
Em 1998, o W3C havia decidido que a especificação do HTML não avançaria pois eles acreditavam que o futuro “falava XML”. Logo, HTML ficou congelada na versão 4.01 e uma nova especificação, chamada XHTML, foi liberada (HTML com todas as “regras” do XML).
A vinculação da HTML com XML (XHTML) enconrajou os profissionais da área a pensar em construir arquivos válidos, bem estruturados (o que é fantástico). Entretanto, um pequeno grupo não estava convencido de que XML era o futuro para todos os “desenvolvedores” web. Esse grupo, começou um trabalho em paralelo, desenvolvendo uma especificação que, primeiro ficou conhecida como Web Forms 2.0, e, em sequência, foi renomeada para HTML5. Esse grupo foi “chefiado” por Ian Hickson e é conhecido como WHATWG (Web Hypertext Application Technology Working Group).
Em 2006, o W3C reconheceu ter sido um “tantinho” otimista na adoção do XML (e, em consequência, da XHTML 2.0), como pode ser conferido no artigo de Tim Berners-Lee. Depois de um natural conflito de egos, o grupo de especificação do HTML resolveu adotar a versão da WHATWG como base para a nova versão do HTML e teve início um curioso processo onde, uma mesma especificação passou a ser desenvolvida, simultaneamente, pelo W3C e pela WHATWG.
Em 2009, a W3C parou de trabalhar na especificação do XHTML 2.0 e colocou mais recursos para o desenvolvimento da HTML5. Ainda em 2009, Ian Hickson reconheceu a importância do apoio dos desenvolvedores de browsers para a nova especificação, o que não foi tão bem visto pela comunidade.
E a história continua…
Os fundamentos do HTML5
Desde o início, houve concordância sobre quais deveriam ser os fundamentos do HTML5 (consulte http://www.w3.org/TR/html-design-principles/). Resumidamente, podemos listar estes pilares como:
-
Tornar o comportamento dos diversos browsers interoperáveis (funcionar da mesma forma, em todo browser) – Muitos dos recursos que utilizamos para desenvolver sites, atualmente, são recursos pouco documentados incluídos nos browsers. Por exemplo, todo o suporte para AJAX foi oferecido, primeiramente no IE e repois adicionado em outros browsers. Isso precisa ser padronizado e documentado.
-
Definir como o tratamento de erros deverá ser realizado – Como os browsers devem reagir a markup inválido? Essa, por incrível que pareça, também é uma questão que foi deixada em aberto até o HTML5.
-
Melhorar a linguagem, porém, sem sacrificar a facilidade da criação para conteúdo WEB;
HTML5 é XML?
Resposta simples: não! Conteúdo HTML5 deve ser distribuído sob a MIME text/html. Entretanto, se for necessária compatibilidade com XML, existe uma serialização do do formato chamada XHTML5. Ela permite as mesmas funcionalidades do HTML5, porém, requer um controle mais rígido da sintaxe. Ou seja, se optar por XHTML5, precisará se preocupar em prover um XML bem formado e ele precisará ser provido sob a MIME do XML.
Importante destacar que XHTML5, sob sua MIME correspondente, não encontram qualquer suporte com IE8 e suas versões anteriores.
Suporte para HTML5
HTML5 é um “buzzz”. Graças a isso, tem recebido suporte muito rapidamente. Embora a especificação não esteja finalizada ainda, podemos perceber que os browsers já adicionaram “algum” suporte para HTML5.
Embora ainda encontremos browsers com mais suporte que outros, essa diferença vem sendo reduzida dia após dia, o que é uma coisa muito boa.
Nosso primeiro documento em HTML5
Eis nosso mini-primeiro documento em HTML5. Observe:
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>My Blog</title> 4 <p>This is my first page using HTML5</p>
Analisando linha por linha… 
DOCTYPE:
Primeiro temos a declaração do doctype. Repare que não há URLs (acabou o pesadelo do copiar e colar). Também não há numero de versão. O que está ali é suficiente.
META:
Ma linha 2, defino o encoding da página. Dizem que não fazer isso pode resultar em um estranho problema de segurança. Observe que nossa tag <meta> está bem diferente do que estamos habituados a ver:
<meta http-equiv="Content-Type" content="text/html; charset=utf8" > </meta>
Repare que esse formato ainda é válido, mas não é mais necessário. Repare também que optei por não usar aspas no valor do atributo charset. Nem tomei cuidado por fechar o nodo com um “/>”. Por quê? Como já foi dito, HTML5 não é uma linguagem derivada de XML, logo, as seguintes sintaxes seriam igualmente válidas:
<META CHARSET=UTF-8> <META CHARSET=UTF-8 /> <META CHARSET="UTF-8"> <META CHARSET="UTF-8" /> <meta charset=utf-8> <meta charset=utf-8 /> <meta charset="utf-8"> <meta charset="utf-8" /> <metA CHARset=Utf-8>
Importante, entretanto, observar que embora possamos ser “relaxados” com a forma como escrevemos nossos documentos HTML5, deveríamos tomar o cuidado de utilizar sempre um padrão.
Título e conteúdo:
Aproveitando que estamos escrevendo um documento html com certo descaso, vamos “chutar o balde”! Repare as linhas 3 e 4 do HTML que escrevi. Adicionei marcações de cabeçalho (<title>) e de corpo (<p>) sem usar as tags adequadas (<html>, <header> e <body> respectivamente). E esse documento é válido! Por quê? Simples, esses são todos elementos opcionais, pois os browsers assumem que eles estão lá, de alguma forma. Uma rápida olhada no visualizador da estrutura do documento, das ferramentas para desenvolvedores, do IE9, confirma isso:
como os browsers fazem isso, HTML5 não necessita dessas tags!
Validando documentos HTML5
Atualmente, estou utilizando um validador on-line para meus documentos html5 (lembre-se que ainda estou estudando essa tecnologia). Para acessar esse documento, acesse: http://html5.validator.nu/. Abaixo um screenshot desse validador atuando sobre nosso primeiro documento html5:
Mas pensemos juntos, dado que podemos utilizar uma sintaxe mais relaxada, esquecendo, por exemplo das tags <html>, <head> e <body> e, mais importante, como HTML5 define um modelo consistente (DOM) para qualquer markup mal-feito, fica a questão: Ainda é importante validar documentos HTML5? Provavelmente sim, mas por razões diferentes:
- Antes de qualquer coisa, validação é uma ferramenta, o que significa que serve a um propósito maior não sendo um objetivo em si mesma. Isso significa que, ao meu ver, devemos primar pela clareza semântica do documento. Assim, nada de usar tables (argh!), ou divs, ou spans para representar semânticamente alguma coisa;
- Validação é mais uma garantia de qualidade. Deve ser aplicada, ao meu ver, antes de um “code reiew”. É uma grande forma de garantir que nossos documentos representam aquilo que desejamos que representem. Afinal de contas, browsers podem até conseguir montar uma estrutura (DOM) consistente para um documento mal-formado, mas isso não significa que essa estrautura represente aquilo que desejamos.
HTML5 torna nossos documentos semanticamente mais claros
Uma das grandes “melhorias” do HTML5, embora pouco ressaltada, ao meu ver é uma melhoria semântica. Ou seja, ficou mais fácil entender o significado de nossos documentos pois foram incluídas na especificação da linguagem um rico conjunto de marcadores.
Considere o seguinte documento HTML:
<div id="header"> <h1>Demo</h1> </div> <div id="sidebar"> <h2>Menu</h2> <ul> <li><a href="page1.html">Page 1</a></li> <li><a href="page2.html">Page 2</a></li> <li><a href="page3.html">Page 3</a></li> </ul> </div> <div class="post"> <h2>Content 1</h2> <p>Some Content for Content 1</p> </div> <div class="post"> <h2>Content 2</h2> <p>Some Content for Content 2</p> </div> <div class="footer"> <p><small>Copyright info...</small></p> </div>
O que definimos?
- definimos uma classe para nosso cabeçalho;
- criamos uma div (identificada) para nosso menu lateral;
- definimos uma classe para representar nosso conteúdo;
- definimos uma classe para representar nosso rodapé.
Repare que não há nada errado com o que foi escrito aqui. Esse documento é válido e funciona (e vai continuar funcionando sob html5)
Quais são os problemas com essa abordagem? Gostaria de descrever três:
- Repare também que o browser não sabe absolutamente nada a respeito do significado desse conteúdo. Consequentemente, poderia nos ajudar muito pouco aqui;
- O código ficou mais “carregado” do que o necessário;
- Não há padrões! Uma vez que cabe ao programador definir o nome das classes, ou ids, que serão adotadas …
HTML5 define um conjunto totalmente novo de tags para que possamos tornar mais evidente o que queremos representar nesse documento. A mesma página, utilizando esses novos elementos, deveria ser descrita assim:
<!doctype html> <title>Demo!</title> <header> <h1>Demo</h1> </header> <nav> <h2>Menu</h2> <ul> <li><a href="page1.html">Page 1</a></li> <li><a href="page2.html">Page 2</a></li> <li><a href="page3.html">Page 3</a></li> </ul> </nav> <article> <h2>Content 1</h2> <p>Some Content for Content 1</p> </article> <article> <h2>Content 2</h2> <p>Some Content for Content 2</p> </article> <footer> <p><small>Copyright info...</small></p> </footer>
Nosso documento não ficou mais limpo? Pior que ficou!
Bem, por hoje, era isso!
Cadê os efeitos impressionantes? Cadê as animações, vídeos, interatividade? Bem, tudo isso partindo de nosso próximo encontro… Até a parte 2
Muito boa iniciativa e parabéns pelos posts.
Pingback: Tweets that mention HTML 5 – Parte 1 – história e elementos de estrutura « Elemar DEV -- Topsy.com
“Manda ver” Elemar.
Estou acompanhando.
Abraço.
Pingback: HTML 5 – Parte 2 – Semântica para todos! « Elemar DEV
Pingback: HTML5 – Parte 3 – Novos elementos para formulários « Elemar DEV
Pingback: HTML 5 – Parte 4 – Vídeo e Áudio « Elemar DEV
Pingback: HTML 5 – Parte 5 – Armazenando dados com Web Storage « Elemar DEV
Pingback: HTML 5 – Parte 6 – Armazendando dados com Web SQL Databases « Elemar DEV
Pingback: HTML 5 – Parte 7 – Suporte para offline « Elemar DEV
Pingback: HTML 5 – Parte 8 – Messaging « Elemar DEV
Cara, existe uma tag chamada “menu”. No lugar de “nav > ul > li”
basta usar “nav > menu > li”
abcs
irado isso
mas será que vai pegar? ou a pergunta certa talvez seja “até quando vai pegar?”
Respondendo a mim mesmo, agora que estudei mais do assunto, não sei como demorei tanto pra me atualizar. Agora só faço meus projetos com HTML5.
Pingback: HTML « Códigos, linguagens e agilidade