Posts Tagged tags

Primeiros passos no HTML5

Desde 1999, o desenvolvimento da linguagem HTML (HyperText Markup Language) ficou estacionado na versão 4. De lá pra cá, a W3C esteve focada em linguagens como XML (Extensible Markup Language) e SVG (Scalable Vector Graphics – o uso de gráficos vetoriais em navegadores). Enquanto isso, os navegadores estiveram preocupados em desenvolver suas funcionalidades, como exibir páginas em abas e oferecer a integração com leitores de RSS. Porém, recentemente organizações como Mozilla Foundation, Opera e Apple se uniram para atualizar o HTML e implementar nele novas funcionalidades.

Os principais elementos dessa nova versão são:

- cabeçalho da página ou de uma seção (não confundir com a tag );

- cada seção do conteúdo;

- um item do conteúdo dentro da página ou da seção;

- o rodapé da página ou de uma seção;

- o conjunto de links que formam a navegação, seja o menu principal do site ou links relacionados ao conteúdo da página;

- conteúdo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo).

Lembrando que a a própria W3C admite que as especificações atuais ainda não são definitivas e podem sofrer revisões.

Seguem alguns exemplos de uso da nova sintaxe no HTML5:

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

    <dialog>
        <dt> Michael, you never told me your family knew Johnny Fontane!
        <dd> Oh sure, you want to meet him?
        <dt> Yeah!
        <dd> You know, my father helped Johnny in his career.
        <dt> Really? How?
        <dd> …Let’s listen to this song.
    </dialog>

<time> – representa data e/ou hora;

<meter> – usada para representar medidas, que podem ser de distância, de armazenagem em disco, etc.
<canvas> – através de uma API gráfica, irá renderizar imagens 2D dinâmicas que poderão ser usadas em jogos, gráficos, etc;

<audio> e <video> – usados para streaming (transmissão pela internet) de áudio e vídeo. É uma tentativa de criar um padrão em todos os navegadores como acontece hoje com as imagens:

    <audio src=”musica.mp3″ autoplay=”autoplay” loop=”20000″ />
 
    <video src=”video.mov” width=”400″ height=”360″ />

 Alguns elementos não existirão mais no HTML 5. Alguns foram retirados porque sua função é puramente visual, e devem ser substituídos por uma declaração no CSS (Cascading Style Sheets), como: <basefont>, <big>, <center>, <font>, <s>, <strike>, <tt> e <u>. Outros foram retirados porque afetam negativamente a acessibilidade do site: <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>.

Mehores sites que utilizam html5:
» Galeria HTML5

» 101 Best HTML5 Sites

, ,

1 Comentário