Última atualização em 09/07/2023
O HTML5 foi projetado para fazer praticamente qualquer coisa que você queira fazer online sem precisar baixar plugins de navegador ou outro software. Quer criar animações? Incorporar música e filmes? Construir aplicativos avançados que rodam em seu navegador? Você pode com HTML5.
Você vai encontrar neste artigo:
ToggleO que é HTML5?
HTML5 é a versão mais recente do HTML. O termo refere-se a duas coisas. Uma delas é a própria linguagem HTML atualizada, que possui novos elementos e atributos. O segundo é o conjunto maior de tecnologias que funcionam com essa nova versão do HTML — como um novo formato de vídeo — e permitem que você crie sites e aplicativos mais complexos e poderosos.
Para entender como o HTML evoluiu ao longo dos anos, vejamos as diferenças entre HTML e HTML5.
HTML vs HTML5
HTML é a principal linguagem de marcação da World Wide Web. Originalmente projetado para descrever semanticamente documentos científicos, desde então evoluiu para descrever muito mais.
A maioria das páginas na web hoje foram construídas usando HTML4. Embora muito melhorado desde a primeira versão do HTML escrita em 1993, o HTML4 ainda tinha suas limitações. O maior foi se os desenvolvedores ou designers da Web quisessem adicionar conteúdo ou recursos ao site que não fossem suportados em HTML. Nesse caso, eles teriam que usar tecnologias proprietárias não padronizadas, como o Adobe Flash, que exigia que os usuários instalassem plugins do navegador. Mesmo assim, alguns usuários não conseguiriam acessar esse conteúdo ou recurso. Os usuários de iPhones e iPads, por exemplo, não conseguiriam, pois esses dispositivos não suportam Flash.
Dica, HTML5. O HTML5 foi projetado para eliminar a necessidade dessas tecnologias proprietárias não padronizadas. Com esta nova versão do HTML, você pode criar aplicativos da Web que funcionam offline, suportam vídeos e animações de alta definição e sabem onde você está geograficamente localizado.
Para entender como o HTML5 pode fazer tudo isso, vejamos o que há de novo nesta versão mais recente do HTML.
O que há de novo no HTML5?
HTML5 foi projetado com objetivos principais, incluindo:
- Tornando o código mais fácil de ler para usuários e leitores de tela
- Reduzindo a sobreposição entre HTML, CSS e JavaScript
- Promovendo a capacidade de resposta e a consistência do design em todos os navegadores
- Suporte multimídia sem a necessidade de Flash ou outros plugins
Cada um desses objetivos informou as mudanças nesta nova versão do HTML. Vamos nos concentrar em sete dessas mudanças abaixo.
Novos elementos semânticos
O HTML5 introduziu várias novas tags semanticamente significativas. Estes incluem <section>, <header>, <footer> <nav>, <mark>, <figure>, <aside> <figcaption>, <data>, <time>, <output>, <progress>, <meter > e <principal>. Isso torna mais fácil escrever um código mais limpo que delineie claramente o estilo do conteúdo, o que é particularmente importante para usuários com tecnologias assistivas, como leitores de tela.
SVG embutido
Usando HTML4, você precisa de Flash, Silverlight ou outra tecnologia para adicionar gráficos vetoriais escaláveis (SVGs) às suas páginas da web. Com HTML5, você pode adicionar gráficos vetoriais diretamente em documentos HTML usando a tag <svg>. Você também pode desenhar retângulos, círculos, texto e outros caminhos e formas baseados em vetores usando este novo elemento. Abaixo está um exemplo de uma forma circular criada usando o elemento SVG <circle>.
Recursos do formulário
Você pode criar formulários mais inteligentes graças às opções de formulário expandidas do HTML5. Além de todos os tipos de entrada de formulário padrão, o HTML5 oferece mais, incluindo: datetime, datetime-local, date, month, week, time, number, range, email e url. Você também pode adicionar seletores de data, controles deslizantes, validação e texto de espaço reservado graças ao novo atributo de espaço reservado, que discutiremos mais tarde.
Formato de vídeo WebM
Antes do HTML5, você precisava de plugins de navegador para incorporar conteúdo de áudio e vídeo em páginas da web. O HTML5 não apenas introduziu as tags <audio> e <video> que eliminaram a necessidade de plugins de navegador, mas também introduziu o formato de vídeo WebM. Este é um formato de vídeo livre de royalties desenvolvido pelo Google que oferece uma ótima taxa de compactação para qualidade. Isso pode ser usado com o elemento de vídeo e é suportado pela maioria dos navegadores.
Atributo de espaço reservado
HTML5 introduziu o atributo placeholder. Você pode usar isso com o elemento <input> para fornecer uma pequena dica para ajudar os usuários a preencher senhas ou outros campos de entrada de dados. Isso pode ajudá-lo a criar formulários melhores. No entanto, é importante observar que esse atributo não é acessível a tecnologias assistivas. Sinta-se à vontade para ler mais sobre os problemas com o atributo placeholder.
Eventos enviados pelo servidor
Um evento enviado pelo servidor ocorre quando uma página da Web obtém automaticamente dados atualizados de um servidor. Isso era possível com HTML4, mas a página da web teria que perguntar
HTML5 suporta eventos enviados pelo servidor unidirecionais. Isso significa que os dados são enviados continuamente de um servidor para o navegador. Pense em como isso seria útil se o seu site incluísse preços de ações, feeds de notícias, feeds do Twitter e assim por diante. Os eventos enviados pelo servidor eram suportados na versão anterior do HTML, mas a página da Web teria que solicitá-los repetidamente.
Armazenamento da Web Local
Com a versão anterior do HTML, os dados são armazenados localmente por meio de cookies. Com HTML5, o armazenamento na web é usado no lugar de cookies graças a uma API de script. Isso permite que você armazene dados localmente, como cookies, mas em quantidades muito maiores.
Agora que entendemos o que há de novo em HTML5, vamos ver por que você deve usá-lo em seu site.
Por que HTML5?
O HTML5 oferece uma ampla gama de benefícios em relação às versões anteriores do HTML — alguns dos quais mencionamos brevemente acima. Vamos dar uma olhada em apenas algumas razões pelas quais o HTML5 é tão especial.
É compatível com todos os navegadores.
HTML5 é suportado por todos os principais navegadores, incluindo Chrome, Firefox, Safari, Opera, bem como iOS para navegadores Chrome e Safari e Android. Ele pode até funcionar com os navegadores mais antigos e menos populares, como o Internet Explorer. Isso significa que ao criar com HTML5, você sabe que os usuários terão uma experiência consistente em seu site, independentemente do navegador que usarem ou se estiverem em dispositivos móveis ou computadores.
Ele permite a navegação offline.
HTML5 permite que você crie aplicativos offline. Os navegadores que suportam aplicativos offline HTML5 (que é a maioria) baixarão o HTML, CSS, JavaScript, imagens e outros recursos que compõem o aplicativo e os armazenarão em cache localmente. Então, quando o usuário tentar acessar o aplicativo web sem uma conexão de rede, o navegador irá renderizar as cópias locais. Isso significa que você não terá que se preocupar com o não carregamento do seu site se o usuário perder ou não tiver uma conexão ativa com a Internet.
Relacionado: O que é back-end e qual seu papel na programação
Ele permite que você escreva um código mais limpo.
Com os novos elementos semânticos do HTML5, você pode criar bases de código mais limpas e descritivas. Antes do HTML5, os desenvolvedores tinham que usar muitos elementos gerais como divs e estilizá-los com CSS para exibir como cabeçalhos ou menus de navegação. O resultado? Um monte de divs e nomes de classes que tornavam o código mais difícil de ler.
O HTML5 permite que você escreva um código semanticamente mais significativo, o que permite que você e outros leitores separem estilo e conteúdo.
É mais acessível.
Também graças aos novos elementos semânticos do HTML5, você pode criar sites e aplicativos mais acessíveis. Antes desses elementos, os leitores de tela não podiam determinar que um div com um nome de classe ou ID “header” era na verdade um cabeçalho. Agora, com o <header> e outras tags semânticas HTML5, os leitores de tela podem examinar mais claramente um arquivo HTML e fornecer uma experiência melhor aos usuários que precisam deles.
Como usar HTML5
Para começar a usar HTML5 em seu site, é recomendável criar primeiro um modelo HTML. Você pode usar isso como um clichê para todos os seus projetos futuros. Veja como é um modelo básico:
<!DOCTYPE html>
<html lang=”en” manifest="/cache.appcache">
<head>
<title>This is the Title of the Page</title>
<meta charset="utf-8">
<link rel="stylesheet" rel="noopener" target="_blank" href="bootstrap/css/bootstrap.min.css"> <!-- This link is only necessary if you’re using an external stylesheet -->
<style>
/* These style tags are only necessary if you’re adding internal CSS */
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Vamos percorrer o processo de construção deste arquivo linha por linha para que você possa criar um modelo HTML para seus projetos da web. Você pode acompanhar usando um editor de texto básico como o Notepad++.
- Primeiro, declare o tipo de documento como HTML5. Para fazer isso, você deve adicionar o código especial <!DOCTYPE html> na primeira linha. Não há necessidade de adicionar “5” nesta declaração, pois HTML5 é apenas uma evolução dos padrões HTML anteriores.
- Em seguida, defina o elemento raiz. Como esse elemento sinaliza em qual idioma você escreverá, sempre será <html> em um documento HTML5.
- Inclua um atributo de idioma e defina-o na tag de abertura do elemento HTML. Sem um atributo de idioma, os leitores de tela usarão como padrão o idioma do sistema operacional, o que pode resultar em pronúncias incorretas do título e de outros conteúdos da página. Especificar o atributo garantirá que os leitores de tela possam determinar em qual idioma o documento está e tornar seu site mais acessível . Como estamos escrevendo este post em inglês, definiremos o atributo lang do arquivo como “en”.
- Inclua também o atributo manifest em sua tag HTML de abertura. Isso aponta para o arquivo de manifesto do seu aplicativo, que é uma lista de recursos que seu aplicativo da Web pode precisar acessar enquanto estiver desconectado da rede. Isso possibilita que um navegador carregue seu site mesmo quando um usuário perde ou não tem uma conexão com a Internet.
- Crie a seção head do documento escrevendo uma tag de abertura <head> e de fechamento </head>. No cabeçalho, você colocará metainformações sobre a página que não serão visíveis no front-end.
- Na seção head, nomeie seu documento HTML5. Envolva o nome nas tags <title></title>.
- Abaixo do título, adicione meta-informações que especificam o conjunto de caracteres que o navegador deve usar ao exibir a página. Geralmente, as páginas escritas em inglês usam UTF-8, então adicione a linha: <meta charset = “UTF-8“ />.
- Abaixo, adicione links para qualquer folha de estilo externa que estiver usando. Se você estiver carregando o CSS do Bootstrap em seu projeto, por exemplo, será algo assim: <link rel=”stylesheet” rel=”noopener” target=”_blank” href=”bootstrap/css/bootstrap.min.css “>. Para esta demonstração, incluirei um link fictício e um comentário em HTML, informando que é opcional.
- Agora crie a seção do corpo do documento escrevendo uma tag de abertura <body> e de fechamento </body>. A seção do corpo contém todas as informações que estarão visíveis no front-end, como seus parágrafos, imagens e links.
- Na seção do corpo, adicione um cabeçalho e um parágrafo. Você escreverá o nome do título e o envolverá em tags <h1></h1>, e escreverá o parágrafo e o envolverá em tags <p></p>.
- Por último, não esqueça da tag de fechamento do elemento html.
Quando terminar, você pode salvar seu arquivo com a extensão .html e carregá-lo em um navegador para ver como fica.
Relacionado: O que é localhost
Quando surgiu o HTML5?
O primeiro rascunho público do HTML5 foi lançado pelo Web Hypertext Application Technology Working Group (WHATWG) em 2008. No entanto, não foi lançado como uma recomendação do World Wide Web Consortium (W3C) até 28 de outubro de 2014. Essa recomendação foi então mesclada com o HTML Living Standard pelo WHATWG em 2019.
Para entender por que o processo de especificação durou mais de uma década, vejamos a complicada história do HTML5.
Em 1999, um ano após o lançamento do HTML4, o W3C decidiu parar de trabalhar em HTML e se concentrar no desenvolvimento de um equivalente baseado em XML chamado XHTML. Quatro anos depois, houve um interesse renovado na evolução do HTML à medida que as pessoas começaram a perceber que a implantação do XML dependia inteiramente de novas tecnologias como RSS.
Em 2004, Mozilla e Opera propuseram que o HTML continuasse a ser desenvolvido em um workshop do W3C. Quando os membros do W3C rejeitaram a proposta em favor de continuar a desenvolver substitutos baseados em XML, Mozilla e Opera – juntamente com a Apple – lançaram o Web Hypertext Application Technology Working Group (WHATWG) para continuar evoluindo o HTML.
Em 2006, o W3C inverteu o curso e indicou que estava interessado em participar do desenvolvimento da especificação HTML5. Um ano depois, formou-se um grupo para trabalhar com o WHATWG. Esses dois grupos trabalharam juntos por vários anos até 2011, quando decidiram que tinham dois objetivos separados. Enquanto o W3C queria publicar uma versão finalizada do HTML5, o WHATWG queria publicar e manter continuamente um padrão de vida para HTML.
Em 2014, o W3C publicou sua versão “final” do HTML5 e o WHATWG continuou a manter uma versão “viva” em seu site. Esses dois documentos se fundiram em 2019, quando o W3C e o WHATWG assinaram um acordo para colaborar no desenvolvimento de uma única versão do HTML daqui para frente.
Quais navegadores suportam HTML5?
Todas as versões mais recentes dos principais navegadores — incluindo Google Chrome, Opera, Mozilla Firefox, Apple Safari e Internet Explorer — suportam muitos recursos HTML5, mas não todos. Atualmente, Chrome e Opera são os mais compatíveis com HTML5, com Firefox e Safari logo atrás. O Internet Explorer é o menos compatível, embora suporte parcial ou totalmente a maioria dos recursos do HTML5.
Abaixo está uma tabela para mostrar a compatibilidade variável dos principais navegadores. Aqui está uma chave:
- ✓ Totalmente suportado
- ≈ Parcialmente suportado
- ✗ Não suportado
CROMADA | ÓPERA | RAPOSA DE FOGO | SAFÁRI | INTERNET EXPLORER | |
Novos elementos semânticos | ✓ | ✓ | ✓ | ✓ | ≈ |
SVG embutido | ✓ | ✓ | ✓ | ✓ | ✓ |
Recursos de formulário expandido | ✓ | ✓ | ≈ | ≈ | ≈ |
Formato de vídeo WebM | ✓ | ✓ | ✓ | ≈ | ✗ |
Atributo de espaço reservado | ✓ | ✓ | ✓ | ✓ | ≈ |
Eventos enviados pelo servidor | ✓ | ✓ | ✓ | ✓ | ✗ |
Armazenamento local na web | ✓ | ✓ | ✓ | ✓ | ✓ |
HTML5 é o futuro da World Wide Web
Com seus novos elementos semânticos, opções de formulário expandidas, tag de vídeo independente de formato e muito mais, o HTML5 está revolucionando a forma como os desenvolvedores criam páginas da web. Isso, por sua vez, está mudando as experiências dos consumidores online. Agora podemos assistir a vídeos sem precisar atualizar o Flash ou baixar outro software. Podemos usar aplicativos quando não temos uma conexão com a internet. Podemos ter a mesma ótima experiência em um site, seja usando um celular, tablet ou Smart TV – e muito mais.