Guia Completo sobre as Principais Tags HTML
- #HTML
O HTML (HyperText Markup Language) é a base da estrutura de qualquer página web. Ele define a semântica e a organização do conteúdo através de tags que identificam partes do documento. Abaixo, apresentamos uma análise detalhada das principais tags HTML e suas funcionalidades.
Tags Básicas de Estrutura
- <head> Contém informações meta sobre o documento, como título, estilos, scripts e dados essenciais.
<head>
<title>Minha Página</title>
<meta charset="UTF-8">
</head>
- <title> Define o título exibido na aba do navegador.
<title>Meu Site</title>
- <body> Representa o corpo do documento, onde todo o conteúdo visível é inserido.
<body>
<h1>Bem-vindo!</h1>
<p>Este é o conteúdo principal.</p>
</body>
Tags Semânticas de Estrutura
- <header> Representa a seção de cabeçalho de um documento ou seção.
<header>
<h1>Minha Página</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#sobre">Sobre</a></li>
</ul>
</nav>
</header>
- <main> Indica o conteúdo principal da página, usado para melhorar a acessibilidade.
<main>
<article>
<h2>Artigo Principal</h2>
<p>Conteúdo relevante da página.</p>
</article>
</main>
- <footer> Representa o rodapé do documento ou seção.
<footer>
<p>© 2024 Minha Empresa</p>
</footer>
- <section> Delimita uma seção temática do documento.
<section id="sobre">
<h2>Sobre Nós</h2>
<p>Informações sobre a empresa.</p>
</section>
- <div> Usada como contêiner genérico para agrupar elementos.
<div class="card">
<h3>Título</h3>
<p>Texto do card.</p>
</div>
- <nav> Representa um conjunto de links de navegação.
<ul>
<li><a href="#inicio">Início</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
- <aside> Indica um conteúdo relacionado, como barras laterais.
<aside>
<h3>Links Úteis</h3>
<ul>
<li><a href="#artigo1">Artigo 1</a></li>
</ul>
</aside>
- <article> Representa um conteúdo independente, como artigos ou postagens.
<article>
<h2>Notícia</h2>
<p>Detalhes da notícia.</p>
</article>
Tags de Texto
- <h1>, <h2>, <h3> Definem títulos, do mais importante (<h1>) ao menos relevante (<h6>).
<h1>Bem-vindo!</h1>
<h2>Seção Principal</h2>
- <p> Representa um parágrafo de texto no documento.
<p>Este é um parágrafo simples de texto no HTML.</p>
- <blockquote> Indica uma citação em bloco.
<blockquote>
"O sucesso é a soma de pequenos esforços repetidos dia após dia."
</blockquote>
- <time> Representa uma data ou hora.
<time datetime="2024-11-28">28 de novembro de 2024</time>
- <q> Indica uma citação curta inline.
<p>O professor disse <q>faça o seu melhor</q>.</p>
- <strong> e <b> <strong> dá ênfase semântica forte, enquanto <b> aplica negrito visual.
<strong>Aviso:</strong> Este conteúdo é importante.
<b>Texto em negrito.</b>
- <mark> Destaca o texto como se estivesse marcado.
<p>Esta palavra está <mark>destacada</mark>.</p>
- <i> Representa um texto com estilo diferenciado (geralmente itálico).
<p>Texto em <i>itálico</i>.</p>
- <sub> e <sup> Representam texto em subscrito e sobrescrito.
H<sub>2</sub>O e E=mc<sup>2</sup>
- <br> Insere uma quebra de linha.
Texto antes da<br>quebra de linha.
- <hr> Insere uma linha horizontal para separar conteúdo.
<hr>
Tags de Formulário
- <form> Define um formulário para coleta de dados.
<form action="/submit" method="post">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<button type="submit">Enviar</button>
</form>
- <input> Entrada de dados do usuário, com diversos tipos:
<label>Texto:</label> <input type="text" />
<label>Number:</label> <input type="number" min="0" step="2" max="99" />
<label>Range:</label> <input type="range" min="0" max="100" value="100"/>
<label>Color:</label> <input type="color" />
<label>Email:</label> <input type="email" />
<label>URL:</label> <input type="url" />
<label>File:</label> <input type="file" multiple />
<label>Image:</label> <input type="image" />
<label>Password:</label> <input type="password" />
<label>Search</label> <input type="search">
<label>Date</label> <input type="date" />
<label>Week:</label> <input type="week" /> --No Firefox não funciona--
<label>Month:</label> <input type="month" /> --No Firefox não funciona--
<label>Checkbox:</label> <input type="checkbox" />
<label>Radio:</label> <input type="radio" name="aceita" />
<label>Hidden:</label> <input type="hidden" />
<button> Botão para ações específicas.<button type="button">Clicável</button>
<button type="menu">Menu</button>
<button type="reset">Limpar</button>
<button type="submit">Enviar</button>
- <select> Cria uma lista suspensa.
<select name="role">
<option selected value="">Selecione Cargo</option>
<option value="administrativo">Administrativo</option>
<option value="gerente">Gerente</option>
<option value="diretor">Diretor</option>
<option value="presidente">Presidente</option>
</select>
- <checkbox> e <radio> Representam opções de múltipla escolha ou escolha única.
<input type="checkbox" name="opcionais[]" value="queijo"> + Queijo <br>
<input type="checkbox" name="opcionais[]" value="calabresa"> + Calabresa
<input type="checkbox" name="opcionais[]" value="cebola"> + Cebola
<input type="checkbox" name="opcionais[]" value="azeitona"> + Azeitona
<p>Borda Recheada?</p>
<input type="radio" name="borda" value="sim"> Sim
<input type="radio" name="borda" value="nao"> Não
<p>Bebida</p>
<input type="radio" name="bebida" value="suco"> Suco
<input type="radio" name="bebida" value="refrigerante"> Refrigerante
<input type="radio" name="bebida" value="agua"> Água
<input type="radio" name="bebida" value="nenhum"> Nenhum
- <fieldset> e <legend> Agrupam campos relacionados em um formulário.
<fieldset>
<legend>Informações Pessoais</legend>
<label>Nome: <input type="text"></label>
</fieldset>
- <span> Define um contêiner inline, útil para estilização.
<p>Texto com <span style="color: red;">destaque</span>.</p>
