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>
<nav>
Define uma seção que contém apenas links de navegação. Seria a forma de se criar uma nav-bar.
<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.
<hgroup>
Agrupa as tags que são utilizadas como cabeçalho <h1>, <h2>
<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.
<footer>
Defini o rodapé de uma página ou seção.
<main>
Define o conteúdo principal ou importante no documento. Existe apenas um elemento <main> no documento.
<figure>
Marca diagrama, ilustrações e imagens. Deve ser utilizado em conjunto com a tag <figcaption>
<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”
<time>
Utilizada para apresentação de data e hora para que por exemplo os mecanismos de buscas trabalhem de forma mais inteligente.
<mark>
Utilizado para dar destaque a uma palavra ou frase.
<embed>
Representa um ponto de integração para uma aplicação externa ou um conteúdo interativo, em outras palavars, um plugin.
<video>
O elemento HTML <video> é utilizado para incorporar conteúdo de vídeo em um documento HTML ou XHTML.
<audio>
O elemento audio é utilizado para embutir conteúdo de som em um documento HTML ou XHTML.
<source>
O elemento source é utilizado para especificar múltiplos recursos de mídia de elementos audio e video em HTML5. É um elemento vazio.
<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.
<canvas>
O elemento HTML Canvas (<canvas>) pode ser utilizado para desenhar gráficos utilizando scripts (geralmente JavaScript).
<svg>
O elemento <svg> pode ser usado para se incorporar ao código HTML do seu documento. Utilizado para coordenar o sistema.
<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.
<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.
<output>
O elemento saída (<output>) representa o resultado de um cálculo.
<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.
<meter>
O elemento HTML meter (<meter>) pode representar um valor escalar dentro de um intervalo conhecido ou um valor fracionário.
<details>
O elemento HTML details (<details>) é usado como uma ferramenta de onde o usuário irá obter informações adicionais.
<summary>
O elemento HTML summary (<summary>) é utilizado como um sumário ou legenda para o conteúdo de um elemento <details>.
<command>
O elemento command representa um comando que o usuário pode chamar.
<menu>
O elemento <menu> representa um grupo de comandos que o usuário pode ativar.