HTML

Novidades do HTML 5.2

Conheça as novidades do HTML 5.2, suas adições e depreciações.

há 6 anos 1 mês

Formação Base para desenvolvedor
Conheça a formação em detalhes

Olá, Web Developers!

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

Elemento <dialog>

Uma das principais adições é o elemento <dialog>, que nos permite criar modais de forma nativa no HTML. No momento apenas o Chrome dá suporte a esse elemento.

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 , 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>Treinaweb</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 (e os marcadores de texto, como <a>, <span>, <strong>, etc).

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.

Desenvolvedor Especialista Front-end
Formação Desenvolvedor Especialista Front-end
Conhecer a formação

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">

Já conhece os nossos cursos de HTML5? Se não, dê uma olhadinha! :)

Autor(a) do artigo

Akira Hanashiro
Akira Hanashiro

Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos.

Todos os artigos

Artigos relacionados Ver todos