Tags HTML5 – Conheça as mais usadas - Criação de Site e Tutoriais de Desenvolvimento

HTML5 é a quinta versão da linguagem de marcação padrão da web, HTML (Hypertext Markup Language). Lançado em 2014, o HTML5 trouxe consigo uma série de recursos e melhorias significativas em relação às versões anteriores, tornando-o a espinha dorsal da web moderna.

Sua importância reside na capacidade de fornecer uma estrutura robusta e flexível para a criação de páginas web dinâmicas e interativas.

Com suporte nativo para recursos como áudio, vídeo, gráficos vetoriais, animações e aplicativos web offline, o HTML5 permitiu aos desenvolvedores criar experiências de usuário ricas e envolventes diretamente no navegador, sem a necessidade de plug-ins de terceiros.

Além disso, o HTML5 introduziu uma série de novas tags semânticas, como <header>, <nav>, <section>, <article> e <footer>, que facilitam a criação de sites bem estruturados e acessíveis para usuários e mecanismos de busca. Isso não apenas melhora a usabilidade, mas também ajuda na otimização para motores de busca (SEO).

Com o crescimento contínuo do uso de dispositivos móveis e a diversidade de plataformas, o HTML5 desempenha um papel crucial na criação de conteúdo web responsivo, adaptável a diferentes tamanhos de tela e dispositivos. Isso proporciona uma experiência consistente e fluida para os usuários, independentemente do dispositivo que estão usando.

Conheça as tags HTML5 usadas para codificação ou marcação de texto

<html>: Define o início e o fim do documento HTML.
<head>: Contém informações sobre o documento, como título, metadados e links para scripts e estilos.
<title>: Define o título da página que aparece na barra de título do navegador.
<base>: Define o URL base para todos os URLs relativos em uma página.
<link>: Define a relação entre o documento atual e um recurso externo (como uma folha de estilo).
<meta>: Define metadados sobre o documento, como descrição, palavras-chave e codificação.
<style>: Define estilos CSS embutidos no documento.
<script>: Define scripts JavaScript embutidos no documento.
<noscript>: Fornece conteúdo alternativo para usuários que têm scripts desativados em seus navegadores.
<body>: Contém todo o conteúdo visível da página, como texto, imagens, vídeos, etc.
<article>: Define um conteúdo independente e auto-suficiente, como um post de blog ou uma notícia.
<section>: Define uma seção genérica em um documento.
<nav>: Define uma seção de navegação.
<aside>: Define um conteúdo relacionado, geralmente colocado ao lado do conteúdo principal.
<header>: Define o cabeçalho da página ou de uma seção específica.
<footer>: Define o rodapé da página ou de uma seção específica.
<hgroup>: Define um grupo de cabeçalhos.
<address>: Define informações de contato para o autor/proprietário de um documento ou artigo.
<main>: Define o conteúdo principal da página.

Tags HTML5 para variáveis, dados, blocos e outros

<dl>: Define uma lista de descrição.
<dt>: Define um termo em uma lista de descrição.
<dd>: Define a descrição de um termo em uma lista de descrição.
<figure>: Define uma figura com legenda.
<figcaption>: Define a legenda para uma figura.
<div>: Define uma divisão genérica ou contêiner para elementos.
<span>: Define uma divisão genérica em linha para elementos.
<cite>: Define o título de uma obra citada.
<q>: Define uma pequena citação em linha.
<abbr>: Define uma abreviação ou acrônimo.
<data>: Define um valor de dados.
<time>: Define uma data/hora.
<code>: Define um bloco de código.
<kbd>: Define uma entrada de teclado.
<samp>: Define uma saída de amostra de um programa de computador.
<var>: Define uma variável.
<mark>: Define um texto marcado.
<ruby>: Define uma anotação de texto com base em caracteres ruby.
<rt>: Define uma anotação de texto de ruby.
<rp>: Define o que mostrar em navegadores que não suportam ruby.
<bdi>: Isola uma parte do texto que pode ser formatada de maneira diferente do texto que está ao seu redor.
<bdo>: Substitui a direção do texto.
<wbr>: Define onde uma quebra de linha opcional pode ocorrer.
<br>: Define uma quebra de linha.
<ins>: Define texto inserido.
<del>: Define texto excluído.
<object>: Define um objeto incorporado, como um arquivo de mídia ou um plug-in.
<param>: Define parâmetros para objetos <object>.

