Publicado em 24 de abr.

HTML 5 - Guia para quem está querendo começar

#desenvolvimento-frontend

Pretendo fazer aqui um pequeno guia para quem está querendo iniciar com o HTML 5.

Considerações iniciais sobre o HTML 5

=========================

O tratamento de acessibilidade como um recurso nativo do HTML, e não como um "extra"

A definição de semântica em maiores detalhes. Existem tags no HTML 5 com funções muito específicas para descrever seu conteúdo, que não existiam em versões anteriores.

Novos elementos tais como datagrid, menu, command, entre outros que podem impactar na arquitetura da web

As arquiteturas de drag & drop e copy & paste

A sintaxe

======

A sintaxe em geral não apresenta grandes mudanças, no entanto existem muitas tags novas, que veremos mais adiante. Lembrando que documentos HTML 5 devem ser servidos com o mime-type text/html, mas podem ser escritos como XML (compatível com XHTML 1), ocasião em que devem ser servidos com mime-type adequado.

O DOCTYPE para documentos HTML 5 não necessita mais de um DTD, sendo assim, o doctype fica da seguinte forma:

<!DOCTYPE html>

Tags novas

=======

É aqui que a coisa começa a ficar interessante, vamos conhecer algumas das novas tags que o HTML 5 traz, e ver obviamente para que servem:

<section> - Representa uma seção de uma página ou aplicação. Digamos que eu tenha uma página com uma seção de novidades e uma outra seção de comentários, cada uma dessas seções seria englobada por uma tag <section>. Mostrarei alguns exemplos mais adiante.

 

<article> - Representa um post de blog, um artigo de um jornal, ou qualquer informação similar

 

<aside> - Representa um conteúdo que está relacionado de alguma forma com o resto da página, como uma sidebar por exemplo. Note que esta tag não se refere à posição do elemento, mas sim ao seu significado dentro do contexto.

 

<header> - Representa o cabeçalho de uma seção. O topo de um site, por exemplo.

 

<footer> - Representa o rodapé de uma seção.

 

<nav> - Representa qualquer tipo de navegação. Um menu, uma lista de ações, qualquer coisa que represente navegação.

 

<dialog> - Engloba um conteúdo de conversasão, um diálogo entre duas pessoas, por exemplo. Dentro dela pode-se usar uma lista de definições <dt> e <dd> para representar, respectivamente, o sujeito que está falando e a fala em si.

 

<figure> - Usada para englobar uma informação a algum conteúdo multimídia, como uma foto, por exemplo. Dentro dela coloque uma tag de multimídia, como <img>, e uma tag <legend> contendo a informação a ser acrescentada.

 

<audio> - Usada para representar áudio. Esta tag recebe, entre outros, o parâmetro src, com o arquivo de áudio. Pode ser usada em conjunto com tags <source> caso se tenha mais de um arquivo de audio.

 

<video> - Da mesma forma que <audio>, porém representa um vídeo.

 

<mark> - Representa algum texto marcado

 

<meter> - Representa uma medida. Pode ser uma medida de graus, uma medida de espaço em disco, qualquer coisa do tipo.

 

<progress> - Representa o progresso de uma tarefa específica, um download de arquivo, uma requisição assíncrona, etc.

 

<time> - Representa uma data e/ou hora

 

<canvas> - Esta tag é muito poderosa, pode ser usada em conjunto com javascript para gerar conteúdo dinâmico gráfico, como gráficos ou até mesmo jogos.

 

<command> - Representa um comando que o usuário pode executar.

 

<datagrid> - Usada para representar árvores, listas, ou dados tabulares.

 

<details> - Representa informações ou controles adicionais.

 

<datalist> - Em conjunto com o novo tipo de input "list", é usada para fazer caixas de seleção (comboboxes).

 

<keygen> - Representa um controle que gera valores do tipo chave-valor.

 

<bb> - Representa um comando do user agent que o usuário pode executar, tais como voltar, avançar, parar, etc.

 

<output> - Representa qualquer tipo de resultado. O resultado de um cálculo, por exemplo.

Novidades na tag input

===============

A tag input agora traz algumas novidades para seu atributo "type", tais como: datetime, datetime-local, date, month, week, time, number, range, email, url, search e color. A interface que aparecerá para o usuário nestas tags vai depender do sistema operacional e do browser do usuário.

Novos atributos

==========

Com a chegada do HTML 5, além de muitas tags novas, temos também muitos atributos novos em tags que já existiam antes, vou listar alguns:

