Introdução ao HTML5 - Aprender HTML

HTML5 não é apenas uma nova versão do HTML enriquecida com novos elementos e atributos, mas um conjunto de tecnologias para criar sites e aplicações web mais poderosos e diversificados, com suporte a multimídia e interação com interfaces de software, entre outras funcionalidades.

Esta página aborda o que o HTML5 mudou em relação ao HTML4, os novos elementos semânticos, os novos tipos de entrada em formulários, as novas APIs JavaScript e como incorporar áudio e vídeo nativos. Se você é completamente novo em marcação, comece pela introdução ao HTML.

HTML5 vs. o HTML Living Standard

O HTML5 foi publicado como uma Recomendação estável do W3C em 2014. Desde então, a linguagem não foi congelada em versões numeradas. Atualmente, é mantida pelo WHATWG como o HTML Living Standard — uma especificação única que é atualizada continuamente, em vez de ser relançada como "HTML6". No uso cotidiano, "HTML5" simplesmente significa HTML moderno: o padrão que seu navegador implementa hoje.

Benefícios do HTML5

Os principais benefícios do HTML5 estão listados abaixo:

É suportado por todos os navegadores atuais, tanto em desktop quanto em dispositivos móveis, há mais de uma década.
É mais compatível com dispositivos e mais fácil de ser escrito, graças a uma declaração <!DOCTYPE html> e <meta charset="UTF-8"> muito mais simples.
Funciona em conjunto com CSS e JavaScript para criar sites atraentes e interativos.
Suporta SVG (Scalable Vector Graphics) e <canvas> para gráficos. Em versões anteriores, gráficos vetoriais exigiam plug-ins como Flash ou VML.
A marcação se torna mais limpa ao substituir contêineres genéricos <div> por elementos semânticos, que estruturam melhor a página e melhoram a legibilidade e acessibilidade.
Expõe a localização do usuário por meio da API de Geolocalização.
Reproduz multimídia (áudio, vídeo) diretamente no navegador por meio dos elementos nativos <audio> e <video>, sem plug-ins adicionais. Veja multimídia HTML.
Introduz o Web Storage, para que as aplicações possam armazenar dados localmente e mantê-los mesmo após o navegador ser fechado e reaberto.

O que Mudou do HTML4 para o HTML5

Removidos e obsoletos no HTML5

Vários recursos de apresentação do HTML4 foram removidos porque a estilização pertence ao CSS. Os seguintes estão obsoletos e não devem ser usados:

Elementos de apresentação como <font>, <center>, <big>, <strike> e o antigo papel estilístico do <u>.
O modelo de frames: <frameset>, <frame> e <noframes> (use <iframe> quando a incorporação for realmente necessária).
Atributos de apresentação como align, bgcolor, border em tabelas e cellpadding/cellspacing — substitua-os por CSS.

Adicionados no HTML5

Elementos semânticos — <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure> e mais.
Multimídia nativa — os elementos <audio> e <video>.
Novos tipos de entrada e atributos de formulários — email, date, range e outros.
Gráficos — o elemento <canvas> para desenho 2D e <svg> inline.
APIs JavaScript — Web Storage, Geolocalização, Web Workers, WebSockets e mais (veja abaixo).

Novos Elementos Semânticos

Em vez de marcar cada região de uma página com um <div> genérico, o HTML5 fornece elementos que descrevem o papel do conteúdo. Isso ajuda mecanismos de busca, leitores de tela e outros desenvolvedores a entenderem a estrutura da página.

Elemento	Finalidade
`<header>`	Conteúdo introdutório ou um grupo de links de navegação
`<nav>`	Um bloco de links de navegação principais
`<main>`	O conteúdo principal do documento
`<article>`	Um conteúdo autônomo e distribuível independentemente
`<section>`	Um agrupamento temático de conteúdo, geralmente com um título
`<aside>`	Conteúdo tangencialmente relacionado ao conteúdo ao redor, como uma barra lateral
`<footer>`	Rodapé para a seção mais próxima ou para a página
`<figure>` / `<figcaption>`	Mídia autônoma com uma legenda opcional

