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).

html 5

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" />
Share This Post

Posts co-relacionados

Informações

Você está lendo “Introdução ao HTML 5,” no site Design for Web

Publicado:
27.01.11 / 9am
Categoria:
HTML, Tendências, Web, Websemântica
Tags:
, , , , , , , , , , , , , ,