Novidades da HTML5 - parte 2

Para construção de um site moderno, limpo e com práticas que facilitam o seu rankeamento (SEO) nos buscadores, é muito importante conhecer os novos elementos que compõe o HTML5.

Já faz tempo que não escrevo para o Blog da Click Art, de fato estavamos atolados de trabalho e tivemos que priorizar nossos Clientes. Mas estou de volta com as novidades da HTML5, se você ainda não leu a primeira parte dessa série, aconselho que dê um CLICK bem aqui e veja a introdução desse artigo.

Novos elementos e atributos, os que ficaram obsoletos e como utilizá-los

A linguagem traz um conjunto destes novos elementos que estão listados abaixo.

Elemento Descrição
<article> Especifica um conteúdo independente. Um artigo ou uma notícia escrita em um blog ou site de jornal são exemplos de uso da TAG.
<aside> Define uma parte pequena do conteúdo além do principal e deve se relacionar com o conteúdo circundante.
<audio> Define o conteúdo sonoro.
<bdi> A tag isola uma parte do texto que pode ser formatado em uma direção diferente de outro texto fora dela. Esse elemento é útil ao incorporar conteúdo gerado pelo usuário a uma direcionalidade desconhecida. Confesso que nunca usei essa TAG.
<canvas> Talvez a maior novidade da HTML5, é utilizada para renderização de gráficos bitmap dinâmicos, como gráficos ou jogos. Isso é feito por meio de scripts JavaScript.
<datalist> Especifica uma lista de opções predefinidas para um elemento <input>. Usada para fornecer um recurso de "preenchimento automático" em elementos <input>.
<details> Especifica detalhes adicionais que o usuário pode visualizar ou ocultar sob demanda. Pode ser usada para criar um widget interativo que o usuário possa abrir e fechar. Qualquer tipo de conteúdo pode ser colocado dentro da tag <details>. O conteúdo de um elemento <details> não deve estar visível, a menos que o atributo open esteja definido.
<embed> Define um contêiner para um aplicativo externo (não HTML)
<figure> Especifica conteúdo independente, como ilustrações, diagramas, fotos, listagens de código, etc. Geralmente usada para marcas fotos ou imagens em um documento.
<figcaption> Define uma legenda para um elemento <figure>.
<footer> Representa um rodapé́ de uma seção e pode conter informações sobre o autor, direitos autorais etc.
<main> > Essa é a TAG que especifica o conteúdo principal da página. Não deve existir mais de um elemento <main> e ele não deve ser descendente das TAGs <article>, <aside>, <footer>, <header> ou <nav>.
<mark> Representa um texto marcado ou destacado para fins de referência.
<nav> Representa uma seção do documento destinado à navegação. O elemento <nav> destina-se apenas ao bloco principal de links de navegação.
<output> Representa os diferentes tipos de saída, como a saída escrita por um script. Representa o resultado de um cálculo (como um executado por um script).
<progress> Representa o estado de um trabalho em andamento ou a conclusão de uma tarefa, como, por exemplo, um download.
<sgv> Desenhe gráficos vetoriais escalonáveis, imagens vetoriais.
<source> Define vários recursos de mídia para elementos de mídia (<video> e <audio>).
<tp>, <rt> e <ruby> Especifica uma anotação para a tipografia utilizada no leste asiático, normalmente mostrando uma pronúncia. Elas devem ser usadas em conjunto.
<trak> Define faixas de texto (legendas) para elementos de mídia (<video> e <audio>)
<section> Representa um documento genérico ou uma seção em um documento. Pode ser usado em conjunto com elementos <h1>, <h2>, <h3>, <h4>, <h5>, e <h6> para indicar a estrutura do documento.
<summary> Define um título visível para o elemento <details> . O cabeçalho pode ser clicado para ver/ocultar os detalhes.
<time> Para definir data, hora, ou ambos.
<video> Define vídeo ou filme.
<wbr> Representa uma oportunidade (possibilidade) de quebra de linha. Especifica onde, em um texto, seria aceitável adicionar uma quebra de linha.

Novos atributos do elemento <input>

Hoje as modernas aplicações web permitem a captura de dada/hora do sistema ou de um calendário, a obtenção de endereços de e-mail de agendas, etc. Os novos tipos de entrada da HTML5 foram definidos para aproveitar esse conjunto de novos tipos e formas de entrada facilitando a programação, melhorando o SEO e definitivamente diminuindo o trabalho braçal dos programadores frontend.

