Quando utilizar o HTML5? Já está na hora?

Todos os navegadores atuais, com exceção do Internet Explorer já oferecem suporte à maior parte dos elementos do novo HTML5. A Microsoft promete alterar a limitação na próxima versão (IE9).

Alguns desenvolvedores preconizam que é melhor esperar pela popularização do novo IE9 para começar a usar as novas especificações da linguagem HTML 5. Entretanto, outros são menos conservadores e acreditam que toda nova tecnologia deve ser colocada em prática o quanto antes. Para eles, portanto, já é hora de começar a utilizar o HTML5 junto com scripts que fazem os navegadores mais antigos reconhecerem as novas tags. O desenvolvedor Remy Sharp criou um script que cumpre esta função.

É fato, a resistência à mudanças sempre vai existir como se vê ainda hoje em diversos sites ainda diagramados com tabelas fazendo utilização da tag <table>, desconsiderando a utilização do tableless atuando como sites da primeira geração.

A versão 6 do Internet Explorer vigorou por mais de dez anos e precisou da ação de grandes companhias como a Google para que fosse deixado de lado. Para tentar reduzir a quantidade de usuários que utilizam navegadores antigos, a Google deixou de oferecer suporte ao IE 6. Por isso, mesmo que o IE 9 venha a se popularizar rapidamente será necessário que o desenvolvedor se preocupe em criar páginas que funcionem em navegadores mais antigos, ainda que opte por utilizar a linguagem HTML5.

A melhor forma de decidir sobre utilizar ou não o HTML5 é analisando o público-alvo do site para saber quais os navegadores mais utilizados na situação. O site w3schools é uma ótima referência para pesquisar tendências de utilização de navegadores, dados técnicos e estatísticos de acesso e servir como orientação ao desenvolvedor.

Sempre será preciso avaliar se o tempo gasto com a correção para navegadores antigos para que as novas tags sejam visualizadas corretamente valerá a pena. O principal é avaliar que cada caso é um caso e deverá ser avaliado isoladamente. Evidentemente que um bom planejamento é sempre uma ótima ferramenta de trabalho.

É óbvio que o novo HTML5 apresenta um novo horizonte para o desenvolvimento e a criação de páginas para a internet. Grande parte das novas mudanças foca na possibilidade de permitir ao usuário mobilidade. As aplicações conhecidas como rich-applications (aplicações ricas) ganham mais espaço permitindo grandes mudanças na forma como são implementadas as soluções criadas pelos desenvolvedores.A integração entre conteúdo on-line e off-line passar a merecer maior atenção seguida de inovações consideráveis que estão por vir.

Abaixo indico endereços em que é possível obter maiores detalhes técnicos a respeito da linguagem de marcação HTML5, além de apresentar as principais diferenças entre o antigo e o novo formato.

Documentação oficial do W3C

Diferenças entre o HTML5 e o seu antecessor

HTML 5 só terá versão definitiva em 2014

A quinta revisão da linguagem HTML (HTML5) prevista inicialmente para o próximo ano, só deve chegar ao mercado no segundo trimestre de 2014. A informação foi divulgada pelo líder de desenvolvimento do HTLM5 no grupo W3C (World Wide Web Consortium), Ian Jacob, durante entrevista à CNET.

Um dos motivos para o atraso no lançamento da versão, que começou a ser desenvolvida em 2007, foi a necessidade de atender às diferentes necessidades dos diversos perfis de usuários, segundo Jacob.

O W3C, responsável pela revisão do HTML, prevê que a nova versão tenha, entre outros aspectos, o aprimoramento do uso off-line, melhoria na depuração de erros e desenvolvimento de gráficos bidimensionais.

Alguns sites já estão utilizando o HTML5, mas os testes com a nova sintaxe podem mudar parte dos padrões usados atualmente. Até o final de 2011, alguns recursos serão implementados nos códigos e, em 2012, terão início os testes para correção de erros.

Texto disponível em: Olhar Digital.

Logotipo HTML 5

Em janeiro de 2011, o HTML5 ganhou um logotipo, junto com símbolos gráficos que mostram para o visitante quais recursos estão sendo utilizados naquele site, como CSS3 e multimídia. Segundo o site oficial da W3C, o logotipo é “forte e confiável, universal como a linguagem de marcação que você escreve”.

Download: logo html5 | Símbolos H5

Introdução ao HTML 5

Uma breve introdução

O desenvolvimento da linguagem HTML (HyperText Markup Language| linguagem de marcação de hipeertexto) ficou estacionado na versão 4 desde 1999. Desde então, a W3C focou-se no desenvolvimento de linguagens como XML (Extensible Markup Language) e SVG (Scalable Vector Graphics, que se refere ao uso de gráficos vetoriais em navegadores). Neste tempo, os navegadores (browsers) evoluíram suas funcionalidades, como por exemplo, a abertura de páginas abas diversas, a criação e integração com leitores de RSS. Entretanto, recentemente organizações como Mozilla Foundation, Opera e Apple se uniram para atualizar o HTML e implementar novas funcionalidades e melhorias no seu funcionamento.

