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). |
| 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=”usuario@provedor.com.br”> |
| <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.
