A tecnologia move o mundo.
Steve Jobs
Lançado em 2014, o HTML5 trouxe uma série de novidades e funcionalidades aprimoradas em relação as suas anteriores versões, tornando-o mais rico em recursos, mais semântico e muito mais compatível com os diversos dispositivos de hardware, como celulares e tablets.
Foram incorporadas diversas tags semânticas que permitem estruturar o conteúdo de forma muito mais clara e de fácil leitura. Temos também disponíveis novos elementos gráficos, de conectividade e inserção de multimídia.
O salto dado em relação as versões anteriores tornou a linguagem muito mais poderosa e flexível para a criação de sites e aplicações web, permitindo a construção de experiências mais ricas para os usuários e tornando o desenvolvimento mais ágil do lado dos programadores. Veja também o nosso guia completo de HTML.
Vamos detalhar algumas das principais novidades incluídas na última versão do HTML. Claro que essa não é uma lista exaustiva, mas certamente vai destacar as principais funcionalidades e as que são mais utilizadas. Para saber ainda mais sobre as novas funcionalidades do HTML5, continue a leitura do nosso artigo.
Novas tags e atributos
As novas tags semânticas vieram para estruturar o conteúdo de forma muito mais significativa e aperfeiçoar a experiência da web tanto para os desenvolvedores como para os usuários1. Elas facilitam a leitura do código pelo navegador e a compreensão do significado do conteúdo pelos mecanismos de busca. Facilita também a maneira de desenvolver os documentos HTML.
Veja com maiores detalhes as principais tags e atributos semânticos do HTML5, que definem mais claramente cada parte de uma página web.
<section>
Esse elemento define uma seção do documento, que é um agrupamento temático de conteúdo. Podemos usar como exemplo a página de uma empresa em que consta um pouco sobre a empresa:
| <body> <section> <h1>História da empresa</h1> <p>Conteúdo com a história completa da empresa, quando ela nasceu</p> </section> |
| <section> <h1>Missão</h1> <p>A missão da empresa</p> </section> |
| <section> <h1>Visão</h1> <p>A visão da empresa</p> </section> |
| <section> <h1>Valores</h1> <ul> <li>Valor 1</li> <li>Valor 2</li> <ul> </section> </body> |
O exemplo acima seriam as seções principais do site com a descrição sobre a empresa e outros itens que acharem importantes para que os clientes conheçam um pouco mais sobre a história e a missão da sua empresa.
<article>
Dentro do seu documento HTML, o elemento <article> identifica um artigo. É uma seção de conteúdo independente e exclusivo. Esse elemento deve fazer sentido por si só, para que os leitores possam lê-lo independente da estrutura do restante da página. Seu conteúdo geralmente consiste em texto, bem como conteúdo gráfico e multimídia para complementar o texto.
<aside>
O elemento <aside> do HTML é uma seção de uma página que contém conteúdo relacionado ao seu entorno2 e pode ser vista como uma seção separada do conteúdo principal. Muitas vezes, essas partes são representadas pelas barras laterais. Frequentemente incluem conteúdo adicional, como definições de um glossário, avisos, biografia do autor e outras informações.
<figure>
O elemento HTML <figure> representa a figura, a legenda e o seu conteúdo em uma única unidade. É um conteúdo autocontido. A sintaxe seria escrita da seguinte forma:
<figure>
<img src="media/imagens/animais-selvagens.jpg" alt="Leoes na Savana Africana" />
<figcaption>Família de leões</figcaption>
</figure>
APIs integradas
A versão 5 do HTML também viabilizou a utilização de diversos métodos e dispositivos de entrada e saída. Incluiu também a integração com várias APIs (Application Programming Interfaces) que estendem as funcionalidades para outros dispositivos móveis. Dentro dessas funcionalidades, podemos encontrar os APIs de geolocalização, armazenamento local e canvas.
Application Programming Interfaces são construções disponíveis em linguagens de programação que permite que os desenvolvedores criem funcionalidades mais facilmente, com uma sintaxe mais simples.
API de geolocalização
Foi introduzido no HTML5 a opção de informar a sua geolocalização (latitude e longitude) para o usuário do seu site, e assim ele ter acesso às coordenadas até a sua loja, por exemplo. Para que essa funcionalidade fique ativa, o usuário deve aprovar que o seu site tenha acesso a localização.
API de armazenamento local
O API Web Storege acessa a área de armazenamento local do navegador, armazenando os dados no lado do cliente, e estando sempre disponíveis quando o usuário for usar a página, fornecendo métodos de armazenamento e recuperação da informação de maneira rápida e prática.
API de canvas para gráficos
O elemento Canvas do HTML5 possui APIs que permitem gerar gráficos, animação e imagens com recursos bidimensionais3. Essa nova ferramenta permite criar elementos muito mais criativos, como uma linha do tempo, gráficos em 2D, animações simples e saídas funcionais. Pode ser usado para desenhar usando linguagem de script, sendo portanto necessário algum conhecimento também em JavaScript.
Esse elemento é suportado por todas as versões recentes da maioria dos navegadores. Tem apenas dois atributos - width e height. Se esses não forem especificados, será usado 300x150 pixels.
Veja outras ferramentas como a estilização de formulário com HTML e CSS.
Melhorias de multimídia
A melhorias relacionadas a multimídia do HTML5 viabilizam que sejam utilizados áudios, vídeos e iframes sem que seja necessário a utilização de plugins externos. Essas tags - <img> <video> <audio> e <iframe> - servem para incluir vídeos, imagens, áudios e outros tipos de conteúdos multimídia.
<audio>
Essa tag é usada quando deseja-se inserir um áudio. Permite o uso de "content categories", tanto um atributo src quanto um ou mais elementos source. Suporta os atributos globais do HTML.
<video>
Como o nome mesmo diz, essa tag <video> é utilizada para a inserção de um vídeo. É necessário incluir alguns atributos para controle, como controls, source, src e type. Para essa tag também é necessário incluir um texto alternativo ou uma mensagem que será renderizada para o caso do navegador não suportar a tag.
Exemplos práticos de uso dos novos recursos e APIs
Como vimos, os APIs são uma interface de aplicativos com a função de conectar sistemas, aplicativos e softwares e entregar uma melhor experiência para o usuário do seu site. Os novos recursos que o HTML5 fornece, permitem que muita coisa já seja incluída no seu site sem a necessidade de uma linguagem de programação adicional. Claro que para incluir mais personalidade é necessário utilizar CSS ou JavaScript, mas o HTML já tem muita coisa disponível.
Alguns exemplos práticos:
<image>
<video>
Também é possível inserir vídeos do YouTube no seu site. Para isso, usa-se a tag <iframe>. Veja como fazer nesse vídeo abaixo.
API de Canvas
Permite incluir gráficos, imagens, desenhos e vetores através dos códigos de HTML. O canal do YouTube CFBCursos tem uma playlist inteira de vídeos dedicado a esse tema. Você pode maratonar os vídeos e aprender tudo sobre HTML Canvas.
Esses são apenas alguns dos inúmeros recursos e novidades que o HTML oferece. Existem ainda algumas ferramentas que permitem a criação de site sem a necessidade de saber de códigos ou de programação, como é o caso das plataformas WordPress e Wix. Mas compreender sobre essas funcionalidades vai te ajudar a compreender melhor a estrutura por trás dessas ferramentas.
Entender também sobre otimização e SEO, que consiste no processo de melhorar o desempenho do seu site para que ele tenha mais relevância nas ferramentas de busca, pode ajudar ainda mais na divulgação e desempenho do seu negócio. E muitas dessas novidades do HTML 5 são importantes ferramentas de SEO.
Compatibilidade e suporte entre navegadores
De forma a garantir que o seu código HTML tenha a compatibilidade necessária entre todos os navegadores, é importante ter em conta alguns aspectos importantes:
- Uso de um código HTML válido e semântico, ou seja, garantir que seu código segue os padrões de especificação do HTML5.
- Especifique sempre o doctype, que é declaração que informa ao navegador qual deve ser a renderização da sua página.
- Fique por dentro da estrutura básica de um documento HTML e evite erros de código e consequentemente de exibição da página.
- Uso de detecção de recursos e fallbacks, que permite verificar se o navegador oferece suporte para um recurso, atributo ou API.
- Usar ferramentas de webdesign que adapta o conteúdo das suas páginas a diferentes tamanhos de telas (como computadores, tablets ou smartphones).
- Teste do seu código HMTL para identificar e corrigir potenciais erros.
É importante sempre se atualizar e aprimorar as suas habilidades em HTML, ficar por dentro das atualizações e estudar sobre a criação de páginas web acessíveis e compatíveis. Tenha em mente que a maior parte das pessoas hoje em dia acessam um site através do seu telefone celular, e por isso é importante que o seu site seja compatível com a exibição em um smartphone.
Para fazer um site compatível e versátil, você pode ter uma aula particular de HTML com um professor particular da Superprof. Agende uma aula e aprenda como se tornar um desenvolvedor web.
Referências
- 2023, Marques, Rafael - HTML5: sua novidades e atualizações
- 2024, MDN Web Docs - <anside>
- 2024, Adobe - O que é HTML5 Canvas?
Gostou desse artigo? Deixe uma nota!
Loading...
