HTML 5

By | 2 de março de 2010

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

O HTML5 oferece uma experiência web totalmente diferente para usuários e, embora exista um longo caminho para ser finalizado, muitos navegadores importantes – com exceção do Internet Explorer 8 – como o Opera, Google Chrome, Safari 4 e o Firefox 3.5 já implementaram grandes partes da linguagem, incluindo tags de vídeo e suporte à tecnologia Canvas.

Vamos construir uma estrutura básica e falar sobre cada uma delas.

A primeira modificação nota-se no DOCTYPE.

Antes, tínhamos vários tipos de DOCTYPE: Strict, Transitional ou Frameset.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"
http://www.w3.org/TR/html4/frameset.dtd">

No HTML5, o DOCTYPE ficou infinitamente mais simples:

<!DOCTYPE HTML>

Então a estrutura do HTML5 ficará assim:

<!DOCTYPE HTML>
<html>
<head>
<title>Título do documento</title>
</head>
<body>Conteúdo</body>
</html>

No HTML atual, não há um padrão para a leitura das máquinas do que é um cabeçalho, uma seção, menu ou rodapé. O que geralmente diferencia são as IDs das DIVs. No HTML5 esta padronização existe.

Vejam a diferença:

HTML 4.01

<div id="topo"></div>
<div id="menu"></div>
<div id="conteudo"></div>
<div id="rodape"></div>

HTML5

<header></header>
<nav></nav>
<article></article>
<footer></footer>

Vejam que a estrutura já tem um padrão.

Explicando:

A tag <header> define uma introdução ao documento.

A tag <nav> define uma seção de navegação. Se você possuir botões Anterior e Próximo no seu documento, deve ser inserido dentro da tag <nav>.

A tag <article> define conteúdo externo. Pode ser uma notícia, artigo, texto qualquer ou qualquer outro conteúdo.

A tag <footer> define um rodapé do documento. Geralmente contém nome do autor, data que foi escrito o documento etc.

Agora que nós vimos as tags básicas, vamos dar uma olhadinha em outras super legais:

<aside> é utilizado para representar conteúdo que está relacionado com outro conteúdo dentro de um contexto (<article>). Um exemplo fácil para assimilação são as citações. Se há uma citação em um texto que deve ser destacado, pode-se utilizar o <aside> para destacar certa frase ou citação. Fora do contexto ele é interpretado como conteúdo secundário, não relacionado com o conteúdo em questão.

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

Resumindo: Se você utiliza o <aside> dentro de uma tag <article> você relaciona a citação com o conteúdo do article, caso contrário, com o tema da página em geral.

A tag <audio> define um som. Pode ser música, som, podcast, etc. Qualquer conteúdo dentro da tag de áudio será um texto alternativo caso o navegador utilizado não suporte a tag.

<audio src="musica.mp3">

Seu navegador não suporta o elemento de áudio.</audio> A tag <áudio> possui alguns atributos importantes:

src: especifica a localização do ficheiro de áudio.

autoplay: especificação de execução automática do arquivo após carregamento. Exemplo:

<audio src="musica.mp3" autoplay="autoplay">

Seu navegador não suporta o elemento de áudio.</audio> controls: especifica se deve ou não exibir os controles de áudio (play, stop, pause, etc).

<audio src="musica.mp3" controls="controls">

Seu navegador não suporta o elemento de áudio.</audio> A tag <dialog> define um diálogo ou conversa, como o próprio nome já diz.

<dialog>
<dt>Pedro</dt>
<dd>Oi Lyvia como vai você?</dd>
<dt>Lyvia</dt>
<dd>Vou bem e você?</dd>
<dt>Pedro</dt>
<dd>Tudo ótimo!</dd>
</dialog>

Tag <details>: utilizada para descrever detalhes de um documento, ou de trechos dele.

<details>Este poema foi escrito por Luis Fernando Veríssimo.</details>

Porfim, a tag <figure>. Ela é utilizada pra inserir uma legenda relacionada a uma imagem, vídeo, áudio, objeto, etc.

<figure>
<img src="imagem.jpg" alt="imagem" title="imagem" />

<legend>Figura 1. Este texto tem relação com a imagem acima.</legend>
</figure>

Utilizando a tag legend, você adiciona a legenda à imagem.

Claro que existem outras tags e atributos, porém resolvi falar apenas das principais, pois há muito mais além de cada elemento. Vou falar de cada uma detalhadamente em artigos separados! 😉

Viram só? Não é tão complicado! Pelo contrário, é bem facinho! Com isso, espero que futuramente os browsers se alinhem a um padrão único de leitura e acompanhem essa padronização, sem que os desenvolvedores necessitem de hacks (leia-se gambiarras) para que os sites funcionem em todas as plataformas!

Espero que eu tenha ajudado!

Até a próxima!

———————————————-
Autor: Michel Martins – Gerente de e-commerce do CPT Cursos Presenciais, programador e professor de cursos tecnológicos da Gigabyte Cursos. Graduando em Comércio Eletrônico pela Univiçosa, é apaixonado por tecnologia e gosta de saber de tudo um pouco.
michelmfreitas@gmail.com

Post original em:
http://imasters.uol.com.br/artigo/16050/

———————————————-

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *