O que é HTML5?

Este tutorial fornece uma visão geral introdutória do HTML5. Se você não ouviu muito sobre isso ou apenas quer entender sua relevância, você veio ao lugar certo.

HTML5 é o padrão mais recente para navegadores exibirem e interagirem com páginas da web. Aprovado em 2014, é a primeira atualização para HTML em 14 anos. Nos dias de hoje, é uma vida inteira entre atualizações.

O objetivo do HTML5 é principalmente tornar mais fácil para os desenvolvedores da Web e criadores de navegadores seguirem padrões baseados em consenso que tornam a conformidade mais eficiente e capacitadora. Ele também foi projetado para fornecer experiências de usuário melhores, mais rápidas e mais consistentes para visitantes de computadores e dispositivos móveis.

Aqui estão algumas melhorias importantes no HTML5:

• Há uma estrutura de elementos mais simples e direta para as páginas, o que as torna mais fáceis de construir, ajustar e depurar — e criar serviços automatizados que ajudam você a encontrar recursos importantes na web.
• Ele fornece elementos padrão para objetos de mídia comuns que anteriormente exigiam plug-ins irritantes para áudio, vídeo, etc. Esses plug-ins precisavam ser atualizados regularmente, ou seja, downloads repetidos para gerenciar a segurança.
• Há integração nativa com interfaces para aproveitar as necessidades modernas da Web e de dispositivos móveis. Um dos meus exemplos favoritos disso é a geolocalização, que permite determinar as coordenadas GPS de um visitante da web por meio do navegador. Esse recurso era anteriormente restrito a aplicativos de telefone equipados com GPS.

Por exemplo, abaixo está um exemplo de geolocalização HTML5 de Building Your Startup With PHP: Geolocation and Google Places:

Para quem o HTML5 é importante?

Você é apenas um usuário da Web ou um fã do YouTube?

HTML5 melhora a velocidade, facilidade de uso e consistência em toda a web. Sim, sua experiência no YouTube se tornará gradualmente maravilhosa. Haverá menos atualizações de navegadores e plugins, menos ameaças de segurança e sites mais elegantes, mais legíveis e mais rápidos.

Você é um desenvolvedor web?

HTML5 torna sua vida incrivelmente mais fácil e expande muito o que é possível. Isso também significa que você poderá construir coisas e confiar mais nos construtores de navegadores para garantir a consistência. Isso significa muito menos código de layout condicional.

Você quer construir um navegador da Web?

Por um lado, você terá um ótimo roteiro na especificação HTML5 detalhando como e o que você deve construir. Por outro lado, há mais o que fazer e acertar. Não será tão fácil diferenciar seu navegador dos grandes fabricantes de navegadores.

O pano de fundo do HTML5

De onde vem o HTML5?

HTML5 é o mais recente em mais de 20 anos de padrões de programação de navegadores desde o lançamento da web em 1991.

História do HTML

O HTML surgiu pela primeira vez como um padrão em 1993, e aqui está a linha do tempo das versões HTML aceitas pelos comitês de padrões:

• HTML 2.0: 1995
• HTML 4.0: 1997
• HTML 4.01: 2000
• HTML 5: 2014

Os objetivos do HTML5

De acordo com a Wikipedia, o HTML5 destina-se a consolidar versões anteriores e tipos de documentos diferenciados, como XHTML 1 e DOM Nível 2 HTML:

[HTML5] estende, melhora e racionaliza a marcação disponível para documentos e introduz marcação e …(APIs) para aplicativos Web complexos…HTML5 também é um candidato potencial para aplicativos móveis multiplataforma. Muitos recursos foram projetados com dispositivos de baixa potência, como smartphones e tablets, levados em consideração.

Aqui está um resumo de como MakeUseOf explicou os objetivos do HTML5:

• Elimine plugins como o Flash para recursos comuns que todos precisam. Crie suporte nativo para coisas como áudio e vídeo.
• Reduza a necessidade de JavaScript e código extra com novos elementos nativos.
• Forneça consistência entre navegadores e dispositivos.
• Faça tudo isso da forma mais transparente possível.

Imagem crédito: Tópico Simples

Que novos recursos o HTML5 oferece?

Muito, acontece! HTML5 fornece uma lista impressionante de novos recursos que agora são suportados pela maioria dos navegadores.

Os novos elementos do HTML5

Os novos elementos mais básicos do HTML5 facilitam o layout das páginas da Web e a depuração do seu código ou de outros. Também torna mais fácil para os serviços automatizados varrer a web e entender a importância dos diferentes componentes da página.

Para o layout da página e os principais recursos, agora existem elementos específicos, como:

• e

• para onde vai o conteúdo, como uma postagem no blog

• igual a

  mas mais voltado para o conteúdo
