📋 Hierarquia de Títulos (H1 a H6)

Demonstração Visual:

H1 - Título Principal (apenas um por página!)

H2 - Seção Principal

H3 - Subseção

H4 - Sub-subseção

H5 - Detalhamento

H6 - Menor nível

<h1>Título Principal da Página</h1> <h2>Seção: Introdução</h2> <h3>Subseção: História</h3> <h4>Detalhamento específico</h4> <h5>Observação importante</h5> <h6>Nota de rodapé</h6>

🎯 Regra de Ouro: Use apenas UM h1 por página! Ele deve representar o assunto principal. Use h2 para seções, h3 para subseções, e assim por diante.

📖 Parágrafos e Formatação de Texto

Exemplo Visual:

Este é um parágrafo normal com texto em itálico e texto destacado.

Este texto tem uma
quebra de linha no meio.

Texto ~~removido~~ e texto inserido na revisão.

<p>Este é um parágrafo normal.</p> <p>Texto com <strong>importância forte</strong> (negrito semântico).</p> <p>Texto com <em>ênfase</em> (itálico semântico).</p> <p>Texto <mark>destacado</mark> como marca-texto.</p> <p>Quebra de linha<br>no meio do parágrafo.</p> <p>Texto <del>removido</del> e <ins>inserido</ins>.</p>

💡 Dica: Use <strong> e <em> ao invés de <b> e <i>. Eles têm significado semântico e são melhores para acessibilidade!

📌 Listas - Organizando Informações

📋 Lista Não-Ordenada (UL)

Item com bullet
Outro item
Terceiro item
- Sub-item aninhado
- Outro sub-item

🔢 Lista Ordenada (OL)

Primeiro passo
Segundo passo
Terceiro passo
1. Sub-passo A
2. Sub-passo B

📖 Lista de Definições (DL)

HTML: HyperText Markup Language
CSS: Cascading Style Sheets
JS: JavaScript

🎨 Lista Customizada

Item A
Item B
Item C

Item I
Item II
Item III

🔧 Código Completo dos Exemplos

/* Lista não-ordenada básica */ <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> /* Lista ordenada básica */ <ol> <li>Primeiro</li> <li>Segundo</li> <li>Terceiro</li> </ol> /* Lista aninhada */ <ul> <li>Item principal <ul> <li>Sub-item 1</li> <li>Sub-item 2</li> </ul> </li> </ul> /* Lista de definições */ <dl> <dt>Termo</dt> <dd>Definição do termo</dd> </dl> /* Lista ordenada customizada */ <ol type="A"> ← A, B, C... <ol type="I"> ← I, II, III... <ol type="i"> ← i, ii, iii... <ol start="5"> ← Começa no número 5

🚀 Uso Prático: Use UL para itens sem ordem específica (ingredientes). Use OL para passos sequenciais (receita). Use DL para glossários e definições!

✨ Exemplo Prático Completo

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>Receita de Bolo</title> </head> <body> <h1>Receita de Bolo de Chocolate</h1> <h2>Ingredientes</h2> <ul> <li><strong>2 xícaras</strong> de farinha de trigo</li> <li><strong>1 xícara</strong> de açúcar</li> <li><strong>3 ovos</strong></li> <li><em>Chocolate em pó</em> a gosto</li> </ul> <h2>Modo de Preparo</h2> <ol> <li>Preaqueça o forno a 180°C</li> <li>Misture os ingredientes secos</li> <li>Adicione os ovos e misture bem</li> <li>Asse por <mark>40 minutos</mark></li> </ol> <p><strong>Dica:</strong> Use uma <em>forma untada</em> para<br> facilitar a desenformação.</p> </body> </html>

📝 Textos e Listas - Formatação de Conteúdo