HTML 5: Início, Meio e Fim – Novos elementos – Parte 2

No primeiro post da nova série, a preocupação principal consistiu na tentativa de justificar a necessidade de uma nova especificação para o HTML (aka HTML 5). Muito embora um overview da nova especificação tenha sido passado de forma generalizada, o objetivo principal do post não era apresentar as features do HTML 5.

Hoje iniciaremos uma viagem (sem previsão de ser longa ou curta) pelas novas features do HTML 5. Inicialmente apresentarei de forma geral os principais novos recursos adicionados a especificação e, nos posts seguintes, trabalharemos de forma demorada com cada um deles, utilizando exemplos práticos para a aprendizagem.

Novos elementos adicionados ao HTML 5

É fato que a internet mudou radicalmente desde a especificação do HTML 4.0, por inércia, as necessidades e os recursos para atender essas necessidades também devem evoluir. Neste contexto, é natural que novos elementos (que encapsulam ações específicas) devem ser adicionados e elementos que outrora faziam a diferença, tornam-se obsoletos.

Como é de se imaginar, novas e importantes features foram incorporadas a especificação corrente do HTML 5, visando atender as necessidades da web atual. Podemos citar como exemplo, recursos para gerenciamento de elementos gráficos (canvas), haja vista a alta exigência por parte dos usuários de sites cada vez mais atrativos também visualmente.

A seguir, apresentamos os principais elementos adicionados ao HTML 5 e uma rápida explanação sobre cada um deles (eles serão vistos em detalhes, individualmente, mais adiante nesta série).

Novos elementos de marcação

A Tabela 1 apresenta os principais elementos adicionados a especificação do HTML 5. Evidentemente que existem vários outros e, caso haja interesse em conhecê-los, recomendo dar uma olhada na especificação oficial do HTML 5.

Markup	Função
<article>	Para utilização com conteúdo externo. Pode ser: texto de um site/blog de notícias, ou qualquer outra coisa de fonte externa.
<aside>	Container de seção que exibe conteúdo associado ao conteúdo de seus lados. Se <aside> está a esquerda e o conteúdo a direita é uma notícia sobre esporte, as opções do container estarão associadas a esportes.
<command>	Representa um comando que o usuário pode invocar. Este comando pode ser invocado de qualquer parte da página, como por exemplo, no contexto de um menu.
<details>	Permite a exibição de detalhes de um documento ou da partes de um documento (como uma seção, por exemplo).
<summary>	Legenda/Resumo de determinado objeto. Deve ser utilizado internamente a tag <details>.
<figure>	Container flutuante, que pode agrupar imagens, listas, ou qualquer conteúdo que, em algum momento, possa ser separado do conteúdo principal sem afetar o mesmo. É referenciado individualmente, independente do conteúdo.
<figcaption>	Legenda para elementos <figure>.
<footer>	Rodapé da página como um todo ou de seções. Pode conter quaisquer informações que se desejar, tais como: copyright, dados do autor, etc.
<header>	Cabeçalho da página como um todo e/ou seções específicas. O <header> pode conter um set títulos (h1, …, h6) ou informações de versão, meta tags, etc.
<hgroup>	Agrupa um set de cabeçalhos <h1> para <h6> onde o maior será o título principal. Sua diferença principal em relação a tag <header> é que é específico para agrupamento de head’s multiníveis.
<mark>	Deseja destacar um texto? Utilize a tag <mark>.
<meter>	Utilizada para medir proporções de elementos. Para sua utilização, é preciso conhecer um valor máximo e um valor mínimo.
<nav>	Container que agrupa elementos de navegação de páginas. Navegação para outros documentos ou partes do mesmo documento. Algumas particularidades existem, mas não cabem aqui.
<progress>	Apresenta um indicador de status de operação.
<ruby>	Container para fragmentos de textos no padrão Ruby (japonês, chinês, etc.). Possui variações <rt> e <rp>.
<time>	Definição de data, hora ou ambos.
<wbr>	Representa uma oportunidade de quebra de linha. Qualquer texto entre estas tag’s não devem ser considerados do mesmo texto que o envolve.

Tabela 1: Lista dos principais novos elementos disponíveis no HTML 5

Novos elementos de mídia

O trabalho com elementos de multimídia sempre foi um problema com a antiga especificação do HTML. O HTML 5 possui recursos que pretendem minimizar esta dificuldade antiga e, ao meu ver, tem tudo para conseguir. A Tabela 2 apresenta os elementos disponíveis de forma nativa para o trabalho com elementos de audio, video e imagens.

Markup	Função
<audio>	Permite a adição de elementos de multimidia de áudio (arquivo de forma direta ou através de streaming).
<video>	Permite a adição de elementos de vídeo, seja de forma direta aos arquivos ou ainda através de streaming.
<source>	Recurso que permite a definição de informações adicionais sobre as mídias (áudio ou vídeo).
<embed>	Para incorporar elementos terceiros a mídia.
<canvas>	Permite a construção de gráficos através de scripts.

 

Tabela 2: Lista dos principais elementos de multimídia

Elementos de formulário

O set de markup’s para formulário também foi enriquecido. A seguir a Tabela 3 apresenta os três principais novos recursos.

Markup	Função
<datalist>	Um conjunto de opções que podem ser encapsuladas em uma estrutura de datalist.
<keygen>	Gera chaves para utilização na autenticação de usuários.
<output>	Para qualquer tipo de saída gerada por um script.

Tabela 3: Lista dos principais novos elementos de formulário

Elementos do tipo input

Algumas melhorias consideráveis foram implementadas em relação aos tipos de inputs de formulários. A melhoria consiste na adição de atributos na forma de tipos nativos mais comumente utilizados em formulários web, tais como telefones, e-mails, etc. A Tabela 4 apresenta a relação destes novos elementos.

Atributo	Função
tel	O valor aceito no input é um número de telefone.
search	O campo de texto seguirá um formato de busca.
url	O valor aceito no input é uma URL.
email	O(s) valor(es) aceito(s) no input é(são) um ou mais endereços de e-mail(s).
datetime	O valor aceito no input é uma data e/ou hora.
date	O valor aceito no input é uma data.
month	O valor aceito no input é um mês.
week	O valor aceito no input é uma semana.
time	O valor aceito no input é um formato de tempo.
datetime-local	O valor aceito no input é um data e hora.
number	O valor aceito no input é um número.
range	O valor aceito no input é um número em um determinado intervalo.
color	O valor aceito no input é uma cor, expressa em formato hexadecimal.

 

Tabela 4: Novos tipos de input

Como mencionado anteriormente, nossa intenção hoje ficou restrita a apresentação dos principais elementos adicionados à nova especificação do HTML 5. A partir dos próximos posts, veremos de forma detalhada cada um deles com exemplos práticos. Espero que com este post, você possa ter obtido uma boa impressão do que nos aguarda num futuro próximo em relação ao novo padrão web.

Grande abraço a todos e, não se esqueça de deixar seu feedback através dos comentários .