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,menuemenuitem - atributo
inputmodedo<input>e o atributodropzone - o método
showModalDialog()(como visto acima, agora é apenasshow()) - 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.
Formação Desenvolvedor Especialista Front-end
Conhecer a formaçãoConteú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! :)