Elemento Descrição
tel Entrada do tipo número de telefone.
Search Entrada do tipo um campo de pesquisa.
url Entrada de URL (endereço eletrônico).
email Entrada de endereço de e-mail. O próprio HTML5 faz a validação.
datatime Entrada de uma data e/ou hora.
date Entrada de data.
month Entrada de um mês.
week Entrada de uma semana.
time Entrada de hora.
datatime-local Entrada de data ou hora local.
number Entrada de um número.
ranger Entrada de um número em um determinado intervalo.
color : Entrada de uma cor hexadecimal, por exemplo: #00FF00.

Também foram adicionados novos atributos específicos para elementos já utilizados na HTML4.

Elemento Atributo Descrição
<a> <area> media Especifica para qual mídia/dispositivo o recurso que será́ aberto está otimizado, por exemplo, para impressora, para celular etc. O valor padrão é all.
<area> hreflang e rel O atributo hreflang especifica o idioma do recurso que será́ aberto. O atributo rel indica a relação entre o documento e o recurso que será́ aberto.
<base> target - O atributo target para os elementos <a> e <area> não é mais obsoleto, já́ que é útil em aplicações web, por exemplo, em conjunto com o elemento <iframe>.
<li> value Especifica um valor para o elemento selecionado na lista. Não é mais obsoleto, pois não é um elemento de apresentação.
<ol> start Especifica em qual valor a numeração da lista será́ iniciada. Não é mais obsoleto, pois não é um elemento de apresentação.
<meta> charset Já era suportado na HTML4 e, agora, fornece uma nova maneira de especificar a codificação de caracteres para a página. Na HTML4 utilizava-se <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">. Na HTML5 utiliza-se <meta charset="UTF-8">.
<input> e <textarea> placeholder Representa uma dica que se destina a auxiliar o usuário na entrada de dados. Exemplo: <input type="email" placeholder="Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo.">
<input>, <output>, <select>, <textarea>, <button>, <label> e <fieldset> form Permite que os objetos sejam associados a um formulário e que esses elementos possam ser colocados em qualquer lugar de uma página, não somente no interior de um elemento <form>. Pelo menos para mim, essa foi umas das melhores atualizações.
<input>, <select> e <textarea> required Diz ao usuário que ele deve preencher o campo antes de submeter o formulário, caso o contrário, o formulário não será enviado.
<fieldset> disable Quando especificado, desativa todos os controles descendentes.
<input> autocomplete, min, max, multiple, pattern e step Usados para especificar restrições de entrada em um campo.
<textarea> maxlength e wrap Definem a quantidade máxima de caracteres de entrada e quebra de linha respectivamente.
<form> novalidate Pode ser usado para desativar a validação do formulário na submissão, nesse caso o atributo “required” é ignorado, ou seja, o formulário pode sempre ser submetido.
<input> e <button> formaction, formenctype, formmethod, formnovalidate e formtarget Se presentes, substituem os atributos action, enctype, method, novalidate e target no elemento <form>.
<menu> type e label  
<style> scoped Permite o uso de folhas de estilo de escopo. Regras de estilo dentro desse elemento só serão aplicadas localmente, não no documento inteiro.
<script> async Influencia o carregamento e execução de script. Define se o script deve ser executado de forma assíncrona ou não.
<html> manifest Aponta para um cache do aplicativo manifest, usado em conjunto com a API para aplicações web offline.
<link> sizes Especifica o tamanho (altura e largura) do recurso vinculado. Pode ser usado quando o atributo rel contiver o valor "icon".
<ol> reserved Serve para indicar a ordem decrescente em uma lista.
<iframe> sandbox, seamless e srcdoc Permitem conteúdo sandboxing, por exemplo, comentários de um blog.
<object> typemustmarch Permite a incorporação segura de recursos externos. Não deve ser especificado a menos que os atributos data e type estejam presentes.
<img> crossorigin Permite que os dados de imagem possam ser lidos com a API canvas.

Vários atributos da HTML4 se aplicam a todos os elementos da HTML5. São os atributos globais (accesskey, class, dir, id, lang, style, tabindex e title). Além desses, foram incorporados novos atributos à HTML5.

Atributo Descrição
contenteditable Indica que o elemento é uma área editável. O usuário pode alterar o conteúdo do elemento e manipular a marcação.
contextmenu Permite apontar para um menu de contexto fornecido pelo autor.
data-* Representam uma coleção de atributos definidos pelo autor. Os autores podem definir quaisquer atributos, desde que com prefixo data- para evitar conflitos com futuras versões do HTML.
draggable e dropzone São atributos para serem usados em conjunto com API arrastar e soltar (drag & drop API).
hidden Esconde um elemento, diz ao navegador que esse elemento ainda não é ou já não é mais relevante.
role e aria-* Podem ser usados para instruir tecnologia de assistência como recursos de acessibilidade.
spellcheck Permite sugerir se o conteúdo pode ter verificação ortográfica ou não.
translate Indica aos tradutores se o conteúdo deve ou não ser traduzido.

