Em 14 de Dezembro passado, a W3C finalmente soltou a versão definitiva da mais recente atualização do HTML, o HTML 5.2 e já iniciou imediatamente os trabalhos nos primeiros rascunhos de seu sucessor, o HTML 5.3.
Embora o HTML 5.2 não traga mudanças drásticas à forma como se produzem páginas em HTML (e tampouco era essa a proposta), ele introduz algumas novidades importantes enquanto torna obsoletas e inválidas outras práticas. Vamos dar uma olhada nesse Artigo nas alterações das especificações oficiais da W3C.
Novidades do HTML 5.2
Uma nova forma de fazer modais
De todas as novidades implementadas com a nova versão do HTML, a introdução do elemento<dialog> é de longe a mais interessante. Ele funciona como uma nova ferramenta para a criação de modais dentro da página web, desta vez de forma nativa.
Janelas modais são um recurso antigo no desenvolvimento web, mas sempre foram realizados através da extrapolação de outros elementos e exigiam uma quantidade de código elevada para funcionarem, sem oferecer uma alternativa semântica para navegadores não-visuais e outros cenários. Com a chegada do <dialog>, desenvolvedores podem implementar uma solução nativa e prática:
Por padrão, a caixa de diálogo fica oculta. Para visualizá-la, deve ser ativado o atributo open. Esse comando pode ser invocado através dos métodos show() e close(), por JavaScript:
Por enquanto, o suporte em desktops para o elemento <dialog> está limitado ao Google Chrome (a partir da versão 64 do navegador), enquanto o Firefox oferece somente suporte parcial, com previsão de implementação no futuro próximo. Nos dispositivos móveis, o elemento tem suporte pleno no Chrome, no navegador padrão do Android e no Samsung Internet, sem previsão de suporte para o Safari.
Múltiplos elementos principais
Anteriormente, cada página web só poderia conter um elemento <main> ou seria considerada inválida. A decisão está semanticamente correta, uma vez que main significa “principal” em Inglês e ele precisa ser único para a página ou ele não seria o principal. Entretanto, essa característica não era satisfatória para todos os cenários e, a partir do HTML 5.2, é possível introduzir mais de um elemento <main> no mesmo documento, desde que apenas um esteja visível de cada vez.
Essa mudança facilita a vida de desenvolvedores que criam aplicações que utilizam uma única página mas possuem diferentes estados e conteúdos:
Conteúdo, conteúdo... Outro conteúdo, conteúdo... Outro conteúdo, conteúdo...
Vale ressaltar que o uso explícito do atributo hidden é a única forma de ocultar de forma válida os outros elementos <main> presentes na página. O uso de display: none; ou visibility: hidden não é considerada uma forma válida de ocultar os outros elementos <main> de acordo com as especificações da W3C.
APIs de pagamentos em iframes
A Payment Request API foi criada pela W3C como uma forma de padronizar os sistemas de confirmação de pagamento na web, removendo a necessidade de diferentes desenvolvedores precisarem criar diferentes tipos de formulários e colocando essa funcionalidade direto no navegador. Inicialmente, não era possível invocar esse recurso a partir de um <iframe> embutido no documento. Com o HTML 5.2, a API já pode ser utilizada a partir de um <iframe>.
Com o atributo allowpaymentrequest, o desenvolvedor pode utilizar soluções de pagamento embutidas em um <iframe> a partir das páginas que eles controlam:
Estilos no corpo da página
Embora definições de estilo sejam normalmente inseridas no <head> dos documentos, a partir do HTML 5.2 se torna válido definir estilos dentro do elemento <body> também, embora a própria W3C não recomende a prática.
Texto azul!
Apesar da estrutura ser considerada válida, ela pode gerar uma queda de performance na experiência web, principalmente quando a definição de estilo acontece depois do elemento a qual se aplica. No exemplo acima, a cor azul seria aplicada a um parágrafo que já foi interpretado pelo navegador, gerando uma nova renderização do conteúdo.
Cabeçalhos em legendas
A partir do HTML 5.2, é possível introduzir cabeçalhos (<h1>até <h6>) em elementos <legend> de formulários. Anteriormente, só era possível utilizar texto puro nesse tipo de legenda para campos de formulários. Agora, desenvolvedores podem elaborar melhor o conteúdo:
O que se torna obsoleto ou inválido com o HTML 5.2
A partir dessa alteração das especificações do W3C, algumas práticas se tornaram obsoletas ou inválidas na linguagem.
O elemento <keygen>, anteriormente utilizado para gerar chaves públicas em formulários foi removido das especificações.
Os elementos <menu> e <menuitem> também não fazem mais parte das especificações do HTML. Eles eram utilizados até então para a criação de menus de navegação ou contexto.
A partir de agora, o elemento <p> só pode conter elementos inline como filhos válidos. Ou seja, elementos dos tipos inline-block, inline-table ou block não podem mais serem aninhados dentro de um elemento <p> de forma semanticamente válida.
Dois Strict Doctypes foram abolidos com o HTML 5.2, referentes aos obsoletos HTML 4.01 e XHTML 1:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “https://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>