Dúvida aula

Oii, Ruan! Tudo bem?

No contexto da aula, o uso de ul e li é mais apropriado por se tratar de uma lista de itens. A tag ul representa uma lista não ordenada de itens (unordered list, por isso UL), e a tag li representa cada item dessa lista. No caso, a lista é de dispositivos nos quais o Alura Plus pode ser acessado.

Mesmo que seja tecnicamente possível usar divs para alcançar um resultado visual parecido, a gente teria uma perda na semântica do HTML. A semântica é muito importante no desenvolvimento web, pois ajuda os mecanismos de busca a entenderem o conteúdo da página e também melhora a acessibilidade para tecnologias assistivas, como leitores de tela.

Observe os exemplos abaixos:

Usando ul e li:

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

Usando divs:

<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Visualmente, elas podem parecer iguais, mas a versão com ul e li fornece mais contexto sobre o conteúdo para os mecanismos de busca e tecnologias assistivas. Por isso, é recomendado usar ul e li quando estiver lidando com uma lista de itens.

Espero muito que essa resposta tenha esclarecido a dúvida e se tiver qualquer outra, fico à disposição :)

Boa tarde Rafaela, estou bem e vc?

Muito obrigado, então por exemplo, caso eu queira criar uma lanchonete ou um restaurante virtual, aí coloco lá os lanches, ou comidas, depende do que eu queira fazer, com os sabores, e preços, nesse caso, é uma lista também por se tratar de cardápio, certo? Aí usaria as tags li e ul nesse caso, seria isso mesmo?

Obrigado!

Boa tarde, Ruan! Eu estou bem também, obrigada por perguntar!

É isso mesmo. Se você estiver construindo seu restaurante virtual e observar que os alimentos que você está adicionando seguem uma lógica de lista não ordenada, é interessante utilizar <ul> e <li>. Se você quiser que a lista siga uma ordenação, seja numérica(1,2,3...) ou alfabética(a, b, c...), aí é bacana usar a <ol>. Se quiser entender melhor o funcionamento das tags recomendo:

• Documentação da tag ul;
• Documentação da tag ol;

Também recomendo esse vídeo do Dev Soutinho, que vai abordar algumas curiosidades legais que podem te ajudar nesse momento de entender como trabalhar as tags HTML da melhor forma possível.

Espero que essas dicas tenham sido úteis para você. Se tiver mais dúvidas, estou por aqui :)

Um abraço e bons estudos!