HTML Unordered List

An HTML unordered list is used to group related items where the order is not important, typically displayed with bullet points.

• Uses
  and
  • tags to structure list items
  • Displays items with default bullets (can be styled using CSS)
  • Supports nesting to represent hierarchical data
  HTML

  
  
  <html>
  <head>
      <title>title>
  head>
  <body>
      <h2>HTML Unordered Listsh2>
  
  
      <ul>
          <li>HTMLli>
          <li>CSSli>
          <li>Javascriptli>
          <li>Reactli>
      ul>
  
  
  body>
  html>
  
  

  Syntax

      
  Item 1
      
  Item 2

  • : This tag defines the unordered list. It tells the browser that the following items are part of a list where the order does not matter.
    • : This tag defines each list item. Each
    • represents an individual item in the list.

    Unordered Lists Style Types

    In HTML, unordered lists (

    ) are used to display items without any specific order, and by default, they show bullet points. However, the appearance of these bullets can be changed using CSS with different styles.

    1. Square Bullet Style

    To change the bullets in an unordered list to squares, the list-style-type property in CSS can be set to square.

    HTML

    
    
    <html>
    <head>
        <title>title>
    head>
    <body>
        <h2>Square type unordered listh2>
    
    
        <ul style="list-style-type: square">
            <li>HTMLli>
            <li>CSSli>
            <li>Javascriptli>
            <li>Reactli>
        ul>
    
    
    body>
    html>
    
    
    

    2. Circle Bullet Style

    To change the bullets in an unordered list to circles, the list-style-type property in CSS can be set to circle.

    HTML

    
    
    <html>
    <head>
        <title>title>
    head>
    <body>
        <h2> Circle type unordered listh2>
    
    
        <ul style="list-style-type:circle;">
            <li>HTMLli>
            <li>CSSli>
            <li>Javascriptli>
            <li>Reactli>
        ul>
    
    
    body>
    html>
    
    
    

    3. Removing Bullets

    To remove the default bullets in an unordered list, the list-style-type property in CSS can be set to none.

    HTML

    
    
    <html>
    <head>
        <title>title>
    head>
    <body>
        <h2>None type unordered listh2>
    
    
        <ul style="list-style-type:none;">
            <li>HTMLli>
            <li>CSSli>
            <li>Javascriptli>
            <li>Reactli>
        ul>
    
    
    body>
    html>
    
    
    

    4. Nested Unordered List

    A nested unordered list is simply an unordered list (

    ) inside another list item (
    • ) of an existing unordered list. This is useful for representing hierarchical or grouped information, like categories and subcategories.
      HTML

      
      
      <html>
      <head>
          <title>title>
      head>
      <body>
          <h2>Nested unordered listh2>
      
      
          <ul>
              <li>Geeksli>
              <li>
                  Web Development
                  <ul>
                      <li>HTMLli>
                      <li>CSSli>
                  ul>
              li>
              <li>Javascriptli>
          ul>
          <ul type="square">
              <li>HTMLli>
              <li>CSSli>
              <li>Javascriptli>
          ul>
      
      
      body>
      html>
      
      
      

      5. Horizontal Unordered List

      The unordered list may need to be displayed horizontally, such as in a navigation menu. This can be accomplished with the help of CSS.

      HTML

      
      <html>
      <head>
          <title>title>
          <style>
              body {
                  text-align: center;
              }
              ul {
                  overflow: hidden;
                  background-color: #1d6b0d;
                  list-style-type: none;
              }
              li {
                  float: left;
              }
              li a {
                  text-decoration: none;
                  color: white;
                  padding: 0.5rem;
              }
          style>
      head>
      <body>
          <h3>HTML Horizontal Unordered Listh3>
          <ul>
              <li><a href="#course">Coursea>li>
              <li><a href="#Blog">Blogsa>li>
              <li>
                  <a href="#Content">Contenta>
              li>
          ul>
      body>
      html>
      

      Using Unordered Lists for Navigation

      Unordered lists are often used for creating navigation menus on websites. They are great for displaying a list of links where the order of the items doesn’t matter.

      HTML

      
      <html>
      <head>
          <title>title>
          <style>
              ul {
                  list-style-type: none; 
                  padding: 0;
              }
              li {
                  display: inline; 
                  margin-right: 20px;
              }
          style>
      head>
      <body>
          <h1>Website Navigationh1>
          <ul>
              <li><a href="#home">Homea>li>
              <li><a href="#about">Abouta>li>
              <li><a href="#services">Servicesa>li>
              <li><a href="#contact">Contacta>li>
          ul>
      body>
      html>
      

      Output: