Como implementar diferentes tipos de lista em HTML?

Listas são uma das formas importantes de representar dados e informações, onde cada registro é exibido em uma única linha. Existem várias maneiras de representar dados em uma lista, de maneira ordenada ou não ordenada. Eu estarei cobrindo os seguintes tópicos nesta Lista em artigo:

• Tipos de listas em HTML
• Lista HTML não ordenada
• Lista ordenada de HTML
• Listas de descrição de HTML
• Lista aninhada em HTML

Tipos de lista em HTML

Antes de começarmos a criar uma lista, vejamos primeiro as tags HTML:

• Usado para definir uma lista não ordenada
  • Usado para definir uma lista ordenada
    2. Usado para definir um item de lista

    3. Usado para definir uma lista de descrição

    4. Usado para definir um termo em uma lista de descrição
    5. Usado para descrever o termo em uma lista de descrição

  Vamos entender como você pode criar diferentes tipos de lista em HTML.

  Lista não ordenada

  Para definir uma lista não ordenada em HTML, usamos

  tag e então definimos a lista de itens em
  • tag. Por padrão, a lista de itens é marcada com marcadores (ou seja, pequenos círculos pretos).
    
    
    

     
    Esportes
     
     
    Grilo
     
    Futebol
     
    Beisebol
     
     

    Resultado:

    

    Lista HTML não ordenada: Diferentes marcadores de item

    
    
    

    Você pode escolher em uma lista de marcadores usando a propriedade do tipo de lista CSS. Vejamos diferentes propriedades de tipo de lista CSS que você pode usar para definir estilos diferentes de marcadores:

    fantoche vs chef vs docker

    • disco : Define o marcador do item da lista como marcador
    • círculo : Define o marcador do item da lista para um círculo
    • quadrado : Define o marcador do item da lista em um quadrado
    • Nenhum : Os itens da lista não serão marcados

    Disco:

     
    Esportes
     
     
    Grilo
     
    Futebol
     
    Beisebol
     
     

    Resultado:

    Círculo:

     
    Esportes
     
     
    Grilo
     
    Futebol
     
    Beisebol
     
     

    Resultado:

    Quadrado:

     
    Esportes
     
     
    Grilo
     
    Futebol
     
    Beisebol
     
     

    Resultado:

    Nenhum:

     
    Esportes
     
     
    Grilo
     
    Futebol
     
    Beisebol
     
     

    Resultado:

    Agora, depois de entender como criar uma lista não ordenada em HTML, vamos entender como criar uma lista ordenada em HTML.

    Lista Ordenada

    Para definir uma lista ordenada em HTML, usamos

    tag e então definimos a lista de itens em
    1. tag.
       Por padrão, a lista de itens é marcada com números.

        
       Esportes
        
        
       Grilo
        
       Futebol
        
       Beisebol
        
        

       Resultado:

       Agora, vamos dar uma olhada em algumas das variantes de listas ordenadas.

       Lista ordenada de HTML - atributo de tipo

       Existem diferentes tipos de marcadores de item para uma lista ordenada:

       • tipo = ”1 ″ Os itens da lista serão numerados com números (padrão)

       • tipo = ”A” Os itens da lista serão numerados com letras maiúsculas

       • tipo = ”a” Os itens da lista serão numerados com letras minúsculas

       • tipo = ”I” Os itens da lista serão numerados com números romanos maiúsculos

       • tipo = ”i” Os itens da lista serão numerados com números romanos minúsculos

       Números:

        
       Esportes
        
        
       Grilo
        
       Futebol
        
       Beisebol
        
        

       Resultado:

       Letras maiúsculas:

        
       Esportes
        
        
       Grilo
        
       Futebol
        
       Beisebol
        
        

       Resultado:

       Letras minúsculas:

        
       Esportes
        
        
       Grilo
        
       Futebol
        
       Beisebol
        
        

       Resultado:

       Nu romano maiúsculo mber s:

        
       Esportes
        
        
       Grilo
        
       Futebol
        
       Beisebol
        
        

       Resultado:

       

       Números romanos minúsculos:

       o que é alerta em javascript

        
       Esportes
        
        
       Grilo
        
       Futebol
        
       Beisebol
        
        

       Resultado:

       

       Listas de descrição de HTML

       Você também pode criar listas de descrição em HTML. Uma lista de descrição é usada para criar uma lista de termos e adicionar uma descrição a eles. Você cria uma lista de descrição usando

       tag.

       tag define o termo &

       tag adiciona descrição a eles.

        
       Esportes
        
        
       Grilo
        
       O críquete é um jogo de bastão e bola disputado entre duas equipes de onze jogadores em um campo no centro do qual há um campo de 20 metros com um postigo em cada extremidade, cada um compreendendo dois braços equilibrados em três tocos.
        
       Tênis de mesa
        
       O tênis de mesa, também conhecido como pingue-pongue, é um esporte em que dois ou quatro jogadores batem uma bola leve para a frente e para trás em uma mesa usando pequenas raquetes. O jogo ocorre em uma mesa dura dividida por uma rede.
        
        

       Resultado:

       Lista aninhada em HTML

       Você também pode criar uma lista aninhada em HTML.

        
       Esportes
        
        
       Tênis de mesa
        
       Grilo
        
       Virat kohli
        
       Joe Root
        
        

       Basquetebol
        

  Resultado:

  Agora, depois de executar os trechos acima, você terá entendido como criar listas em HTML. Espero que este blog seja informativo e tenha valor agregado para você.

  Confira nosso que vem com treinamento ao vivo conduzido por instrutor e experiência em projetos da vida real. Este treinamento o torna proficiente em habilidades para trabalhar com tecnologias da web de back-end e front-end. Inclui treinamento em Desenvolvimento Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.

  Tem alguma questão para nós? Mencione isso na seção de comentários do blog “Listar em HTML” e entraremos em contato com você.