Um documento HTML típico começa com a declaração do tipo de documento, seguido pela estrutura básica que inclui <html>, <head>, e <body>.
<header>
, <nav>
, <section>
, e <footer>
:Essas tags ajudam a organizar o conteúdo da página de forma semântica, tornando o site mais acessível e melhorando a SEO.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo de Página</title>
</head>
<body>
<h1>Bem-vindo ao nosso site!</h1>
<p>Este é um exemplo de parágrafo no corpo do documento.</p>
</body>
</html>
<ul>
, <ol>
, e <li>
Listas são usadas para agrupar um conjunto de itens relacionados, seja em formato numerado (<ol>
) ou com marcadores (<ul>
).
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo de Página com listas</title>
</head>
<body>
<h3>Nossos Serviços</h3>
<ul>
<li>Design Web</li>
<li>Desenvolvimento de Aplicativos</li>
<li>Marketing Digital</li>
</ul>
<h3>Passos para Contratação</h3>
<ol>
<li>Entre em contato conosco.</li>
<li>Agende uma reunião.</li>
<li>Inicie seu projeto!</li>
</ol>
</body>
</html>
<div>
e <span>
para Agrupamento e Estilização<div>
é frequentemente usado para agrupar blocos de conteúdo ou seções para fins de estilização ou script, enquanto <span>
é usado para estilizar partes específicas do texto.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo de Página com 'div' e 'span'</title>
</head>
<body>
<div class="card">
<h4>Produto 1</h4>
<p>Descrição do produto. <span class="destaque">Em promoção!</span></p>
</div>
</body>
</html>
<form>
, <input>
, e <button>
Formulários são essenciais para interação com o usuário, permitindo a entrada de dados.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo de Página com Fomulário</title>
</head>
<body>
<form action="/submit-form" method="POST">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Enviar</button>
</form>
</body>
</html>