HTML 5

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.

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/

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

Publicado em Desenvolvimento

Deixe uma resposta

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

*

This blog is kept spam free by WP-SpamFree.