Para um guia completo com exemplos, leia Elementos semânticos no HTML5.

Novos Tipos de Entrada e Atributos de Formulários

O HTML5 adicionou tipos de entrada que fornecem aos usuários controles específicos (seletores de data, controles deslizantes, seletores de cor) e permitem que o navegador valide a entrada por você. Os tipos comuns incluem email, url, tel, search, number, range, date e color.

Novos atributos como placeholder, required, autofocus e pattern reduzem a quantidade de JavaScript necessária para dicas e validação.

<form>
  <label>Email: <input type="email" placeholder="[email protected]" required></label>
  <label>Birthday: <input type="date"></label>
  <label>Volume: <input type="range" min="0" max="100"></label>
  <label>Quantity: <input type="number" min="1" max="10"></label>
  <label>Favorite color: <input type="color"></label>
  <label>Website: <input type="url" autofocus></label>
  <button type="submit">Submit</button>
</form>

Saiba mais na página da tag <input>.

Novas APIs JavaScript

O HTML5 também padronizou um conjunto de APIs do navegador que transformaram páginas web em aplicações completas:

Canvas 2D — desenhe gráficos, tabelas e jogos pixel a pixel no elemento <canvas>.
Web Storage — localStorage e sessionStorage mantêm dados em formato chave/valor no navegador entre visitas.
Geolocalização — solicite ao usuário sua posição geográfica.
Web Workers — execute scripts em uma thread em segundo plano para que a interface do usuário permaneça responsiva.
WebSockets — abra uma conexão persistente e bidirecional com um servidor para dados em tempo real.
History API — altere a URL e o histórico de navegação sem recarregar completamente a página.

Áudio e Vídeo Nativos

Os elementos <audio> e <video> reproduzem mídia diretamente, sem plug-ins. Use o atributo controls para exibir a interface de reprodução do navegador, forneça um ou mais elementos <source> para que o navegador possa escolher um formato compatível e adicione texto alternativo para navegadores muito antigos.

<!DOCTYPE html>
<html>
  <head>
    <title>Native audio and video</title>
  </head>
  <body>
    <video width="320" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.webm" type="video/webm">
      Your browser does not support the video tag.
    </video>

    <audio controls>
      <source src="sound.mp3" type="audio/mpeg">
      <source src="sound.ogg" type="audio/ogg">
      Your browser does not support the audio element.
    </audio>
  </body>
</html>

Veja multimídia HTML para uma análise mais aprofundada sobre formatos e atributos.

Modelos de Conteúdo do HTML5

No HTML5, o conteúdo de uma página web pode ser dividido em grupos semânticos que descrevem seu conteúdo. Esses grupos são chamados de modelos de conteúdo. Cada um desses modelos descreve o tipo de elementos que contém. O modelo de conteúdo pode conter texto e elementos filhos. Um elemento pode pertencer a uma ou mais categorias de conteúdo.

Os modelos de conteúdo do HTML5 estão listados abaixo:

Conteúdo de metadados
Conteúdo de fluxo
Conteúdo de seccionamento
Conteúdo de cabeçalho
Conteúdo de fraseado
Conteúdo incorporado
Conteúdo interativo
Conteúdo palpável

Os modelos de conteúdo podem se sobrepor, o que significa que os elementos pertencem a várias categorias ao mesmo tempo. Por exemplo, conteúdo de seccionamento, cabeçalho, fraseado, incorporado, interativo e alguns conteúdos de metadados fazem parte do conteúdo de fluxo. Metadados e conteúdo interativo, em certos casos, podem fazer parte do conteúdo de fraseado.

Também existem elementos usados para finalidades específicas, por exemplo, para definir formulários. Esses tipos de elementos não fazem parte de nenhum dos modelos de conteúdo mencionados acima.

