No final de 2017 o HTML 5.2 se tornou uma recomendação oficial da W3C. Vejamos algumas das novidades.

Elemento <dialog>

Por padrão ele fica escondido. Para que ele apareça, basta selecioná-lo com JavaScript e executar o método show();

<dialog>
 <h1>Olá Web Developers!</h1>
</dialog>
<button id="open">Abrir Modal</button>
<button id="close">Fechar Modal</button>

const dialog = document.querySelector("dialog");

document.querySelector("#open").addEventListener("click", () => { 
 dialog.show();
});

document.querySelector("#close").addEventListener("click", () => { 
 dialog.close();
});

Usando a API Payment Request a partir de iframes

Antes do HTML 5.2, pagamentos que usassem a API Payment Request não poderiam ser feitos a partir de um iframe embutido em sua página.

Agora os iframes aceitam o atributo allowpaymentrequest, permitindo que a página com iFrame faça uso do serviço.

<iframe allowpaymentrequest>

Funcionalidades depreciadas

Algumas funcionalidades foram consideradas ruins, obsoletas ou foram trocadas por algo melhor.

  • elementos keygen, menu e menuitem
  • atributo inputmode do <input> e o atributo dropzone
  • o método showModalDialog() (como visto acima, agora é apenas show())
  • a API Plugin foi marcada como obsoleta

Práticas que agora são válidas

Há algumas práticas que antes não eram recomendadas, mas que agora elas são consideradas válidas.

<style> no <body>

Sim, isso já funcionava. Porém, seu documento ficaria como inválido. Agora é considerado válido ter elementos style no meio do body. Mesmo assim, prefira evitar.

Vários elementos <main>

O elemento <main> indica a parte principal de um documento e até então só podia existir um.

Isso mudou e agora é válido ter mais de um <main> em um mesmo documento, desde que apenas um esteja visível.

<main>...</main>
<main hidden >...</main>
<main hidden >...</main>

Cabeçalhos em elementos <legend> em um <fieldset>

Os elementos <legend> dentro de um <fieldset> apresentam uma legenda para os campos de um formulário.

Antes só era válido ter texto dentro dos elementos <legend>, mas agora pode-se colocar os elementos <h1>, <h2>, <h3>, etc

<fieldset>
 <legend>
 <h2>Contato</h2>
 </legend>
</fieldset>

<div> como elemento filho de <dl>

O elemento <dl> serve para criarmos listas descritivas, ou seja, uma lista de descrições de algo.

Antes não eram aceitas divs como elementos filhos, mas agora é.

<dl>
 <div>Guerra</div>
 <dt>JavaScript</dt>
 <dd>Linguagem Interpretada</dd>
 <dd>Multi Paradigma</dd>
</dl>

Práticas que não são mais válidas

Algumas práticas tornaram-se obsoletas.

Filhos de <p>, agora só textos

Agora o elemento <p> só poderá ter conteúdo de texto.

Isso significa que elementos do tipo inline-blocks, inline-tables ou elementos do tipo block com alguma posição ou flutuantes não são mais considerados filhos válidos.

Conteúdo com strict doctype do HTML4 ou XHTML1

Isso significa que as seguintes declarações não são mais válidas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Tags