Listas: a stack, o menu e a ficha do projeto

Duas listas, e a diferença é o sentido

<!-- Ordem importa: é uma trajetória -->
<ol>
  <li>2026 - Curso de HTML e CSS, Maiyu Academy</li>
  <li>2025 - Técnico em Informática, CETAM</li>
  <li>2024 - Monitora do laboratório da escola</li>
</ol>

<!-- Ordem não importa: são as ferramentas que eu uso -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>Git</li>
  <li>Figma</li>
</ul>

<ol> é ordered list: trocar a ordem muda o resultado. <ul> é unordered list: a ordem é indiferente.

Você não escreve os números

<ol>
  <li>2026 - Maiyu Academy</li>
  <li>2025 - CETAM</li>
</ol>

sai como:

1. 2026 - Maiyu Academy
2. 2025 - CETAM

O navegador numera. E quando você insere um item no meio, ele renumera tudo sozinho: que é a razão de existir a <ol> em vez de <ul> com números digitados à mão.

Só <li> dentro da lista

Filho direto de <ul> ou <ol> é sempre <li>. Mas dentro de cada <li> cabe o que você quiser - e é assim que se escreve a seção "Como trabalho" do portfólio, aquela dos seis cartõezinhos:

<ul>
  <li>
    <h3>Estrutura</h3>
    <p>HTML semântico, para a página fazer sentido antes de ficar bonita.</p>
  </li>
  <li>
    <h3>Aparência</h3>
    <p>CSS escrito à mão, com atenção a contraste e a tela pequena.</p>
  </li>
  <li>
    <h3>Acessibilidade</h3>
    <p>Teclado, leitor de tela e alvo de toque, testados antes de publicar.</p>
  </li>
</ul>

Seis itens desses viram, no curso de CSS, uma grade de seis cartões. Aqui eles são o que sempre foram: uma lista de coisas que você faz.

Listas dentro de listas

A sublista vai dentro do <li> a que pertence. É a forma da seção "Ferramentas" da sua página sobre.html:

<ul>
  <li>
    Linguagens
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>
    Ferramentas
    <ul>
      <li>Git</li>
      <li>VS Code</li>
      <li>Figma</li>
    </ul>
  </li>
</ul>

Repare que o </li> de "Linguagens" só fecha depois da sublista. Se ele fechar antes, a sublista vira uma lista separada, sem relação com o item.

A lista de descrição

Para emparelhar um termo com o valor dele. É a ficha técnica de um projeto:

<dl>
  <dt>Ano</dt>
  <dd>2026</dd>

  <dt>Papel</dt>
  <dd>Estrutura, estilo e publicação</dd>

  <dt>Situação</dt>
  <dd>No ar</dd>

  <dt>Feito com</dt>
  <dd>HTML</dd>
  <dd>CSS</dd>
</dl>

<dt> é o termo, <dd> a descrição. Repare no último par: "Feito com" tem dois <dd>, porque um termo pode ter várias descrições - e várias descrições podem compartilhar um termo, repetindo a tag correspondente.

Serve para ficha de projeto, glossário e perguntas frequentes.

O menu do portfólio é uma lista

Isto pode não ser óbvio, mas é o padrão da web:

<nav>
  <ul>
    <li><a href="index.html">Início</a></li>
    <li><a href="sobre.html">Sobre</a></li>
    <li><a href="portfolio.html">Portfólio</a></li>
    <li><a href="stack.html">Stack</a></li>
    <li><a href="carreira.html">Carreira</a></li>
    <li><a href="contato.html">Contato</a></li>
  </ul>
</nav>

Um menu é uma lista de destinos. Escrito assim, um leitor de tela anuncia "lista com 6 itens" e a pessoa sabe o tamanho do menu antes de percorrê-lo. Escrito como links soltos separados por |, ela descobre no meio do caminho.

Os arquivos ainda não existem: os links levam a lugar nenhum até a aula 6. Está certo assim - o menu é o mesmo em todas as páginas, e escrevê-lo agora é o que permite copiá-lo pronto para cada arquivo novo.

No portfólio

Hoje nasce a segunda página, sobre.html, com o mesmo esqueleto do index.html e o <title> "Sobre · Seu Nome". Nela:

• um <h1> com o assunto da página - não o seu nome de novo: algo como "Tecnologia com lugar e sotaque";
• três parágrafos de biografia: de onde você vem, o que você fez até aqui, e o que você acredita sobre o trabalho;
• um <h2> "Ferramentas" com a <ul> aninhada das suas categorias.

E no index.html:

• a <ul> de "Como trabalho", com três a seis <li>, cada um com <h3> e <p>;
• o <nav> com a <ul> das seis páginas, no topo do <body>;
• uma <dl> de ficha técnica embaixo de cada projeto que você listou no exercício 5 da aula 1 - por enquanto sem imagem e sem link.

Exercícios

1. Escreva a <ul> de "Como trabalho" com pelo menos três itens, cada um com <h3> e <p>.
2. Escreva sua trajetória numa <ol>, do mais recente ao mais antigo.
3. Monte a <ul> aninhada de ferramentas, com duas ou três categorias. Corte tudo que você não usou nos últimos seis meses.
4. Escreva a <dl> de ficha técnica de um projeto seu, com Ano, Papel, Situação e "Feito com".
5. Monte o <nav> do portfólio com as seis páginas. Os links ainda não precisam levar a lugar nenhum.
6. Peça a alguém para olhar sua lista de ferramentas por cinco segundos e depois dizer o que você faz. Se a lista for longa demais para isso, ela é longa demais.

Referências

• Listas em HTML - MDN - as três listas e os casos de cada uma
• <dl> - MDN - a lista de descrição em detalhe
• HTML Lists - W3Schools - exemplos com editor ao lado