Conteúdo de metadados

Os elementos pertencentes à categoria de conteúdo de metadados contêm informações sobre documentos HTML, configuram links para outros recursos, definem a apresentação ou o comportamento. Esses elementos não são exibidos na página web.

Os elementos desta categoria incluem: <base>, <link>, <meta>, <noscript>, <script>, <style>, <template> e <title>.

Exemplo de elementos pertencentes ao conteúdo de metadados:

<head>
  <title>Title of the document</title>
  <meta charset="UTF-8">
  <style>
    * {
      color: #1c87c9;
    }
  </style>
</head>

Conteúdo de fluxo

Os elementos pertencentes à categoria de conteúdo de fluxo são tipicamente aqueles usados no corpo de um documento HTML (dentro das tags <body>).

Os elementos desta categoria incluem: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>.

Exemplo de elementos pertencentes ao conteúdo de fluxo:

Exemplos de elementos pertencentes à categoria de conteúdo de fluxo

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p><abbr title="Universal Resource Locator">URL</abbr> - This is a special form of designating an individual resource address on the Internet </p>
    <hr/>
    <div>
      <p>
        Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
      </p>
      <hr/>
      <ol type="A">
        <li>Coca-Cola</li>
        <li>Ice Tea</li>
        <li>Fanta</li>
      </ol>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Os seguintes elementos pertencem ao conteúdo de fluxo, mas apenas se uma condição específica for atendida:

<area>, somente dentro de <map>,
<link>, somente se o atributo itemprop for especificado,
<meta>, somente se o atributo itemprop for especificado.

Conteúdo de seccionamento

Os elementos pertencentes ao conteúdo de seccionamento são aqueles que criam seções independentes na estrutura de um documento HTML (por exemplo, cabeçalho, rodapé, etc.). Note que cada seção pode ter seu título e estrutura de tópicos.

Os elementos do modelo de conteúdo de seccionamento são: <article>, <aside>, <nav> e <section>.

Exemplo de elementos pertencentes ao conteúdo de seccionamento:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h1>Article about flower</h1>
      <article>
        <h2>Roses</h2>
        <p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p>
      </article>
    </section>
  </body>
</html>

Experimente Você Mesmo »

Conteúdo de cabeçalho

Os elementos pertencentes ao modelo de conteúdo de seccionamento criam uma seção no esquema atual que define o escopo dos elementos <header>, dos elementos <footer> e do conteúdo de cabeçalho.

Os elementos do conteúdo de cabeçalho são: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> e <hgroup>.

Exemplo de elementos pertencentes ao conteúdo de cabeçalho:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <hgroup>
      <h1>Welcome to W3Docs</h1>
      <h2>Here you can learn HTML Bases.</h2>
      <h3>Some text or subtitle.</h3>
    </hgroup>
  </body>
</html>

Experimente Você Mesmo »

Conteúdo de fraseado

Os elementos pertencentes ao conteúdo de fraseado definem e marcam o texto. São eles: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <label>, <mark>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video> e <wbr>.

Exemplo de elementos pertencentes ao conteúdo de fraseado:

Exemplo de elementos pertencentes ao conteúdo de fraseado:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example with HTML tags</h1>
    <p>
      Here is some text <sub> with the sup tag</sub>.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...</p>
    <p>Reference site about Lorem Ipsum,<sup> giving information on its origins</sup>, as well as a random Lipsum generator.</p>
    <p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
    <p>We’ve used &lt;strong&gt; tag to highlight <strong> this important part of the text</strong>.</p>
    <p>The important part of the text is highlighted by the <em> in italic</em>.</p>
  </body>
</html>

Experimente Você Mesmo »

Os seguintes elementos pertencem ao conteúdo de fraseado, mas apenas se uma condição específica for atendida:

