HTML 5 – Conceitos Básicos

O que é HTML5?

É a nova versão da linguagem de marcação HTML, bastante aperfeiçoada. O HTML5 tornou a marcação muito mais clara, se adaptou a forma que os desenvolvedores estão trabalhando.  Possibilita colocar áudio e vídeo nos sites sem uso de plugins, o que é positivo tanto para o desenvolvedor quanto para o usuário, que não precisa se preocupar com a atualização de plugins, facilita a forma que os desenvolvedores lidam com formulários, entre outras vantagens.

Novidades

A doctype do HTML5 é muito mais simples:

1
<!doctype html>

A tag <script> também diminuiu, não necessitando mais do atributo “type”:

1
<script  src=”arquivo.js”></script>

Isso também é verdade para a tag <link>

Faça a marcação com menos preocupações

Letras maiúsculas ou minúsculas, fechar tags em si mesmas ou não (como <img src=”imagem.jpg” />), não importa. Claro que não devemos começar a escrever código ruim, isso apenas facilita a validação. E também, temos as novas tags, que ajudam o navegador a entender o seu conteúdo:

  • <header> – É o topo do site, podendo ter a navegação.
  • <nav> – Engloba links de navegação principal. Não deve ser utilizada para links fora da navegação.
  • <section> – Para um grande grupo de conteúdo, podendo conter vários <article>.
  • <aside> – Define conteúdo a parte do artigo em que esteja inserido.
  • <footer> – Pode ser utilizado para o rodapé do site e para outras partes do site também.

Áudio

Para colocar áudio basta:

<áudio src=”musica.mp3”></áudio>

Os atributos autoplay, loop, controls mudam o player, sem necessidade de true ou false. Incluí-los os torna verdadeiros, excluí-los, falso.

Contudo, nem todos os navegadores suportam .mp3, então deve-se usar também .ogg e, para o Internet Explorer, o flash.

  • .ogg – Firefox 3.5, Opera 10.5, Chrome 3.0 e Safari 3.0
  • .mp3 – Chrome 3.0 e Safari 3.0.wav – Firefox 3.5, Opera 10.5, Chrome 3.0 e Safari 3.0

Vídeo

Funciona exatamente igual ao áudio:

1
<video src="filme.mp4" controls width="300" height"200"></video>

É bom definir tamanhos para o vídeo, já que normalmente ocupam mais espaço. E, claro, há variações de formato de acordo com o navegador:

  • H.264 – Safari e IE9
  • WebM ou codecs Theora – Chrome, Firefox e Opera
  • Flash para o IE, claro.

Formulários

Há vários atributos novos para formulários que simplificam e complementam o desenvolvimento com Javascript e CSS. Vejam só:

  • <input type=”text” placeholder=”stuff”> – texto cinza que desaparece quando em foco, por enquanto só funciona para Chrome e Safari
  • <input type=”text” autofocus> – automaticamente foca no campo
  • <input type=”text” required> – campo de preenchimento obrigatório
  • <input type=”text” autocomplete=”off”> – “on” por padrão, como medida de segurança.

Mais atributos para formulários

Estes são particularmente úteis para celulares, pois o teclado muda de acordo com o “type” especificado. Porém, eles aparecem como campos de texto normais. Veja:

1
2
3
4
5
<input type="tel">
<input type="url">
<input type="email">

Armazenamento local

Usar armazenamento local permite que aplicações web funcionem offline. Por exemplo, quando o usuário estiver usando a aplicação em um celular e perder o sinal, ele simplesmente continua utilizando e depois apenas atualiza os dados quando a conecção voltar. E os navegadores que suportam são: Opera, Firefox, Chrome, Safari e IE!

Como funciona

Funciona via Javascript, então os tipos de dados só poderão ser aqueles suportados por javascript: string, booleans e floats. Se for armazenar outro tipo de dado, terá que realizar parse.  É permitido armazenar 5mb localmente por navegador. O Gmail em smartphone já utiliza armazenamento local.

1
2
3
4
5
6
7
8
9
10
11
12
13
localStorage.key="value";
if (typeof(localStorage) == ‘undefined’ ) {
    alert(‘Your browser does not support HTML5 localStorage. Try upgrading.’);
} else {
    try {
        localStorage.setItem(“name”, “Hello World!”); //saves to the database, “key”, “value”
    } catch (e) {
        if (e == QUOTA_EXCEEDED_ERR) {
            alert(‘Quota exceeded!’); //data wasn’t saved due to quota exceed, error
        }
    }
}

Saiba mais

Este artigo se propõe mais a ser um guia geral de HTML5, não se aprofundando em um tópico específico, mas servindo de um guia geral. Para estudar mais, consulte:

Retirado de FrontEnd Brasil.



// Comente!

comentários

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

// 1 Comentário

  • Responder fevereiro 23, 2012

    Evelyn Jacovani

    Muito bom!!!

    O HTML5 veio para facilitar a nossa vida e ferrar com os caras de flash haha
    A única coisa lamentavel e que o IE ainda exite

// Siga as boas práticas: Comente!