Alguns elementos e atributos HTML4 tiveram seus significados ligeiramente modificados em HTML5 para refletir melhor como eles são usados ou para torná-los mais úteis. Eu não vou citá-los aqui porque a semântica continua a mesma, suas funções também não mudaram, mas se você não os conhece e for curioso, pode consultar na página da W3C

Por falar em W3C (principal organização de padronização da World Wide Web) ela permite alguns atributos, mas desencoraja sua utilização e sugere formas alternativas.

ElementoVale a pena estudar CSS3 e saber qual a melhor forma de substituir esses atributos, na verdade quanto mais limpo o código HTML5 melhor, deixe tudo com o CSS3.
Atributo Alternativa
<script> e <style> type O padrão para esse atributo é, JavaScript e CSS respectivamente, logo se você usar umas delas não precisa mais definir em type.
<script> language É necessário ter o valor "JavaScript" (não é case-sensitive), quando presente e não pode entrar em conflito com o conteúdo do atributo type. É aconselhável omitir esse atributo, pois ele não tem mais nenhuma função útil.
<img> border É aconselhável usar CSS para definir a borda das imagens.
<img>, <iframe> e <object> width e height Não permitem mais valores em porcentagem.
<a> name A W3C recomenda o uso do atributo id em vez de name.
<table> summary Existe na HTML5 diversas soluções alternativas a esse atributo, você pode buscar a que melhor se encaixa no seu projeto e utilizá-la.

Elementos e atributos obsoletos na HTML5

A pesar da HTML5 suportar os elementos que vou descrever abaixo, eles são obsoletos, não se usa mais e não terão mais suporte por parte dos motores dos navegadores.

Os elementos <basefont>, <big>, <center>, <font>, <strike>, <tt>, e <u> não fazem parte da HTML5, eles eram elementos meramente de apresentação, suas funções são muito melhor desempenhadas usando o CSS.

Elementos <frame>, <frameset> e <noframes> foram removidos, pois seu uso compromete a usabilidade e acessibilidade.

Também não estão incluídos da HTML5 os elementos <acronym>, <applet>, <noscript> e <dir>, esse não eram utilizados com frequência, fazia-se muita confusão na utilização.

Os atributos obsoletos também são suportados (não sei até quando) pelos navegadores, não é aconselhável seu uso, pode ser que no futuro eles não tenham mais suporte e deixarão de funcionar. São eles:

Elemento
Atributo
<link> e <a> rev e charset
<a> shape e coords
<img> e <iframe> longdesc
<link> target
<area> nohref
<head> profile
<html> version
<meta> scheme
<object> archive, classid, codebase, codetype, declare e standby
<param> valuetype e value
<td> e <th> axes e abbr
<td> scope

Nenhum dos próximos atributos foram incluídos na HTML5 porque suas funções são muito melhor desempenhada com CSS

Elemento
Atributo
<caption>, <iframe>, <img>, <input>, <object>, <legend>, <table>, <hr>, <div>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> e <tr> align
<body> alink, link, text, vlink e background
<table>, <tr>, <td>, <th>, e <body> bgcolor
<table> e <object> border
<table> cellpadding, cellspacing, frame e rules
<td> e <th> height e nowrap
<hr>, <table>, <td>, <th>, <col>, <colgroup> e <pre> width
<hr> noshade e size
<li>, <ol> e <ul> type
<col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> e <tr> char, charoff e valign
<br> clear
<dl>, <menu>, <ol> e <ul> compact
<iframe> frameborder e scrolling

Bom pessoal é isso, caso vocês queiram estudar mais sobre HTML5 consulte o site da W3C, lá tem todas as informações sobre a linguage e foi exatamente de lá que eu tirei essas informações. Você também pode tirar suas dúvidas comigo enviando um e-mail ou nas redes sociais, basta clicar nos icones de uma das redes sociais aqui mesmo no site e será redirecionado para elas, lá você pode conversar diretamente comigo.

 

Compartilhe:

Sobre o autor

Analista de Sistemas com foco atual na área de WEB. Amante de boa música, estratégias criativas. Gosto de trabalhar com quem tem talento, se não for para ser perfeito, melhor nem começar. Gosto de liderança, estratégias e, principalmente, pôr a mão na massa.