Os elementos input (exceto do tipo hidden), select, textarea e button, agora têm um atributo autofocus, que nada mais é do que um indicador de que quando a página carregar aquele elemento deverá aparecer com o cursor nele. Muito útil em formulários, por exemplo. Até hoje, isto precisava ser feito com javascript.

Elementos input e textarea agora têm um atributo placeholder.

Agora os elementos de formulário, tais como input, textarea, entre outros, não precisam mais ser posicionados dentro do form ao qual estão associados, em vez disso, um novo atributo "form" permite que você informe a qual form aquele elemento está associado.

Um novo atributo required pode ser usado em elementos de formulário para indicar que aquele campo deve obrigatoriamente ser preenchido para que o form seja enviado.

O elemento fieldset agora tem um atributo disabled, que quando especificado desabilita todos os elementos dentro dele.

O elemento input agora tem muitos novos atributos, tais como autocomplete,min,max,multiple,pattern e step.

Como existem novos atributos de validação de dados, o elemento form agora tem um atributo novalidate, que desativa a validação do formulário.

A tag script tem um atributo async que influencia na forma com que o script é carregado e executado.

O elemento html tem um novo atributo manifest que pode ser apontado para um cache de uma aplicação para aplicações web offline.

O elemento ol tem um novo atributo reversed para indicar que a ordem da lista deverá ser inversa.

Novos atributos globais

===============

Atributos globais são aqueles que todos os elementos possuem. Entre os novos atributos globais do HTML 5, temos:

O atributo contenteditable que indica que aquela área é editável. O usuário pode mudar o conteúdo do elemento e manipular sua marcação.

O atributo contextmenu que pode ser usado para apontar para um menu popup (que aparece quando se clica com o botão direito, por exemplo).

O atributo draggable que informa que aquele elemento pode ser arrastado.

O atributo hidden que informa que aquele elemento não é mais, ou ainda não é relevante.

O HTML 5 também mudou a forma como os eventos são identificados, bem como introduziu novos. Eventos agora são apresentados na forma onevent-nomedoevento. Exemplo: onevent-click.

****

Elementos eliminados

==============

Alguns elementos foram totalmente descartados no HTML, alguns por serem meramente estéticos, e outros por oferecerem problemas de usabilidade ou acessibilidade: basefont,big,center,font,s,strike,tt,u,frame,frameset,noframes, entre outros. Eles ainda serão suportados pelos browsers para manter retrocompatibilidade, mas não devem mais ser usados.

Suporte dos browsers

==============

Atualmente, pelo que sei, o browser que tem melhor suporte as novidades do HTML 5 é o Safari 4 da Apple, que ainda não implementa muita coisa. Mas algumas das tags tais como video e audio já funcionam. Nos meus testes, os novos tipos de input não funcionaram. O Firefox tem bom suporte as tags mais comuns, como header,section,footer,article,aside, entre outras. O Internet Explorer 8 está começando a suportar também. No entanto, para os browsers mais velhos, tais como IE7 e IE6, você pode utilizar um script que troca estas tags por tags que eles entendem.

Onde usar?

=======

NÃO USE HTML 5 EM ALGUM PROJETO DE CLIENTE, SÉRIO! O HTML 5 é experimental e só deve ser usado por você em seus projetos pessoais, tal como fiz no Screencaster, lançando seu último layout implementado com HTML 5.

Só isso?

=====

Certo, para aqueles que ficaram com "gostinho de quero-mais", segue um exemplo bem simples de página implementada com HTML 5, só para vocês terem uma idéia da estrutura:

<!DOCTYPE html>

<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <title>HTML 5 Things</title>
</head>
<body id="testpage">

 <section id="main">

 <header>
 <h1>This is the header of the main section</h1>

 <nav>
 <ul>
 <li><a href="">Navigation link 1</a></li>
 <li><a href="">Navigation link 2</a></li>
 <li><a href="">Navigation link 3</a></li>
 <li><a href="">Navigation link 4</a></li>
 </ul>
 </nav>
 </header>

 <div id="something">
 <article>
 <h2>This is an article</h2>
 <p>This is a paragraph inside of an article.</p>
 </article>

 <article>
 <h2>This is another article</h2>
 <small>Posted at <time>09:30am</time></small>
 <p>This is another paragraph inside of another article.</p>
 </article>

 <h3>Here's a dialog:</h3>
 <dialog>
 <dt>Somebody</dt>
 <dd>Said something</dd>
 <dt>Other person</dt>
 <dd>Said something</dd>
 <dt>Somebody</dt>
 <dd>Said something</dd>
 <dt>Other person</dt>
 <dd>Said something</dd>
 <dt>Somebody</dt>
 <dd>Said something</dd>
 <dt>Other person</dt>
 <dd>Said something</dd>
 </dialog>

 <meter>You're using 80mb from your 100mb disk space.</meter>
 </div>

 <footer>
 <p>This is the footer.</p>
 </footer>

 </section>

