HTML5 Roadmap: Guia Completo de Tags
HTML5 Roadmap: Guia Completo de Tags – O HTML5 é a quinta versão da linguagem de marcação HyperText Markup Language (HTML) e trouxe uma série de melhorias e recursos novos. Ele é a base fundamental da estrutura da web moderna, permitindo que os desenvolvedores criem páginas interativas, ricas em conteúdo e acessíveis. HTML5 introduziu muitas tags novas e semânticas que refletem melhor a estrutura do conteúdo e facilitam a manipulação e estilização através de CSS e JavaScript.
Estrutura e Metadados
<html>: Define o início e o fim de um documento HTML5. Tudo dentro deste elemento é considerado conteúdo HTML.<head>: Contém informações sobre o documento que não são exibidas diretamente no navegador, como metadados e links para recursos externos.<meta>: Fornece metadados sobre o documento, como autor, descrição e conjunto de caracteres.<title>: Define o título da página, que é exibido na barra de título do navegador.<base>: Define a URL base para os URLs relativos, ajudando a resolver URLs em diferentes contextos.
Formatação de Texto
<h1>a<h6>: Define títulos de diferentes níveis, sendo<h1>o mais alto e mais importante.<p>: Cria parágrafos de texto.<br>: Insere uma quebra de linha dentro de um texto.<hr>: Insere uma linha horizontal para separar conteúdo.<strong>: Indica que o texto é importante e deve ser enfatizado em negrito.<em>: Enfatiza o texto, geralmente renderizando em itálico.<mark>: Destaca um trecho de texto para chamar a atenção.<sub>: Renderiza o texto como subscrito (abaixo da linha).<sup>: Renderiza o texto como sobrescrito (acima da linha).<del>: Indica que o texto foi removido ou deletado.<ins>: Indica que o texto foi inserido ou adicionado.
Listas e Tabelas
<ul>: Cria uma lista não ordenada, onde os itens são marcados com pontos ou outros símbolos.<ol>: Cria uma lista ordenada, onde os itens são numerados sequencialmente.<li>: Define um item em uma lista (tanto não ordenada quanto ordenada).<dl>: Define uma lista de descrição, frequentemente usada para glossários.<dt>: Define um termo ou item de descrição dentro de uma lista de descrição.<dd>: Define a descrição associada a um termo em uma lista de descrição.<table>: Cria uma tabela que organiza dados em linhas e colunas.<caption>: Define uma legenda ou título para a tabela.<th>: Define um cabeçalho de coluna ou linha em uma tabela.<tr>: Define uma linha dentro de uma tabela.<td>: Define uma célula de dados dentro de uma tabela.<thead>: Define o grupo de cabeçalhos de uma tabela.<tbody>: Define o grupo de conteúdo principal de uma tabela.<tfoot>: Define o grupo de rodapés de uma tabela.<col>: Define propriedades para uma ou mais colunas em uma tabela.<colgroup>: Agrupa uma ou mais colunas para aplicar propriedades em conjunto.
Links e Âncoras
<a>: Cria um hyperlink para outras páginas ou recursos.- Atributo
href: Define o URL de destino do link. - Atributo
target: Define onde o link será aberto (por exemplo, em uma nova aba). <nav>: Define uma seção de navegação na página.
Imagens e Multimídia
<img>: Insere uma imagem na página.- Atributo
src: Especifica o caminho da imagem. - Atributo
alt: Fornece um texto alternativo para acessibilidade. <figure>: Agrupa elementos multimídia, como imagens e vídeos.<figcaption>: Define uma legenda para o elemento<figure>.<audio>: Insere áudio na página.<source>: Define as fontes de áudio para reprodução em diferentes formatos.<video>: Insere vídeo na página.<source>: Define as fontes de vídeo para reprodução em diferentes formatos.<track>: Define faixas de legenda ou descrição para vídeos.
Formulários e Entradas
<form>: Cria um formulário para entrada de dados.<input>: Cria campos de entrada de dados, como texto, senha, checkbox, radio etc.- Atributo
type: Define o tipo de campo de entrada. <textarea>: Cria uma área de texto multilinha.<select>: Cria um menu suspenso para seleção de opções.<option>: Define uma opção em um elemento<select>.<button>: Cria botões clicáveis.<fieldset>: Agrupa elementos de formulário relacionados.<legend>: Define uma legenda para um<fieldset>.<label>: Rótulo para campos de entrada, melhora a usabilidade.<datalist>: Define uma lista de opções para campos de entrada.
Frames e Seções
<iframe>: Incorpora conteúdo externo dentro de um quadro na página.<section>: Define uma seção ou área temática de conteúdo.<article>: Define um conteúdo independente e autônomo.<aside>: Define conteúdo relacionado ou adicional à página principal.<main>: Define o conteúdo principal da página.<header>: Define o cabeçalho da página ou seção.<footer>: Define o rodapé da página ou seção.<nav>: Define uma seção de navegação da página.
Semântica e Componentes
<details>: Cria um elemento expansível que pode conter informações adicionais.<summary>: Define o rótulo para o elemento<details>.<dialog>: Cria uma caixa de diálogo ou modal na página.<mark>: Destaca um trecho de texto para enfatizar ou identificar.<time>: Define uma data e/ou horário.<progress>: Cria uma barra de progresso para representar o progresso de uma tarefa.<meter>: Cria uma barra de medição para representar valores em uma escala.<canvas>: Cria uma área de desenho para gráficos, animações e imagens interativas.<svg>: Insere gráficos vetoriais escaláveis.
Incorporação e Scripts
<script>: Incorpora scripts JavaScript na página.- Atributo
src: Define o caminho para o arquivo de script externo. <noscript>: Fornecer conteúdo alternativo para navegadores sem suporte a JavaScript.<canvas>: Oferece uma área de desenho para gráficos dinâmicos.<svg>: Inclui gráficos vetoriais escaláveis.<math>: Inclui fórmulas matemáticas.
Estilos e Semântica
<style>: Define estilos CSS internos para a página.<link>: Vincula uma folha de estilo externa à página.- Atributo
href: Define o caminho para o arquivo CSS externo. <meta charset>: Define o conjunto de caracteres do documento.<meta name="viewport">: Define metadados de exibição em dispositivos móveis.
Em suma, este guia abrangente cobriu as principais tags HTML5 e seus recursos. Lembre-se de que, à medida que você explora e pratica o desenvolvimento web, você pode se aprofundar em cada tag, aprender sobre seus atributos e entender melhor como usá-las para criar páginas web ricas e interativas. Além disso, o HTML5 continua evoluindo com o tempo, portanto, estar atualizado com as especificações mais recentes é importante para aproveitar ao máximo as capacidades da linguagem.
