Quer ajudar o projeto? Você pode doar na tela Sobre mim!

Aninhamento de Elementos

Elementos HTML podem ser aninhados, ou seja, colocados dentro de outros elementos. Por exemplo:

<div>
    <h2>Seção</h2>
    <p>Texto dentro da div.</p>
</div>

Tags obrigatórias e opcionais

  • O <!DOCTYPE html>, <html>, <head>, <body> e <title> são obrigatórios em um documento HTML moderno.
  • Tags como <meta>, <link>, <section>, <footer>, <header> são opcionais, mas recomendadas para estrutura e SEO.

Comentários em HTML

Comentários ajudam a explicar o código e não aparecem na página:

<!-- Este é um comentário -->

Estrutura de Cabeçalho e Rodapé

<header>
    <h1>Logo do Site</h1>
    <nav>
        <a href="#">Início</a>
        <a href="#">Contato</a>
    </nav>
</header>

<footer>
    <p>&copy; 2025 Meu Site</p>
</footer>

Exemplos de atributos comuns

  • id, class, style, href, src, alt, title, target, rel
<img src="logo.png" alt="Logo do site" width="100" height="100" />
<a href="https://exemplo.com" target="_blank" rel="noopener">Site Externo</a>

Boas práticas

  • Indente o código para facilitar leitura.
  • Use nomes de classes e ids descritivos.
  • Prefira elementos semânticos.
  • Sempre utilize o atributo alt em imagens.

Exemplo de formulário simples

<form>
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" required />
    <button type="submit">Enviar</button>
</form>

title: "Formato do HTML" description: "O HTML é estruturado por meio de elementos que possuem tags de abertura e fechamento."

A estrutura básica de um documento HTML segue o seguinte formato:

Estrutura do Documento HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título da Página</title>
</head>
<body>
    <h1>Meu Título</h1>
    <p>Este é um parágrafo de exemplo.</p>
</body>
</html>

Elementos básicos

<h1>Título Principal</h1>
<p>Este é um parágrafo de texto.</p>
<a href="https://www.exemplo.com">Clique aqui</a>

Listas

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<ol>
    <li>Primeiro</li>
    <li>Segundo</li>
</ol>

Tabelas

<table>
    <tr>
        <th>Nome</th>
        <th>Idade</th>
    </tr>
    <tr>
        <td>Ana</td>
        <td>25</td>
    </tr>
</table>