Conheça finalmente as tags HTML 5 e aplique em seu projeto!

Devido a evolução do mundo conectado e a necessidade de transformar a internet mais atrativa surgiu a nova e atual versão da linguagem de marcação de texto que é utilizada para o mundo web, o HTML 5.

Por mais que o HTML 5 seja suportado hoje em todos os navegadores modernos e até em plataforma mobile, muitos profissionais front-end, por mais que conheça seu poder, desconhece sua estrutura, suas tags e também seus novos atributos.

E com base nisso, resolvi separar aqui as tags HTML 5 com exemplos de como deve-se utilizar e qual a função de cada uma delas, espero que esse artigo possa ajuda-lo.

<section>

Quando você quer dividir os assuntos (conteúdo também serve) do seu site várias seções diferentes. Essa tag é mais específica que uma <div>

Check out this Pen!

<nav>

Define uma seção que contém apenas links de navegação. Seria a forma de se criar uma nav-bar.

Check out this Pen!

<article>

Essa tag é utilizada quando você quer criar conteúdos específicos, indicando que, aquela informação que está inserida na tag é importante. Imagine um post de um blog, ou uma notícia de uma revista web.

Check out this Pen!

<aside>

Dá destaque a uma parte de um conteúdo que está relacionado ao contexto do site, imagina um livro onde existe um box com destaque, essa tag seria esse blog, dentro de um conteúdo maior.

Check out this Pen!

<hgroup>

Agrupa as tags que são utilizadas como cabeçalho <h1>, <h2>

Check out this Pen!

<header>

O que era utilizado apenas como cabeçalho de página, essa tag agora é aplicada quando você quer definir cabeçalhos de: seções, formulário de pesquisa, e outros.

Check out this Pen!

<footer>

Defini o rodapé de uma página ou seção.

Check out this Pen!

<main>

Define o conteúdo principal ou importante no documento. Existe apenas um elemento <main> no documento.

Check out this Pen!

<figure>

Marca diagrama, ilustrações e imagens. Deve ser utilizado em conjunto com a tag <figcaption>

Check out this Pen!

<data-*>

Utilizado para inserir dados de forma background do código HTML e com isso você pode com o uso do Javascript manipular esses dados “ocultos”

Check out this Pen!

<time>

Utilizada para apresentação de data e hora para que por exemplo os mecanismos de buscas trabalhem de forma mais inteligente.

Check out this Pen!

<mark>

Utilizado para dar destaque a uma palavra ou frase.

Check out this Pen!

<embed>

Representa um ponto de integração para uma aplicação externa ou um conteúdo interativo, em outras palavars, um plugin.

Check out this Pen!

<video>

O elemento HTML  <video> é utilizado para incorporar conteúdo de vídeo em um documento HTML ou XHTML.

Check out this Pen!

<audio>

O elemento audio é utilizado para embutir conteúdo de som em um documento HTML ou XHTML.

Check out this Pen!

<source>

O elemento source é utilizado para especificar múltiplos recursos de mídia de elementos audio e video em HTML5. É um elemento vazio.

Check out this Pen!

<track>

Este elemento é usado como filho dos elementos de mídia <audio> e <video>. Ele é utilizado para especificar o tempo exato da legenda a ser apresentada em seus vídeos.

Check out this Pen!

<canvas>

O elemento HTML Canvas (<canvas>) pode ser utilizado para desenhar gráficos utilizando scripts (geralmente JavaScript).

Check out this Pen!

<svg>

O elemento <svg> pode ser usado para se incorporar ao código HTML do seu documento. Utilizado para coordenar o sistema.

Check out this Pen!

<datalist>

O elemento HTML Datalist (<datalist>) contém um conjunto de elementos <option> que representam as opções possíveis para o valor de outros controles.

Check out this Pen!

<keygen>

Este elemento existe para facilitar a geração de materiais chave para envio de senhas públicas como parte de um formulário HTML.

Check out this Pen!

<output>

O elemento saída (<output>) representa o resultado de um cálculo.

Check out this Pen!

<profress>

o elemento HTML progress (<progress>) é usado para visualizar o progresso de uma tarefa. Embora as especifidades de como é mostrado ficam a cargo do desenvolvedor, tipicamente, é mostrado como uma barra de progresso.

Check out this Pen!

<meter>

O elemento HTML meter (<meter>) pode representar um valor escalar dentro de um intervalo conhecido ou um valor fracionário.

Check out this Pen!

<details>

O elemento HTML details (<details>) é usado como uma ferramenta de onde o usuário irá obter informações adicionais.

Check out this Pen!

<summary>

O elemento HTML summary (<summary>) é utilizado como um sumário ou legenda para o conteúdo de um elemento <details>.

Check out this Pen!

<command>

O elemento command representa um comando que o usuário pode chamar.

Check out this Pen!

<menu>

O elemento <menu> representa um grupo de comandos que o usuário pode ativar.

Check out this Pen!