Tags do HTML
As tags do HTML são usadas para estruturar e organizar o conteúdo de uma página web. Cada tag tem uma função específica e pode conter atributos para modificar seu comportamento.
Estrutura das Tags
As tags HTML geralmente possuem uma abertura e um fechamento:
<div>Conteúdo</div>
Algumas tags são auto-fechadas, ou seja, não precisam de uma tag de fechamento:
<div />
Principais Categorias de Tags
1. Tags de Estrutura
Essas tags definem a estrutura básica do documento HTML.
| Tag | Descrição |
|---|---|
<html> | Define o início do documento HTML. |
<head> | Contém metadados e informações do documento. |
<title> | Define o título da página (exibido na aba do navegador). |
<body> | Contém o conteúdo visível da página. |
2. Tags de Texto
Utilizadas para estruturar textos e títulos.
| Tag | Descrição |
|---|---|
<h1> a <h6> | Títulos do maior (h1) ao menor (h6). |
<p> | Define um parágrafo de texto. |
<strong> | Deixa o texto em negrito. |
<em> | Deixa o texto em itálico. |
<mark> | Destaca o texto com marcação. |
<br> | Quebra de linha. |
<hr> | Insere uma linha horizontal. |
3. Tags de Links e Navegação
Essas tags criam links entre páginas e melhoram a navegação do site.
| Tag | Descrição |
|---|---|
<a> | Cria um link. Exemplo: <a href="https://exemplo.com">Clique aqui</a> |
<nav> | Define uma área de navegação. |
<button> | Cria um botão clicável. |
4. Tags de Listas
Utilizadas para criar listas ordenadas ou não ordenadas.
| Tag | Descrição |
|---|---|
<ul> | Lista não ordenada (com marcadores). |
<ol> | Lista ordenada (numerada). |
<li> | Define um item da lista. |
5. Tags de Mídia
Essas tags incorporam imagens, vídeos e áudio nas páginas.
| Tag | Descrição |
|---|---|
<img> | Exibe uma imagem. Exemplo: <img src="imagem.jpg" alt="Descrição da imagem"> |
<audio> | Adiciona um áudio. Exemplo: <audio controls><source src="som.mp3" type="audio/mpeg"></audio> |
<video> | Insere um vídeo. Exemplo: <video controls><source src="video.mp4" type="video/mp4"></video> |
6. Tags de Formulário
Essas tags criam formulários para receber informações do usuário.
| Tag | Descrição |
|---|---|
<form> | Define um formulário. |
<input> | Campo de entrada. Exemplo: <input type="text" placeholder="Digite seu nome"> |
<label> | Define um rótulo para inputs. |
<textarea> | Campo de texto maior. |
<select> | Caixa de seleção (dropdown). |
<option> | Opções dentro do <select>. |
<button> | Botão dentro do formulário. |
7. Tags de Tabela
Utilizadas para criar tabelas em páginas HTML.
| Tag | Descrição |
|---|---|
<table> | Define uma tabela. |
<tr> | Linha da tabela. |
<th> | Cabeçalho da tabela. |
<td> | Célula da tabela. |
8. Tags Semânticas (HTML5)
Melhoram a acessibilidade e a estrutura da página.
| Tag | Descrição |
|---|---|
<header> | Cabeçalho da página. |
<main> | Conteúdo principal da página. |
<section> | Define uma seção. |
<article> | Define um artigo independente. |
<aside> | Conteúdo lateral, como uma barra de informações. |
<footer> | Rodapé da página. |