Introdução ao HTML5

Exemplos de HTML5 em cada capítulo

Exemplo

<!DOCTYPE html>
<html>
<body>
<video width="420" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
 Seu navegador não suporta a tag de vídeo.
</video>
</body>
</html>

Experimente por conta própria

Clique em 'Experimente por conta própria' para ver como este exemplo funciona.

O que é HTML5?

HTML5 é o mais recente padrão HTML.

HTML5 foi projetado especificamente para suportar conteúdo web rico, sem a necessidade de plugins adicionais.

HTML5 possui novos elementos semânticos, gráficos e de multimídia.

Os novos elementos e novas APIs fornecidas pelo HTML5 simplificam a construção de aplicações web.

HTML5 é cross-platform, projetado para rodar em diferentes tipos de hardware (PC, tablet, telefone, TV e outros).

Notas:Nos capítulos a seguir, você aprenderá como 'ajudar' navegadores de versões antigas a lidar com HTML5.

Novos conteúdos no HTML5?

A nova declaração de tipo de documento (DOCTYPE) do HTML5 é muito simples:

<!DOCTYPE html>
A nova declaração de codificação de caracteres (charset) é também muito simples:
<meta charset="UTF-8">

Exemplo de HTML5:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título do documento</title>
</head>
<body>
Conteúdo do documento......
</body>
</html>

Notas:O código de caracteres padrão do HTML5 é UTF-8.

Nova gramática de atributo do HTML5

O padrão HTML5 permite 4 diferentes gramáticas de atributos.

Este exemplo demonstra a utilização de diferentes sintaxes no rótulo <input>:

Tipo Exemplo
Empty <input type="text" value="Bill Gates" disabled>
Unquoted <input type="text" value=Bill Gates>
Double-quoted <input type="text" value="Bill Gates">
Single-quoted <input type="text" value='Bill Gates'>

No padrão HTML5, pode ser necessário usar todos os 4 tipos de sintaxe, dependendo da necessidade do atributo.

Novas Características do HTML5

Alguns dos novos recursos mais interessantes do HTML5:

  • Novos elementos semânticos, como <header>, <footer>, <article> e <section>.
  • Novos controles de formulário, como números, datas, horários, calendários e deslizantes.
  • Suporte poderoso a imagens (por meio de <canvas> e <svg>)
  • Suporte multimídia poderoso (por meio de <video> e <audio>)
  • Novos API poderosos, como substituição de cookies por armazenamento local.

Elementos Removidos do HTML5

Os seguintes elementos HTML 4.01 foram removidos do HTML5:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>