</body>
</html>

Finalizando

=======

Eu fiz este artigo me baseando na própria documentação do W3C, que, diga-se de passagem, também está pela metade ainda. Qualquer dúvida com relação ao HTML 5 postem, que eu e os outros moderadores/membros teremos o maior prazer em ajudar.

Discussão (21)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

<section> - Representa uma seção de uma página ou aplicação. Digamos que eu tenha uma página com uma seção de novidades e uma outra seção de comentários, cada uma dessas seções seria englobada por uma tag <section>. Mostrarei alguns exemplos mais adiante. <article> - Representa um post de blog, um artigo de um jornal, ou qualquer informação similar <aside> - Representa um conteúdo que está relacionado de alguma forma com o resto da página, como uma sidebar por exemplo. Note que esta tag não se refere à posição do elemento, mas sim ao seu significado dentro do contexto. <header> - Representa o cabeçalho de uma seção. O topo de um site, por exemplo. <footer> - Representa o rodapé de uma seção. <nav> - Representa qualquer tipo de navegação. Um menu, uma lista de ações, qualquer coisa que represente navegação. <dialog> - Engloba um conteúdo de conversasão, um diálogo entre duas pessoas, por exemplo. Dentro dela pode-se usar uma lista de definições <dt> e <dd> para representar, respectivamente, o sujeito que está falando e a fala em si. <figure> - Usada para englobar uma informação a algum conteúdo multimídia, como uma foto, por exemplo. Dentro dela coloque uma tag de multimídia, como <img>, e uma tag <legend> contendo a informação a ser acrescentada. <audio> - Usada para representar áudio. Esta tag recebe, entre outros, o parâmetro src, com o arquivo de áudio. Pode ser usada em conjunto com tags <source> caso se tenha mais de um arquivo de audio. <video> - Da mesma forma que <audio>, porém representa um vídeo. <mark> - Representa algum texto marcado <meter> - Representa uma medida. Pode ser uma medida de graus, uma medida de espaço em disco, qualquer coisa do tipo. <progress> - Representa o progresso de uma tarefa específica, um download de arquivo, uma requisição assíncrona, etc. <time> - Representa uma data e/ou hora <canvas> - Esta tag é muito poderosa, pode ser usada em conjunto com javascript para gerar conteúdo dinâmico gráfico, como gráficos ou até mesmo jogos. <command> - Representa um comando que o usuário pode executar. <datagrid> - Usada para representar árvores, listas, ou dados tabulares. <details> - Representa informações ou controles adicionais. <datalist> - Em conjunto com o novo tipo de input "list", é usada para fazer caixas de seleção (comboboxes). <keygen> - Representa um controle que gera valores do tipo chave-valor. <bb> - Representa um comando do user agent que o usuário pode executar, tais como voltar, avançar, parar, etc. <output> - Representa qualquer tipo de resultado. O resultado de um cálculo, por exemplo.

<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>HTML 5 Things</title> </head> <body id="testpage"> <section id="main"> <header> <h1>This is the header of the main section</h1> <nav> <ul> <li><a href="">Navigation link 1</a></li> <li><a href="">Navigation link 2</a></li> <li><a href="">Navigation link 3</a></li> <li><a href="">Navigation link 4</a></li> </ul> </nav> </header> <div id="something"> <article> <h2>This is an article</h2> <p>This is a paragraph inside of an article.</p> </article> <article> <h2>This is another article</h2> <small>Posted at <time>09:30am</time></small> <p>This is another paragraph inside of another article.</p> </article> <h3>Here's a dialog:</h3> <dialog> <dt>Somebody</dt> <dd>Said something</dd> <dt>Other person</dt> <dd>Said something</dd> <dt>Somebody</dt> <dd>Said something</dd> <dt>Other person</dt> <dd>Said something</dd> <dt>Somebody</dt> <dd>Said something</dd> <dt>Other person</dt> <dd>Said something</dd> </dialog> <meter>You're using 80mb from your 100mb disk space.</meter> </div> <footer> <p>This is the footer.</p> </footer> </section> </body> </html>