HTML Completo: Guia com Todas as Tags, Dicas e Como Criar um Site Básico O que é HTML?
HTML (HyperText Markup Language) é a linguagem de marcação utilizada para estruturar páginas na web. Ele define elementos como títulos, parágrafos, imagens, links, tabelas e muito mais.
Se você está começando no desenvolvimento web, entender o HTML é o primeiro passo. Neste artigo, você vai aprender:
- O que são e para que servem as principais tags HTML
- Dicas práticas de uso
- Um exemplo de site HTML básico com menu e rodapé
- Links úteis para aprender HTML e criar projetos práticos
Estrutura Básica do HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu Primeiro Site</title>
</head>
<body>
<h1>Olá, mundo!</h1>
</body>
</html>
Explicação:
<!DOCTYPE html>: Define o tipo de documento.<html>: Contém todo o conteúdo da página.<head>: Inclui informações como título, metadados, links externos.<body>: Parte visível da página para o usuário.
Lista de Tags HTML com Explicação
Tags de Estrutura
Tag Uso <html> Envolve toda a página HTML <head> Cabeçalho com dados não visíveis <body> Corpo do site, conteúdo principal <title> Título da aba do navegador <meta> Metadados (ex: charset, SEO) <link> Importa arquivos CSS externos <script> Importa ou define JavaScript Tags de Texto
Tag Uso <h1> a <h6> Títulos e subtítulos <p> Parágrafo <strong> Texto em negrito <em> Texto em itálico <br> Quebra de linha <hr> Linha horizontal <span> Agrupamento inline de texto <div> Agrupamento em bloco Tags de Links e Mídia
Tag Uso <a href="url"> Cria um link <img src="imagem.jpg"> Insere imagem <audio> Reproduz áudio <video> Reproduz vídeo <iframe> Embute outro site/página Tags de Listas
Tag Uso <ul> Lista não ordenada <ol> Lista ordenada <li> Item da lista Tags de Formulário
Tag Uso <form> Início do formulário <input> Campo de entrada <label> Rótulo para campos <textarea> Área de texto grande <button> Botão <select> Menu suspenso <option> Opções de menu Tags de Tabela
Tag Uso <table> Cria uma tabela <tr> Linha da tabela <td> Célula comum <th> Célula de cabeçalho <thead> / <tbody> / <tfoot> Estrutura da tabela Outras Tags Úteis
Tag Uso <nav> Navegação <header> Cabeçalho da página <footer> Rodapé da página <main> Conteúdo principal <section> Seções da página <article> Conteúdo independente <aside> Barra lateral, conteúdo secundário Dicas Práticas para Usar HTML
- Sempre feche suas tags: especialmente
<div>,<p>,<ul>. - Use
<h1>apenas uma vez por página para SEO. - Combine HTML com CSS e JavaScript para criar sites profissionais.
- Utilize comentários com
<!-- comentário -->para organizar seu código. - Valide seu código com ferramentas como W3C Validator.
Recursos Recomendados
- 🔗 Aprenda mais sobre HTML, CSS e projetos práticos no site: www.verefazer.org
- 💡 Quer dicas de finanças, estudos e tecnologia? Visite: www.acreditoeu.com
Como Criar um Site HTML Básico com Menu e Rodapé
Abaixo está um exemplo completo de site HTML simples com menu e rodapé:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Site Exemplo</title>
<style>
body { font-family: Arial; margin: 0; padding: 0; }
header, footer { background: #333; color: white; padding: 15px; text-align: center; }
nav ul { list-style: none; padding: 0; display: flex; justify-content: center; background: #444; margin: 0; }
nav ul li { margin: 0 15px; }
nav ul li a { color: white; text-decoration: none; padding: 10px; display: block; }
nav ul li a:hover { background: #666; }
main { padding: 20px; }
</style>
</head>
<body>
<header>
<h1>Bem-vindo ao Meu Site</h1>
</header>
<nav>
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Projetos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
<main>
<h2>Olá!</h2>
<p>Este é um site HTML básico com menu de navegação e rodapé.</p>
</main>
<footer>
<p>© 2025 - Criado por Você</p>
</footer>
</body>
</html>
Conclusão
HTML é o alicerce de todo site. Com ele, você pode estruturar conteúdos, criar menus, rodapés e dar vida a ideias na internet. Dominar suas tags e boas práticas é essencial para quem quer criar projetos do zero ou até ganhar dinheiro com blogs e sites pessoais.
Aproveite e visite:
- 🌐 www.verefazer.org para aprender a ver e fazer na prática.
- 💰 www.acreditoeu.com para conteúdo educativo, dicas de renda online e finanças.
