Nem gifs de gatinhos, nem spoilers de séries de TV, o que realmente compõe a internet inteira é uma sigla curtinha, de apenas 4 letras: HTML. Ou melhor: HTML5, a versão mais recente de uma linguagem de programação que está presente desde o começo da web, e que hoje é requisito básico para qualquer freela que queira fazer uma grana com design na internet.
Não sabe o que é HTML5 e nem como essa linguagem pode afetar o rendimento dos seus jobs? Então confira o post porque nós explicaremos um pouco mais sobre isso!
O HTML e suas versões
Antes de falar diretamente do HTML5, primeiro devemos entender um pouco mais sobre o HTML básico.
Pois bem, essa sigla, HTML, representa Hypertext Markup Language, ou Linguagem de Marcação de Hipertexto, e foi criada por ninguém mais, ninguém menos, que o físico britânico Tim Berners-Lee, o pai da World Wide Web, que é a internet como nós conhecemos hoje.
O que essa linguagem faz é usar marcações que ajudam a construir um site por completo, apontando para o navegador — que lê e interpreta essas marcações em HTML — onde existe um elemento gráfico, textual ou até mesmo um link naquela determinada página.
No entanto, o HTML original, publicado inicialmente por Berners-Lee em 1991, sofreu diversas atualizações desde o seu surgimento.
Dentre as principais mudanças podemos destacar:
- atualização para a versão 2.0 em 1995;
- atualização para a versão 3.2 em 1997;
- atualização para a versão 4.01 em 1999;
- surgimento da especificação XHTML no ano 2000;
- atualização para a versão 5 em 2014.
Mas, afinal, o que é HTML5
Bem, como você pôde ver, até chegar ao HTML5, a linguagem passou por diversas atualizações nos últimos anos. E em cada uma dessas atualizações, ela ganhava novos elementos, funções e atributos que representavam algumas demandas da época.
No caso do HTML5, as principais demandas que levaram a essa atualização giravam em torno de:
- necessidade de receber elementos multimídia como áudio e, principalmente, o vídeo, bastante em alta com o surgimento do YouTube em 2005;
- necessidade de reduzir o número de linhas de código para realizar determinadas funções;
- necessidade de deixar a linguagem mais fácil de ser compreendida por não-programadores (como pode ser observado no artigo 1.5 da documentação da W3C, a organização responsável por atualizar os códigos);
- necessidade de reproduzir no HTML os efeitos gerados até então por meio do Flash.
Ou seja: com isso em mente, dá para dizer que o HTML5 foi uma atualização mais acessível e multimídia da linguagem que, no final das contas, acabou por enterrar de vez o Flash.
O assassino do Flash
Febre na internet na virada dos anos 90 para 2000, o Adobe Flash era um sistema multimídia capaz de gerar interações animadas para o usuário nas páginas da web.
No entanto, com a chegada dos smartphones no mercado, muita gente começou a não gostar tanto assim do sistema (que acabava por criar sites bastante pesados e difíceis de serem carregados nos celulares da época, como podemos entender por meio desse artigo da Wired). E uma das pessoas que não estava nada satisfeita com o Flash era o antigo CEO da Apple: Steve Jobs.
Jobs chegou até mesmo a publicar uma carta aberta intitulada Thoughts on Flash, na qual explicava por que não daria suporte à tecnologia em seus produtos e como que o HTML5, ainda em desenvolvimento na época, poderia facilmente fazer tudo que o flash fazia daqui algum tempo.
7 anos após a publicação dessa carta, a Adobe resolveu anunciar o fim do Flash mediante os avanços do HTML5.
Pontos principais do HTML5
Pronto, agora que você já sabe o que é o HTML e como a linguagem chegou nesta quinta versão, nada melhor do que dar uma olhada em seus pontos principais e em como elas são usadas dentro das páginas.
Acessibilidade e semântica
Antes do HTML5, se você precisasse descrever toda a hierarquia do layout do site, não existia um código específico para isso. No entanto, com a atualização da linguagem as coisas mudaram e agora temos as tags <header> (cabeçalho), <footer> (rodapé), <article> (artigo) e <section> (seção), dentre outras, para facilitar o posicionamento dos elementos no site.
Mais leve, mais rápido e mais econômico
Esses novos códigos inseridos no HTML5 fizeram com que a linguagem gastasse menos comandos para executar as funções, algo que ajuda a programação a ficar mais leve, mais rápida e mais econômica, já que ela agora precisa de um número reduzido de respostas dos servidores onde estão colocados os sites.
Elementos gráficos
Graças às tags <svg> e <canvas> não é mais preciso pedir ajuda ao Flash para produzir sites interativos. E se você duvida, dê uma olhada nessa seção do Awwwards destinada apenas aos sites que souberam aproveitar desta novidade.
Elementos multimídia
Com as tags <video> e <audio> ficou bem mais simples inserir elementos multimídia nas páginas.
Atributos para formulários
Por conta de atributos como number, date, time, calendar e range, agora é possível criar campos e puxar informações de formulários sem precisar de códigos externos, como o JavaScript.
A estrutura básica
Nunca brincou com esses códigos HTML? Então aqui vai um exemplo de estrutura básica para você testar no Adobe Dreamweaver ou até mesmo digitando tudo isso em um bloco de notas do Windows:
<!DOCTYPE HTML>
<html lang=”pt-br”>
<head>
<title></title>
</head>
<body> </body>
</html>
Entendendo a estrutura
- <!DOCTYPE HTML> – Marcação que indica para o navegador qual é a versão do código que foi usada.
- <html lang=”pt-br”> – Aponta a linguagem principal do documento.
- <head> – Área onde entram os metadados do seu site.
- <title> – Título da página.
- <body> – Corpo da página, ou onde entra o seu conteúdo.
Lembre-se sempre de inserir as informações (como título da página e conteúdo) sempre entre as tags — por exemplo: <body> Aqui está o conteúdo </body>.
Além disso, não se esqueça de salvar a página com a extensão .html antes de testar — por exemplo: index.html.
Por fim, se quiser aprender um pouco mais sobre HTML5, uma boa dica é ver os cursos gratuitos da Udacity — uma empresa de tecnologia fundada por ex-membros do Google e Yahoo —, como esse de Introdução ao HTML e CSS.
Pronto, agora que você já sabe o que é HTML5 e como essa linguagem influencia no trabalho dos webdesigners, que tal aprender um pouco mais a respeito dela e criar um portfólio arrasador?
Curtiu as dicas? Então assine a nossa newsletter e fique por dentro de muito mais!
