Listas são usadas o tempo todo na web: menus, passos, tópicos, recursos, requisitos… Saber usar listas corretamente deixa seu HTML mais organizado, semântico e legível.

No HTML, existem três tipos principais de listas.

Listas não ordenadas — <ul> - Unordered List

Usamos listas não ordenadas quando a ordem dos itens não importa.

Exemplos comuns:

  • Características de um produto
  • Itens de um menu
  • Lista de recursos

Exemplo em HTML: 


  <ul> 
    <li>HTML</li> 
    <li>CSS</li> 
    <li>JavaScript</li> 
  </ul>

O código acima resultará na seguinte página sendo criada:

Exemplo de página HTML
Use <ul> sempre que a sequência dos itens não for relevante.

Listas ordenadas — <ol> - Ordered List

Listas ordenadas são usadas quando a ordem dos itens é importante.

Exemplos:

  • Passo a passo
  • Instruções
  • Rankings

Exemplo em HTML: 


  <ol> 
    <li>Abrir o navegador</li> 
    <li>Digitar a URL</li> 
    <li>Pressionar Enter</li> 
  </ol>

O código acima resultará na seguinte página sendo criada:

Exemplo de página HTML
Se mudar a ordem muda o significado, use <ol>.

Itens da lista — <li>

Todos os itens de uma lista, ordenada ou não, usam a mesma tag: 

 <li>Item da lista</li>
A tag <li> só pode existir dentro de <ul> ou <ol>.

Listas aninhadas (listas dentro de listas)

É possível colocar uma lista dentro de outra. Isso é muito usado em menus e estruturas mais complexas. 


   <ul> 
    <li>Front-end 
      <ul> 
        <li>HTML</li> 
        <li>CSS</li> 
        <li>JavaScript</li> 
      </ul> 
    </li> 
    <li>Back-end</li> 
    </ul>

O código acima resultará na seguinte página sendo criada:

Exemplo de página HTML

Note que a lista interna fica dentro do <li>, nunca fora.

Quando usar cada tipo de lista?

  • <ul> → quando a ordem não importa
  • <ol> → quando a ordem importa
  • Listas aninhadas → quando há subníveis
Nunca use listas apenas para “formatar texto”. Elas representam estruturas reais de informação.

💾🧠 Resumo da aula para nunca mais esquecer

  • <ul> cria listas sem ordem definida
  • <ol> cria listas com ordem definida
  • <li> representa cada item da lista
  • Listas podem ser aninhadas para criar hierarquias

Na próxima aula, vamos aprender sobre links e navegação — a base da web como conhecemos.

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Street Fighter 2

Street Fighter 2, lançado para o Super Nintendo no início dos anos 90, foi o principal responsável pelo aumento nas vendas deste console. Graças ao sucesso do título nos Arcades e à perfeita adaptação ao console, muitos consumidores adquiriram o SNES para jogarem o título em casa. Saiba mais.

Tetris

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.

Mouse

O mouse foi criado em 9 de dezembro de 1968, por um americano chamado Douglas Engelbart, que o batizou de "XY Position Indicator for a Display System". Conheça a história do mouse clicando aqui.

PDP-1

O primeiro computador a conseguir rodar o jogo Spacewar era o PDP-1, que custava 120 mil dólares e pertencia ao Massachusetts Institute of Technology. O jogo demorou 200 horas para ser desenvolvido, em 1962, e seu criador foi um cientista da computação chamado Steve Russel.

Música tema do Blanka

Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.