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 é executado.

O que é HTML5？

O HTML5 é o mais recente padrão HTML.

O HTML5 é projetado especificamente para suportar conteúdos web ricos, sem a necessidade de plug-ins adicionais.

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

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

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

Observação：Nos capítulos a seguir, você aprenderá como 'ajudar' os 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>

Observação：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
Vazio <input type="text" value="Bill Gates" disabled>
Citação Sem Quotes <input type="text" value=Bill Gates>
Citação Dupla <input type="text" value="Bill Gates">
Citação Simples <input type="text" value='Bill Gates'>

No padrão HTML5, dependendo da necessidade do atributo, podem ser usados todos os 4 tipos de sintaxe.

Novas funcionalidades 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, através de <canvas> e <svg>.
  • Suporte poderoso a mídia, através de <video> e <audio>.
  • Novos API poderosos, como o uso de armazenamento local em vez de cookies.

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>