<a>, se contiver apenas conteúdo de fraseado,
<area> somente dentro do elemento <map>,
<del>, se contiver apenas conteúdo de fraseado,
<ins>, se contiver apenas conteúdo de fraseado,
<link> se o atributo itemprop for especificado,
<map>, se contiver apenas conteúdo de fraseado,
<meta> se o atributo itemprop for especificado.

Conteúdo incorporado

O conteúdo incorporado importa outro recurso ou insere conteúdo de outra linguagem de marcação ou namespace no documento. Este modelo de conteúdo inclui os seguintes elementos: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg> e <video>.

Exemplos de elementos pertencentes ao conteúdo incorporado:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Examples of the HTML elements:</h1>
    <h2>Example of the HTML&lt;canvas&gt; tag:</h2>
    <canvas id="canvasExample" width="400" height="200"></canvas>
    <script>
      var canvas = document.getElementById('canvasExample');
      var context = canvas.getContext('2d');
       context.font = '30pt Calibri';
       context.fillStyle = '#1c87c9';
       context.fillText('Canvas Example !', 50, 100);
    </script>
    <h2>Example of the HTML&lt;img&gt; tag:</h2>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
    <h2>Example of the HTML&lt;svg&gt; tag:</h2>
    <svg width="350" height="150">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="#32ff00" />
    </svg>
    <br />
  </body>
</html>

Experimente Você Mesmo »

Conteúdo interativo

O modelo de conteúdo interativo inclui elementos projetados especificamente para interação com o usuário. São eles: <a> (se o atributo href for especificado), <button>, <details>, <embed>, <iframe>, <label>, <select> e <textarea>.

Exemplo de elementos pertencentes ao conteúdo interativo:

Exemplo de conteúdo interativo:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of Interactive content</h1>
    <form>
      <select>
        <option value="books">Books</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="php">PHP</option>
        <option value="js">JavaScript</option>
      </select>
      <br /><br />
      <textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea>
      <br />
      <button type="button">Send</button>
    </form>
  </body>
</html>

Experimente Você Mesmo »

Os seguintes elementos pertencem ao modelo de conteúdo interativo, mas apenas se uma condição específica for atendida:

<audio>, se o atributo controls for especificado,
<img>, se o atributo usemap for especificado,
<input>, se o atributo type não for hidden,
<object>, se o atributo usemap for especificado,
<video>, se o atributo controls for especificado.

Conteúdo palpável

O conteúdo é palpável quando não está vazio nem oculto; é o conteúdo que é renderizado e tem substância. Elementos cujo modelo é conteúdo de fluxo ou conteúdo de fraseado devem ter pelo menos um nó palpável, e esse nó não deve ter o atributo hidden.

Esta não é uma condição obrigatória; há casos em que o elemento pode estar vazio. Por exemplo, pode ser preenchido após a execução de um script externo.

As categorias de conteúdo secundárias

As categorias de conteúdo secundárias são aquelas que dão suporte a scripts. Os elementos de suporte a scripts não contribuem diretamente para a saída renderizada de um documento, mas dão suporte a scripts, seja contendo ou especificando código de script diretamente, seja especificando dados que serão usados por scripts. Os elementos de suporte a scripts são <script> e <template>. Os elementos <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> e <td> são chamados de raízes de seccionamento. Os elementos pertencentes ao modelo de conteúdo transparente são <a>, <audio>, <canvas>, <del>, <ins>, <map>, <object> e <video>. Esses elementos herdam o tipo do elemento pai e podem conter conteúdo permitido em seu elemento pai.

Prática

Qual elemento foi introduzido no HTML5 para reproduzir mídia sem um plug-in?

O elemento video com um atributo controls e filhos sourceO elemento fontO elemento framesetO elemento center

Prática

Qual DOCTYPE declara um documento HTML5?

DOCTYPE htmlDOCTYPE HTML PUBLIC com uma URL DTD longaDOCTYPE html5Nenhum DOCTYPE é necessário no HTML5