Este artigo busca apresentar algumas das novidades que o HTML5 apresenta. Os ele já conhecidos do HTML 4 permanecem em sua grande maioria, não sendo portanto, problema para aqueles que já estão familizariados HTML. Isto por que o o HTML5 foi desenvolvido pensando também em todos os usuários que não utilizam os navegadores mais recentes do mercado. Para os novos usuários e aprendizes do HTML e que irão se imergir diretamente no HTML 5 também não será problema, pois as mudanças não são significativas o suficiente para impactar criações e produções baseadas nesta linguagem.

Os novos elementos do HTML 5

Diversos elementos novos foram introduzidos no HTML5 com o objetivo de facilitar a compreensão e a manutenção do código. Alguns deles são fruto de uma evolução natural do elemento <div> com foco na websemântica; já outros surgiram da necessidade de implementar uma padronização na forma de se publicar conteúdo, como já ocorre hoje com imagens. Veja abaixo alguns dos principais elementos da nova geração:

Elementos de estruturação

<header> – cabeçalho de página ou de seção (diferente da tag <head> );

<section> – cada seção do conteúdo;

<article> – um item do conteúdo dentro da página ou da seção;

<footer> – rodapé da página ou de uma seção;

<nav> – conjunto de links que formam a navegação, seja no menu principal do site ou nos links relacionados ao conteúdo da página;

<aside> – conteúdo relacionado ao artigo (como ocorre hoje nos arquivos e posts relacionados em um blog, por exemplo).

Alguns elementos de conteúdo

<figure> – utilizado para associar uma legenda a uma imagem, vídeo, arquivo de áudio, objeto ou iframe:

    <figure id="figura01">
      <legend>Figura 1. Esquema de uma página em HTML5</legend>
      <img src="figura01.png" border="0" width="400" height="500"

	alt="Apresentação da estrutura de uma página criada com os novos elementos do HTML 5" />
    </figure>

<canvas> – através de uma API gráfica (Application Programming Interface (ou Interface de Programação de Aplicações), irá renderizar imagens 2D (bidimensionais) dinâmicas que poderão ser usadas em jogos, gráficos, etc;

<audio> e <video> – utilizados para streaming (transmissão via internet) de arquivos de áudio e vídeo. Esta é nitidamente uma busca em estabelecer um novo padrão em todos os navegadores para estes tipos de mídias, como ocorre hoje com as imagens:

    <audio src="audiohd.mp3" autoplay="autoplay" loop="70000" /> 

    <video src="videohd.mov" width="1920" height="1080" />

<dialog> – junto com as tags <dt> e <dd> será utilizado para formatar um diálogo:

    <dialog>
        <dt> Olá, como vai amigo?
        <dd> Eu estou bem e você?
        <dt> Eu também estou muito bem.
        <dd> Você sabe onde encontro Maria.

        <dt> No Brasil?
        <dd> Isto, ela foi para lá.
    </dialog>

<time> – representa data e/ou hora;

<meter> – utilizada para representar medidas, que podem ser de distância, espaço de armazenagem em disco, altura, comprimentos, espaço entre objetos etc.

Elementos de estruturação retirados do HTML5

Alguns elementos não existirão mais no HTML5. Alguns deles foram retirados porque sua função tem como objetivo o resultado visual. Estes elementos deverão ser substituídos por declarações feitas diretamente no CSS (Cascading Style Sheets), como: <basefont> , <big> , <center> , <font> , <s> , <strike> , <tt> e <u> .

Outros elementos foram retirados por afetarem negativamente a acessibilidade do site, como as tags: <frame> , <frameset> e <noframes> .

Apesar de serem considerados antigos, <b> e <i> ainda serão reconhecidos e renderizados para fins de formatação, mas devem ser substituídos sempre que possível pelos elementos <strong> e <em> , respectivamente.

Também foram retirados alguns atributos, seja porque caíram em desuso ou porque podem ser substituídos semanticamente por declarações no CSS para definir o visual dos elementos. Os principais atributos retirados são:

• target no elemento <a> ;
• align nos elementos <table> e demais tags de tabelas, <iframe> , <img> , <input> , <hr> , <div> , <p> , entre outros;
• background em <body> ;
• bgcolor nos elementos de tabela e no <body> ;
• border em <table> e <object> ;
• cellpadding e cellspacing em <table> ;
• height em <td> e <th> ;
• width nos elementos <hr> , <table> , <td> , <th> e <pre> ;
• hspace e vspace em <img> e <object> ;
• noshade e size em <hr> .

Declaração Doctype

Com o HTML5 passaremos a utilizar apenas uma declaração doctype conforme apresentado abaixo:

    <!DOCTYPE html>

Atualmente praticamente todos os desenvolvedores copiam e colam o longo e complicado doctype de algum lugar na hora de começar um novo documento HTML. Com este novo formato teremos uma declaração única, curta e fácil de lembrar.

A Transição do XHTML

O HTML5 e seus antecessores, HTML 4.01 e XHTML 1.0 são muito semelhantes. Logo, o desenvolvedor que está está familiarizado com as versões anteriores não sentirá nenhuma dificuldade na mudança. Para os novos desenvolvedores que ainda irão aprender a linguagem, os novos elementos do HTML 5 deixarão o processo mais simples.

A sintaxe dos elementos é a mesmo que no HTML 4.01, sintaxe esta que não exigia que elementos como <img> e <input> fossem “fechados”:

    <input type="text" id="nome">

Entretanto, para aqueles que estão migrando do XHTML, a barra que fecha um elemento continuará sendo aceita, conforme se vê abaixo:

    <input type="text" id="nome" />