• e tags para que navegadores nativos gerenciem a reprodução de cada um. Não há mais plugins e atualizações de segurança para isso
• especificamente para permitir que você desenhe gráficos usando uma linguagem de script separada
• para colocar conteúdo ou aplicativos externos na página

Aqui está um bom esboço visual deles pela Smashing Magazine:

Aqui estão alguns dos recursos mais avançados do HTML5, incluindo integração de API, tornando a codificação em JavaScript para ações sofisticadas mais fácil e consistente em todos os navegadores:

• Reprodução de áudio e vídeo: oferece reprodução de mídia em navegadores sem plug-ins.

• Geolocalização: identifique a localização do visitante.

• Arrastar e soltar: para carregar arquivos do navegador com gestos simples.

• Trabalhadores da Web: executa JavaScript em segundo plano (sem bloqueio).

• Eventos enviados pelo servidor: permite que os servidores atualizem as páginas da web em um navegador após o carregamento, mais simples e eficiente do que AJAX e JavaScript.

• Armazenamento de dados offline: fornece uma maneira de armazenar dados localmente no navegador, independentemente de cookies.

Precisa ver quais recursos são suportados em quais navegadores? HTML5Test tem uma avaliação interativa útil para recursos e suporte ao navegador:

São tantas novidades que é impossível catalogar todas aqui. Verifique os links de recursos na parte inferior deste tutorial para obter recursos mais profundos que eu recomendo.

Alguns exemplos de HTML5 em ação

Vamos dar uma olhada em alguns exemplos interessantes de HTML5 em ação.

Uma página HTML5 padrão

A simplicidade do HTML5 é clara em seus novos layouts de página. Os elementos mais orientados ao conteúdo tornam o código da página mais fácil de compreender e depurar. Aqui está um exemplo simples de clichê:

Observe que há uma tag doctype mais simples, tags de link e tags de script. Se você quiser ver outras abordagens, confira o HTML5 Boilerplate, uma página HTML5 padrão de código aberto mais ampla.

O elemento de vídeo e os players

Aqui está uma demonstração do CodePen mostrando como é fácil adicionar um player de vídeo ao seu site com o elemento:

Não há nenhum plugin necessário e nenhuma atualização. Tudo o que eu precisava fazer para adicionar o player de vídeo eram as seguintes linhas de HTML:

Formulários

O HTML5 possui uma ampla variedade de aprimoramentos para formulários e elementos de entrada para facilitar a programação da Web e a experiência do usuário muito melhor. Por exemplo, os elementos de entrada agora suportam uma variedade de validações internas. Aqui está uma validação para nome, números, endereço de e-mail e URL do site:

A demonstração acima é de um dos tutoriais aqui no Envato Tuts+ que ensina como fazer validação de formulário com HTML5.

Aqui estão alguns outros tutoriais no Tuts+ relacionados ao formulário HTML5 e sua validação, etc.

Gráficos vetoriais escaláveis ​​(SVG)

Em HTML5, você pode animar elementos mais facilmente com JavaScript. A demonstração do CodePen a seguir mostra o crescimento de uma planta de um vaso de flores com a ajuda da animação SVG.

Qual é o próximo?

Espero que você tenha gostado desta visão geral dos benefícios do HTML5. Se você quiser explorar mais o HTML5, há mais dois recursos que gostaria de sugerir:

• Introdução ao HTML5: Uma excelente introdução aos avanços do HTML5 para desenvolvedores que desejam uma rápida explicação de todos os novos elementos.

• Demonstrações e exemplos de HTML5: Perfeito para mostrar um menu organizado de uma variedade de demos de HTML5, mostrando o que é possível.

Aqui está um exemplo das demos navegáveis ​​em HTML5 Demos:

Se você é um gerente de site WordPress como muitos leitores do Envato Tuts+, você pode querer avaliar temas futuros quanto à sua conformidade com HTML5. O desenvolvimento orientado a padrões com suporte consistente ao navegador torna o desenvolvimento da Web muito mais fácil para muitos de nós e reduzirá o número de bugs que nossos clientes enfrentam, proporcionando cada vez mais experiências de usuário melhores.

No geral, fiquei bastante impressionado com o HTML5. E parece que vai continuar a evoluir.

Além disso, se você estiver procurando por outros utilitários para ajudá-lo a aumentar suas habilidades em HTML5, não se esqueça de ver o que temos disponível no Envato Market.

Como existem tantos recursos úteis para HTML5, incluí uma ajuda extra de alguns dos que considero mais úteis:

Este post foi atualizado com contribuições de Nitish Kumar. Nitish é um desenvolvedor web com experiência na criação de sites de comércio eletrônico em várias plataformas. Ele passa seu tempo livre trabalhando em projetos pessoais que facilitam sua vida cotidiana ou fazendo longas caminhadas noturnas com os amigos.