Conteúdo
Como surgiu o HTML5 ?
O HTML5 surgiu em 2014 com grandes mudanças e atualizações na linguagem de marcação mais utilizada no mundo inteiro. O HTML , criado por Tim Berners Lee, surgiu em 1991 e logo se popularizou, por ser a principal linguagem utilizada na web. Hoje ela é considerar um dos padrões web supervisionada e controlada pela W3C (The World Wide Web Consortium) .
Desde 1999 o HTML não recebia uma grande atualização. O HTML 4 estagnou de forma que já não conseguia atender a todas necessidades do mercado. Portanto, era necessário integrar plugins externos, como o flashplayer, para poder garantir as novas funcionalidades.
Em 2004, foi fundado o WHATWG (Web Hypertext Application Technology Working Group) por desenvolvedores de grandes empresas como Mozilla, Apple e Opera. A partir desse momento, teve início o trabalho de criação da nova versão do HTML. Em 2008 foi lançada uma versão beta, porém, só mais tarde seria lançada a nova versão definitiva: o HTML5.
Neste tutorial, vamos explicar as principais inovações que surgiram com o HTML5 e os novos padrões da web.
As principais novidades do HTML5
A versão 5 do HTML foi desenvolvida para aperfeiçoar a experiência da World Wide Web para os desenvolvedores e usuários finais, o que trouxe grandes avanços para a linguagem HTML.
O HTML 5 fornece o suporte de áudio e vídeo em alto nível que, até então, não existia nas versões anteriores sem o uso de plugins. Essa nova versão também nasceu com uma proposta marcante: ela não é uma versão final, ou seja, seguirá recebendo atualizações ao longo do tempo.
No HTML5, surgiram novos recursos para suporte gráfico 2D e 3D, como a adoção do Canvas. Houve também grandes melhorias a respeito da conectividade com o servidor. Além disso, também houve novidades quanto a trabalhar com armazenamento de dados e operações offline. Portanto, só com essas novidades, já é possível perceber o quanto o HTML5 veio com o objetivo de transformar, simplificar e aperfeiçoar a forma de desenvolvimento das páginas. Já se percebe essa característica através da simples declaração doHTML5, o <!DOCTYPE html>.
Outra grande mudança com o HTML5 foi a inserção de tags específicas para seções comuns à maioria dos sites, como rodapés, cabeçalhos, menus, artigos, etc. Essa mudança trouxe uma forma semântica de se trabalhar com a linguagem. Assim passou a ser possível a criação de códigos prontos para futuros dispositivos de forma facilitada. Portanto, esta versão possibilitou diversas funcionalidades que até então, só eram possíveis através de plugins, e de uma forma que não sobrecarregue a página, mantendo-a leve e rápida.
A relação entre o HTML5 e o CSS também é uma das características que possibilitou um avanço na estilização das páginas. O HTML5 traz total suporte para o CSS, facilitando o uso das folhas de estilo em cascata. Outra característica importante do HTML5 é que sua sintaxe mantém total compatibilidade com o HTML4 e XHTML. O Google, inclusive, valoriza sites atualizados para HTML5 nos resultados de buscas. Dessa forma, isso ajudará seu SEO.
As 8 áreas que contemplam as novidades do HTML5
Conforme mencionamos anteriormente, o HTML5 trouxe uma nova forma de se desenvolver para a web, facilitando a utilização de muitos recursos que antes só eram possíveis aplicar através de plugins. Em seu surgimento, O W3C dividiu as novidades em oito áreas tecnológicas, facilitando na homologação do padrão e suporte aos fabricantes. Estas áreas são:
- Semântica: Com as novas tags de estrutura, é possível especificar ao navegador o conteúdo contido na seção. Dessa forma, facilita muito a maneira de desenvolver os documentos HTML. Também é um mecanismo muito útil para os mecanismos de busca, sendo muito bem aproveitado para SEO;
- Conectividade: Grandes avanços na comunicação com o servidor de formas modernas e inovadoras. Por exemplo, permite melhor comunicação usando WebSockets e SSE (Server Side Events);
- Armazenamento de dados e dados offline: Melhorou a forma de lidar com armazenamento de dados local, além de permitir que as páginas sejam armazenadas no local do cliente. Dessa forma, permite ainda que a página seja renderizada mesmo estando desconectado (offline);
- Multimídia: Viabiliza a utilização de áudio, vídeos e iframes sem a necessidade de plugins externos, além de otimizar esses recursos;
- Gráficos e efeitos 2D/3D: Possibilita um leque de opções através de efeitos gráficos.
- Performance e integração: O HTML5 traz melhor performance de velocidade, além de fornecer melhor utilização do hardware do computador;
- Acesso ao dispositivo: Viabiliza a utilização de diversos métodos e dispositivos de entrada e saída. Além disso, tem também a integração com diversas APIs que estendem funcionalidades para diversos dispositivos móveis. Dentre elas, uso de geolocalização, uso de acelerômetro, o uso do microfone e câmera destes dispositivos, além de eventos específicos para telas sensíveis ao toque;
- Estilização: Associado ao CSS3, permite o desenvolvimento de temas mais sofisticados.
Criando um página em HTML5
No HTML5, podemos iniciar uma página apenas definindo o <!DOCTYPE html>. Após isso, inserimos então a tag <html> onde ficará todo o conteúdo de nossa página. Incluímos em seguida o <head>, que conterá todas as informações de base que não serão renderizadas do nosso site, como metadados e outros. Depois incluímos a tag <body> onde conterá o corpo da página, ou seja, o que será renderizado pelo navegador. Dessa forma, podemos incluir diversas tags no nosso documento.
Também é importante definir o padrão de caracteres (charset) , que no HTML5 é muito fácil, bastando incluir o seguinte código ao <head>
<meta charset="UTF-8">
Neste artigo vamos abordar as principais tags semânticas do HTML5, assim como as principais tags de multimídia. Você pode ainda ler mais a respeito das tags no nosso artigo sobre tags HTML.
Veja um exemplo de uma estrutura básica de uma página em HTML5 já com tags semânticas:
<!DOCTYPE html>
<html>
<head>
<title>Minha página HTML5</title>
<meta charset="utf-8"><!--definiçã do padrão de caracteres-->
<style>
/*AQUI VAI TODO NOSSO CÓDIGO CSS*/
</style>
</head>
<body>
<header><!--criando um cabeçalho para nossa página com um menu-->
<h2>Minha Página em HTML5</h2>
<nav><!--vamos criar um menu utilizando listas-->
<a href="#home">Página Inicial</a>
<a href="#artigo1">Artigo 1</a>
<a href="#artigo2">Artigo 2</a>
<a href="/contato/">Contato</a>
</nav><!--aqui finaliza o meu menu-->
</header>
<main>
<section><!--vamos criar a primeira section do meu documento-->
<article>
<h3>Titulo do meu artigo</h3>
<p>Conteudo do meu artigo</p>
<p>Mais conteúdo para o meu artigo</p>
<ol><!--vamos criar uma lista ordenada-->
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</article><!-- aqui finaliza meu primeiro artigo da section-->
<article>
<h3>Titulo do meu segundo artigo</h3>
<p>Conteudo do meu segundo artigo</p>
<p>Mais conteúdo para o meu segundo artigo</p>
</article><!--aqui finaliza meu segundo artigo da section-->
</section><!--aqui encerra a primeira section do meu documento-->
</main><!--aqui finaliza todo conteúdo principal do corpo da pagina-->
<aside>
<h4>Conteúdos relacionados</h4>
<a href="/artigo1/">Artigo 1</a>
<a href="/artigo2/">Artigo 2</a>
<a href="/artigo3/">Artigo 3</a>
</aside>
<footer>
<h3>Minha primeira página html</h3>
<p>Todos os direitos reservados</p>
</footer>
<script>
//AQUI VAI NOSSO CÓDIGO DE SCRIPT (JAVASCRIPT)
</script>
</body>
</html> A semântica do HTML5
O termo semântica representa o significado de uma palavra ou frase em uma linguagem. Dessa forma, o HTML5 adota a semântica trazendo maior significado a suas seções. Ou seja, com as novas tags, é possível inserir seções que possuem um valor semântico, um significado, já predefinido. Isso auxilia os mecanismos de busca, além de facilitar no desenvolvimento da página e também na identificação do conteúdo por parte do usuário.
Quando utilizamos uma <div>, não tem como identificarmos de fato o seu conteúdo, portanto, essa é uma tag não semântica. Mas se utilizarmos uma tag <header>, já sabemos que o conteúdo representa um cabeçalho, portanto é uma tag com valor semântico. Com isso, vamos estudar agora as principais tags semânticas do HTML5:
Elemento <header>
A tag <header> significa cabeçalho, e representa que todo seu conteúdo será parte do cabeçalho da seção. É muito utilizada para inserir o conteúdo inicial de uma página, geralmente contendo uma logo e um menu. Veja o exemplo abaixo:
<header>
<div class="logo">
<h1>Minha página</h1>
<img src="logo.jpg"/>
</div>
<nav>
<ul>
<li>Home</li>
<li>Sobre</li>
<li>Contato</li>
</ul>
</nav>
</header> Neste exemplo, incluímos uma logo, com um título da página e posteriormente utilizamos uma tag <nav> (cuja utilização explicaremos posteriormente) para incluir a estrutura de um menu através de listas.
Porém, também pode ser utilizado dentro das seções do conteúdo, como uma postagem de blog. Dessa forma, o <header> servirá para especificar o cabeçalho daquela postagem, geralmente contendo um título e uma descrição introdutória. Veja o exemplo abaixo:
<section>
<header>
<h2>Minha postagem do Blog</h2>
<p>Resumo ou introdução a essa postagem</p>
</header>
<article>
<!--CONTEUDO-->
<!--CONTEUDO-->
<!--CONTEUDO-->
</article>
</section> Elemento <section>
O elemento <section> define uma seção do documento. De acordo com a documentação HTML5 do W3C: “Uma seção é um agrupamento temático de conteúdo“.
Diante disso, uma seção pode ser entendida como um agrupamento de um determinado conteúdo. Por exemplo, uma página de uma empresa que possua as seguintes divisões: uma introdução, serviços que a empresa realiza, informações sobre a empresa, depoimentos e contato. Dessa forma, podemos incluir, para cada uma dessas divisões uma seção. Cada seção terá o seu objetivo. Isso facilita muito na hora de desenvolver uma página HTML, pois permite dividir seu conteúdo adequadamente, mantendo um valor semântico.
Vejamos o exemplo a seguir:
<body>
<section>
<h1>Minha primeira seção</h1>
<p>Conteúdo da minha seção</p>
</section>
<section>
<h1>Minha segunda seção</h1>
<p>Conteúdo da minha seção</p>
</section>
</body> Elemento <article>
O elemento <article> define um artigo dentro do seu documento. É uma divisão de conteúdo independente, ou seja, de conteúdo especifico completo. Um artigo deve fazer sentido por si só, de forma que seu conteúdo possa ser lido independentemente do restante da página. Geralmente, seu conteúdo consiste em texto e conteúdo gráfico e de multimídia que complementem esse texto.
Exemplos de onde um elemento <article> pode ser usado:
- Postagem no fórum
- Postagem no blog
- Artigo de jornal
Dessa forma, veja o exemplo abaixo:
<body>
<article>
<h1>Título do meu Artigo</h1>
<p>Conteúdo do meu artigo</p>
<p>Conteúdo do meu artigo</p>
<p>Conteúdo do meu artigo</p>
</article>
</body> Sua definição pode confundir-se com a utilização do elemento <section>, por isso, preparamos um tópico específico para explicar essa relação:
<section> ou <article>?
Vimos anteriormente que elemento <article> especifica conteúdo independente e completo por si só. Já o elemento <section> define seção em um documento HTML5. Porém, ainda existem uma grande confusão por parte das pessoas e desenvolvedores sobre como utilizá-las. Basicamente, podemos perceber que é possível aninhar sections dentro de articles e vice versa. O que vai definir isso é o conteúdo incluso dentro de cada uma. Para decidir entre qual delas utilizar, vale a pena se perguntar: se eu extrair esse elemento do seu contexto, ele continuará fazendo sentido? Se sim, tudo indica que é um <article>. se não, é possível que seja um <section>.
Vejamos um exemplo de uma galeria de fotos com legendas explicando a foto. Podemos dizer que cada foto pertence a uma seção, e a legenda pertence a um artigo sobre a foto. Ou seja, teremos na estrutura algo como:
<section>
<img src="exemplo.jpg">
<article>
<h1>Minha imagem<h1>
<p>Descrição da minha imagem</p>
</article>
</section> Outro exemplo disso: em uma página de jornal, possuímos a seção esportes, e dentro dessa seção, encontramos então os artigos referentes a esportes.
Vejamos agora a situação de aninhamento de <section> dentro do <article>. Esse exemplo é muito utilizado para postagens de blogs, onde a postagem deve ser independente por si só, ou seja, um artigo. Porém dentro dela, podemos conter algumas seções: introdução, conteúdo 1, conteúdo 2, conclusão. Essas seções são dependentes de outras seções para sua compreensão, ou seja, dependem de todo o contexto para serem totalmente compreendidas. Portanto, a estrutura ficaria parecida com:
<article>
<h1>Título do meu artigo</h1>
<section>
<p>Introdução</p>
<p>texto</p>
</section>
<section>
<p>conteúdo 1</p>
<p>conteúdo 1</p>
<p>conteúdo 1</p>
</section>
<section>
<p>conteúdo 2</p>
<p>conteúdo 2</p>
</section>
<section>
<p>Conclusão</p>
</section>
</article> Elemento <main>
Define o conteúdo principal e exclusivo da página. O conteúdo dentro do elemento <main> deve ser exclusivo para o documento. Ele não deve conter nenhum conteúdo que seja repetido em documentos como barras laterais, links de navegação, informações de direitos autorais, logotipos de sites e formulários de pesquisa. Por exemplo: se você tiver uma barra de navegação que aparecerá na lateral de todas as páginas do seu site, a mesma não deve ser inclusa no elemento <main>. Porém, se você tem uma seção que só aparecerá na página inicial, a mesma pode e deve estar inclusa no elemento <main>.
O elemento <main> é um elemento principal, portanto, não deve ser aninhado dentro de header, footer, sections, articles ou outros. Deve pertencer ao body. Muitas páginas costumam utilizar como estrutura padrão a seguinte hierarquia:
<body>
<header>
...
</header>
<main>
<section>
...
</section>
<section>
...
</section>
</main>
<footer>
...
</footer>
</body> O elemento <footer>
Este elemento representa o rodapé, o conteúdo final de um documento HTML5. Assim como o <header>, pode ser utilizado aninhado a outros elementos. Geralmente, dentro do elemento <body> é utilizado um <footer> para definir o rodapé da página.
É muito comum incluir no rodapé um mapa do site, ou ainda informações como direitos autorais, termos de uso ou informações de contato. Também e comum apresentar novamente o nome ou logo da página.
Vejamos o seguinte exemplo:
<body>
...
<footer>
<img src="logo.png">
<p>Endereço: ...</p>
<p>Telefone:(XX)XXXX-XXXX</p>
<p>Todos os direitos reservados</p>
</footer>
</body> Elemento <aside>
O elemento <aside> define algum conteúdo além do conteúdo principal. O conteúdo de <aside> deve estar relacionado ao conteúdo do documento, porém não ser o foco principal deste. É muito utilizado para integrar uma barra lateraal, ou ainda uma seção de “saiba mais”, entre outros. Veja um exemplo abaixo:
<main>
<article>
<p>Essa semana, eu e minha família conhecemos a cidade de São Paulo.</p>
</article>
</main>
<aside>
<h4>São Paulo</h4>
<p>Capital do estado de São Paulo</p>
</aside> Elemento <nav>
O elemento <nav> representa uma barra de navegação, ou seja, algo como um menu. Portanto, é muito utilizado para criação do menu da página, ou ainda para a criação de lista de links, entre outros. Dessa forma, é comum encontrarmos a tag <nav> aninhada a outros elementos, como o <header>,<footer> ou <aside>.
Observe que nem todos os links de um documento HTML5 devem estar dentro deste elemento. Portanto, o elemento <nav> destina-se apenas ao bloco principal de links de navegação.
Vejamos então o exemplo abaixo:
<nav> <a href="#home">Página inicial</a> <a href="#sobre">Sobre</a> <a href="#servicos">Serviços</a> <a href="#contato">Entre em Contato</a> </nav>
Outros elementos semânticos do HTML5
Além dos elementos apresentados anteriormente, o HTML5 trouxe consigo diversos outros elementos com valores semânticos. Confira alguns deles na tabela abaixo:
| Elemento | Descrição |
|---|---|
| <details> | Define detalhes adicionais que o usuário pode visualizar ou ocultar |
| <figcaption> | Define uma legenda para o elemento <figure> |
| <figure> | Especifica conteúdos como ilustrações e imagens, listagens de códigos, fotografias, etc |
| <mark> | Define um texto marcado, realçado |
| <summary> | Define um título visível para o elemento <details> |
| <time> | Define uma data ou horário |
Principais tags de multimídia do HTML5
Como mencionamos anteriormente, uma das principais atualizações do HTML5 é a possibilidade de incluir multimídias sem a necessidade de plugins externos. As tags de multimídia servem para incluir imagens, vídeos, áudios, iframes e outros tipos de conteúdo multimídia. Dentre as principais, estão as tags <img>, <video>,<audio> e <iframe>. Vamos estudá-las:
A tag <img>
Essa tag não necessita de fechamento, serve para incluir uma imagem ao seu texto. A partir dessa tag, utilizamos o atributo src=”…” onde deve ser digitado o local em que a imagem se encontra. Também é muito utilizado em conjunto com o atributo alt=”…” para definir o texto alternativo da imagem.
Por exemplo:
<img src="imagens/imagem1.jpg" alt="imagem 1 da minha página">
As tags <video> e <audio>
A tag <video> serve para indicar a inserção de um vídeo. Com isso, devemos colocar alguns atributos dentro da tag para poder ativar o controle, a principal dela é o controls. Posteriormente, incluímos a tag <source> com os atributos src e type, que receberão o local em que está o vídeo e o tipo do vídeo. Além isso, é recomendado utilizar mais de um tipo de source do mesmo vídeo, para garantir maior possibilidade de compatibilidade com o navegador. Finalmente, podemos incluir uma mensagem que será renderizada apenas se o navegador do usuário não suportar a tag video.
Diante disso, vejamos os exemplos a seguir:
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> Seu navegador não possui suporte para Vídeos. </video>
A tag <audio> funciona da mesma forma que a tag <video>, portanto, utilizamos a tag <source> dentro dela. Vejamos o exemplo a seguir:
<audio controls> <source src="musica.ogg" type="audio/ogg"> <source src="musica.mp3" type="audio/mpeg"> Seu navegador não possui suporte para áudio. </audio>
<iframe>
Os iframes são muito utilizados na atualidade, servem para incluir recursos de uma outra página dentro da sua página. Por isso, vale a pena conferir o exemplo da W3C Schools, página de tutorias pertencente ao grupo W3C, a organização atualmente responsável pelos padrões da web.
Portanto, para inserir um iframe, basta utilizar a tag com o atributo src. Além disso, é possível incluir um texto dentro do elemento, caso o navegador do usuário não possua suporte para tal. Vejamos então o exemplo abaixo:
<iframe src="https://www.homehost.com.br"> <p>Seu navegador não possui suporte para iFrames.</p> </iframe>
HTML5 e os elementos <canvas> e <svg>
Com tudo que foi explicado nesse artigo, você já será capaz de entender a semântica completa do HTML5, suas principais funcionalidades e ainda conseguirá criar páginas completas. Porém, o HTML5, conforme mencionado no inicio desse artigo, trouxe diversas funcionalidades.
Uma funcionalidade muito útil é possível através da tag <canvas> e da tag <svg>. Essa tags permitem a inserção e manipulação, até mesmo, criação de animações, através do código HTML sem a utilização de plugins externos.
A tag <canvas> permite a inserção de gráficos através de script (geralmente utilizando JavaScript). Você pode estudar mais a respeito sobre na documentação oficial da W3C Schools sobre canvas.
Já a tag <svg> permite a incluir um código diretamente no HTML que resultará em uma renderização vetorial. Diferentemente do canvas, não é necessário a utilização de scripts, e todo o código é feito diretamente no HTML e estilizado no CSS. Você pode ler mais a respeito na documentação oficial da W3C Schools sobre a tag svg.
Aprofundando seus estudos em HTML5
Esse artigo já traz conteúdo suficiente para você entender melhor as principais novidades do HTML5, como funciona a semântica, assim como seus principais elementos. Portanto, com esta leitura, você já será capaz de criar suas próprias páginas HTML5. Também recomendamos a leitura de outras publicações do nosso blog, como:
Além disso, também recomendamos os seguintes links para estudo:
- Novos elementos do HTML5 – W3C Schools (em inglês)
- Documentação do Mozilla sobre HTML5 (parcialmente traduzido)
