English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 Tutorial Básico

HTML5 API

HTML5 Mídia

HTML5 Gráficos

HTML5 novos elementos

HTML5tags semânticas e atributos, permitem que os desenvolvedores implementem layouts de página web claros com muita facilidade, juntamente com CSS3efeitos de renderização, criação rápida de páginas web ricas e flexíveis tornou-se muito simples.

HTML5 novos elementos

desde1999anos após o HTML 4.01 mudaram muito, hoje, no HTML 4.01alguns foram descontinuados, esses elementos no HTML5foi removido ou redefinido.

Para melhor lidar com as aplicações da internet de hoje, HTML5adicionaram muitos novos elementos e funcionalidades, como: desenho gráfico, conteúdo multimídia, melhor estrutura de página, melhor formato tratamento, e várias api de arrastar e soltar elementos, posicionamento, incluindo páginas da web cache de aplicativo, armazenamento, trabalhadores de rede, etc.

HTML5novos elementos de tag

  • <header>define o cabeçalho da página ou seção;

  • <footer>define o rodapé da página ou seção;

  • <nav>define a área de navegação da página ou seção;

  • <section>área lógica da página ou combinação de conteúdo;

  • <article>define o texto principal ou um conteúdo completo;

  • <aside>define conteúdo complementar ou relacionado;

Tag de navegação <nav>

!doctype html<html><head>
<meta charset="UTF-8">
<title>HTML5　Uso da tag de navegação <nav>/<title>
</<head>
<body>
<nav>
　　　　<ul>
　　　　　　　　<li><a href="#">Home</a></li>
　　　　　　　　<li><a href="#">One</a></li>
　　　　　　　　<li><a href="#">Two</a></li>
　　　　　　　　<li><a href="#">Three</a></li>
　　　　</ul>
</nav>
</body></html>
Teste para ver ‹/›

Tag <header> implementada

!doctype html
<html>
<head>
<meta charset="UTF-8">
Título Tag <header> implementada por pt.oldtoolbag.com</<title>
</<head>
<body>
<header id="page_header">
　　　　<h1>Header</h1>
</header>
</body>
</html>
Teste para ver ‹/›

Tag <footer> implementada

!doctype html
<html>
<head>
<meta charset="UTF-8">
Título Tag <footer> implementada por pt.oldtoolbag.com</<title>
</<head>
<body>
Tag <footer> implementada
<footer id="page_footer">
　　　　<h2>Footer</h2>
</footer>
</body>
</html>
Teste para ver ‹/›

<section> bloco e <article> artigo

!doctype html
<html>
<head>
<meta charset="UTF-8">
Título <section> e <article> tags implementados por pt.oldtoolbag.com</<title>
</<head>
<body>
Etiquetas <section> e <article> implementadas
<section id="posts">
　　　　　　　　/*Pode conter múltiplos <article>*/
　　　　<article class="post">
　　　　　　　　　/*conteúdo do article*/
　　　　　　　　</article>
　　　　　　　　<article class="post">
　　　　　　　　　/*conteúdo do article*/
　　　　　　　　</article>
</section>
</body>
</html>
Teste para ver ‹/›

<canvas> novo elemento

EtiquetaDescrição
<canvas>Etiqueta define gráficos, como gráficos e outras imagens. Este rótulo é baseado no API de desenho do JavaScript.

Novos elementos de mídia

EtiquetaDescrição
<audio>Definição de conteúdo de áudio.
<video>Definição de vídeo (video ou movie).
<source>Definição de recursos multimídia <video> e <audio>.
<embed>Definição de conteúdo incorporado, como plugins.
<track>Regulamento de trilha de texto externa para elementos de mídia como <video> e <audio>.

Novos elementos de formulário

EtiquetaDescrição
<datalist>Definição de lista de opções. Use este elemento em conjunto com o elemento input para definir os valores possíveis do input.
<keygen>Regulamento de campo gerador de par de chaves para formulários.
<output>Definição de diferentes tipos de saída, como saída de scripts.

Novos elementos semânticos e estruturais

HTML5Fornece novos elementos para criar uma estrutura de página melhor.

EtiquetaDescrição
<article>Definição de área de conteúdo independente da página.
<aside>Definição do conteúdo lateral da página.
<bdi>Permite que você defina um texto que se afasta da configuração de direção de texto do elemento pai.
<command>Definição de botão de comando, como botões de opção, caixas de seleção ou botões.
<details>Usado para descrever detalhes de um documento ou de uma parte do documento.
<dialog>Definição de diálogos, como caixas de diálogo.
<summary>Etiqueta que contém o título do elemento details.
<figure>Regulamento de conteúdo de fluxo independente (imagens, gráficos, fotos, código etc.).
<figcaption>Definição do título do elemento <figure>.
<footer>Definição de pé de página para section ou documento.
<header>Definição da área de cabeçalho do documento.
<mark>Definição de texto com marcador.
<meter>Definição de unidade de medida e peso. Apenas para medições conhecidas de valor máximo e mínimo.
<nav>Definição da parte de link de navegação.
<progress>Define o progresso de qualquer tipo de tarefa.
<ruby>Define um comentário ruby (pinyin chinês ou caracteres).
<rt>Define a explicação ou pronúncia de caracteres (pinyin chinês ou caracteres).
<rp>Usado em comentários ruby, define o conteúdo exibido pelos navegadores que não suportam elementos ruby.
<section>Define uma seção (section, segmento) no documento.
<time>Define uma data ou hora.
<wbr>Determina onde é apropriado adicionar quebras de linha no texto.

Elementos Removidos

O seguinte HTML 4.01 O elemento está no HTML5Foi removido:

  • <acronym>

  • <applet>

  • <basefont>

  • <big>

  • <center>

  • <dir>

  • <font>

  • <frame>

  • <frameset>

  • <noframes>

  • <strike>

  • <tt>

HTML5 SVG InlineHTML5 Suporte do Navegador