Tags HTML5 para áudio, vídeo, imagens e outros

<video>: Define um vídeo.
<audio>: Define um áudio.
<source>: Define recursos de mídia para elementos <video> e <audio>.
<track>: Define faixas de texto para elementos <video> e <audio>.
<canvas>: Define uma área gráfica para desenho via JavaScript. (Ver aplicações)
<map>: Define uma imagem com áreas clicáveis que direcionam para URLs diferentes.
<area>: Define uma área clicável dentro de um mapa de imagem.
<iframe>: Define um quadro embutido para exibir outro documento dentro da página.
<embed>: Define um contêiner para um aplicativo externo ou conteúdo interativo.
<object>: Define um objeto incorporado, como um arquivo de mídia ou um plug-in.
<param>: Define parâmetros para objetos <object>.
<script>: Define scripts JavaScript embutidos no documento.
<noscript>: Fornece conteúdo alternativo para usuários que têm scripts desativados em seus navegadores.
<applet>: Define um applet Java.
<param>: Define parâmetros para applets <applet>.

Tags HTML5 para textos e outros

<h1> até <h6>: Define os cabeçalhos ou Títulos de diferentes níveis, sendo <h1> o mais importante e <h6> o menos importante.
<p>: Define um parágrafo de texto.
<hr>: Define uma linha horizontal.
<pre>: Define texto pré-formatado.
<blockquote>: Define uma seção de texto citado.
<ol>: Define uma lista ordenada.
<ul>: Define uma lista não ordenada.
<li>: Define um item de lista dentro de <ul> ou <ol>.
<a>: Define um hiperlink para outra página ou recurso.
<em>: Define texto enfatizado.
<strong>: Define texto fortemente enfatizado, ou seja: Negrito.
<small>: Define texto de menor importância.
<s>: Define texto que não é mais preciso ou relevante.
<basefont>: Define a fonte base para texto em um documento.
<font>: Define fonte, cor e tamanho do texto.
<big>: Define texto grande.
<strike>: Define texto riscado.
<tt>: Define texto de teletipo.
<center>: Define texto centralizado.
<dir>: Define uma lista de diretórios.
<menu>: Define um menu de navegação ou contexto.
<frame>: Define um quadro dentro de um quadro.
<frameset>: Define um conjunto de quadros.
<noframes>: Fornece conteúdo alternativo para navegadores que não suportam quadros.
<details>: Define um widget de detalhes que o usuário pode interagir para revelar ou ocultar conteúdo.
<summary>: Define um resumo visível para um elemento <details>.
<dialog>: Define uma caixa de diálogo ou janela modal.
<template>: Define um modelo de conteúdo que pode ser clonado e inserido em um documento usando JavaScript.
<slot>: Define um espaço reservado dentro de um modelo que pode ser preenchido com conteúdo quando o modelo é instanciado.

Tags obsoletas ou não mais recomendadas

<acronym>: (Não mais recomendado) Define um acrônimo para um termo.
<base>: Define o URL base para todos os URLs relativos em uma página.
<isindex>: (Não mais recomendado) Define um campo de entrada para pesquisa.
<keygen>: (Não mais recomendado) Define um campo de geração de chave para formulários.
<command>: (Não mais recomendado) Define um comando que o usuário pode invocar.
<spacer>: (Não mais recomendado) Define um espaço em branco.
<marquee>: (Não mais recomendado) Define um texto que se move ou rola automaticamente.
<nobr>: (Não mais recomendado) Define texto que não deve ser quebrado em várias linhas.
<bgsound>: (Não mais recomendado) Define um som de plano de fundo.
<blink>: (Não mais recomendado) Define texto piscante.