Which of the following tags must be at the start and end of an unordered list

,
, , etc] within each list item to assist with layout.

It is also possible to "nest" lists within each other as is shown below. Each nest will indent the the list to the right to show that it is a sub-list to the previous list item. To nest lists, you need to create another complete list structure within a list item as shown below. Notice how the new list structure [the

and
1. tags] begins within the
2. tag for "list item two."

   For example, a simple ordered list would look like this:

   
      
   1. list item one
   
      
   2. list item two
   
      
   3. list item three
   
   

   A nested list would look like this:

   
      
   1. list item one
   
      
   2. list item two
           
      
            
      1. sub list one
      
            
      2. sub list two
      
           
      
         
   
      
   3. list item three
   
   

   The nested list above looks like this:

   1. list item one
   2. list item two
      1. sub list one
      2. sub list two
   3. list item three

   All of the tags below require an end tag unless otherwise specified.

   This tag is a container for an ordered list of items. An ordered list means that the list will be displayed with a sequence of numbers or letters [1, 2, 3, or a, b, c, etc]. Each list item within the

   1. 1 tag must be contained within a
   2. 2 tag.
      • Attributes for the
        tag:
        • start - This assigns the starting number for the sequence to allow you to begin the list at any value you need.
        • type - This changes how the sequence number is displayed on your page. The default is "arabic" or numerical. But you can also have the list display in alphabet or roman sequences.
          • type = "1" will display as "1,2,3,..."
          • type = "A" will display as "A,B,C,..."
          • type = "a" will display as "a,b,c,..."
          • type = "I" will display as "I,II,III,..."
          • type = "i" will display as "i,ii,iii,..."
        1. Example:
        2. 4This will display the ordered list on your page beginning with XII and continuing with XIII, XIV, etc. If the type attribute for the tag was "a" instead of "I", the list would begin at the letter "l" and continue with m, n, o, etc.

   3. 5

      This is an unordered list tag. Unordered means that the items within the list will not be displayed with a sequence of numbers or letters. Instead the list will be shown with "bullet" symbols. As you nest unordered lists, the bullet symbols will automatically change to better highlight the sub-lists. You can see an example of this in the list items on this web page. Each list item within the

   4. 6 tag must be contained within a
   5. 2 tag.

      We create them to structure and organize our days, and we use them to make to-do lists. We use them in recipes so we don't miss any of the steps. And we use them when we want to assemble a piece of furniture.

      These are just a few examples of how we use lists to help us keep things organized.

      So it makes sense that they are also such a frequently used and helpful feature in front-end web development.

      There are three types of lists in HTML: unordered, ordered, and description lists.

      In this article, you'll learn how to create unordered lists. You'll also see some ways in which you can change the default styling using just a few lines of CSS.

      Let's get started!

      How to create an unordered list in HTML

      Unordered lists in HTML are collections of items that don't need to be in any specific order. We often use simple bullet points to list out these items.

      You create an unordered list using the

      
          I am a link to something on the web!
      
      

      5 tag. Then, you use the

      
          I am a link to something on the web!
      
      

      6 tag to list each and every one of the items you want your list to include.

      The

      
          I am a link to something on the web!
      
      

      5 tag, which stands for unordered list, is the parent of the

      
          I am a link to something on the web!
      
      

      6
      tag. This means that the

      
          I am a link to something on the web!
      
      

      6 tag is the child of the

      
          I am a link to something on the web!
      
      

      5 tag.

      
          
      Item
          
      Another Item
          
      Yet Another Item
      
      

      Output:

      I am a link to something on the web! 6 is the only direct child of

      
          I am a link to something on the web!
      
      

      5.

      This means that after creating the opening [

      
          
      
              I link to somewhere on the web!
          
      
      

      3] and closing [

      
          
      
              I link to somewhere on the web!
          
      
      

      4] tags for the unordered list, the first tag you include will be the

      
          I am a link to something on the web!
      
      

      6 tag.

      For example, don't do this:

      
          I am a link to something on the web!
      
      

      If you want your unordered list's items to be links, do this instead:

      
          
      
              I link to somewhere on the web!
          
      
      

      The link tag [

      
          
      
              I link to somewhere on the web!
          
      
      

      6] is the child of the

      
          I am a link to something on the web!
      
      

      6 tag and the grandchild [!] of the

      
          I am a link to something on the web!
      
      

      5 tag.

      How to create a nested unordered list

      A nested list is a list inside another list.

      You can create a nested unordered list, or a nested ordered list, or even an ordered list nested inside an unordered one.

      Remember that the only direct child of the

      
          I am a link to something on the web!
      
      

      5 tag is

      
          I am a link to something on the web!
      
      

      6.

      Here's how you create a nested unordered list:

      
        
      HTML
         
      CSS
          
      JavaScript
                  
      
                      
      Angular
                      
      React
                      
      Vue
                  
           
       
      

      Output:

      I am a link to something on the web! 6 that has the name 'JavaScript'.

      Make sure to include both the closing tag and opening tags, as it can get confusing quickly.

      A good practice to avoid any confusion is to comment your code. And keep in mind that you should use nested lists only when it semantically makes sense.

      How to change the default styling of unordered lists

      As you've seen so far, the default styling of unordered lists are bullet points next to each list item.

      But you can change the styling using the

      
        
      HTML
         
      CSS
          
      JavaScript
                  
      
                      
      Angular
                      
      React
                      
      Vue
                  
           
       
      

      2 property in a separate

      
        
      HTML
         
      CSS
          
      JavaScript
                  
      
                      
      Angular
                      
      React
                      
      Vue
                  
           
       
      

      3 file.

      The default value of the property is

      
        
      HTML
         
      CSS
          
      JavaScript
                  
      
                      
      Angular
                      
      React
                      
      Vue
                  
           
       
      

      4.

      How to style list items with circles

      You can create list items that have circles instead of solid bullet points as their style:

      
          
      Item
          
      Another Item
          
      Yet Another Item
      
      

      ul {
          list-style-type: circle;
      }
      

      Output:

      I am a link to something on the web! 0

      And by adding a few new CSS rules:

      
          I am a link to something on the web!
      
      

      1

      You can style the list items horizontally:

      I am a link to something on the web! 2

      The first step is to add the

      
        
      HTML
         
      CSS
          
      JavaScript
                  
      
                      
      Angular
                      
      React
                      
      Vue
                  
           
       
      

      7 rule to the parent

      
          I am a link to something on the web!
      
      

      5 tag and remove the default

      
        
      HTML
         
      CSS
          
      JavaScript
                  
      
                      
      Angular
                      
      React
                      
      Vue
                  
           
       
      

      9 and

      
          
      Item
          
      Another Item
          
      Yet Another Item
      
      

      0 from the tag.

      You add the emoji to the

      
          I am a link to something on the web!
      
      

      6 tag using the

      
        
      HTML
         
      CSS
          
      JavaScript
                  
      
                      
      Angular
                      
      React
                      
      Vue
                  
           
       
      

      6 pseudo-element. You can pick and choose from a full list of emojis in this article.

      
          I am a link to something on the web!
      
      

      3

      Output:

      I am a link to something on the web! 4

      Output:

      Conclusion

      And there you have it! You now know how to create unordered lists in HTML and have seen some ways to style them.

      To continue your HTML learning journey, watch the following videos on freeCodeCamp's YouTube channel:

      • HTML Tutorial - Website Crash Course for Beginners
      • HTML Full Course - Build a Website Tutorial

      freeCodeCamp also offers a free, project-based certification on Responsive Web Design.

      It is ideal for complete beginners and assumes no previous knowledge. You'll start from the absolute necessary basics and build your skills as you progress. In the end, you'll complete five projects.

      Thanks for reading and happy learning :]

      ADVERTISEMENT

      ADVERTISEMENT

      ADVERTISEMENT

      ADVERTISEMENT

      ADVERTISEMENT

      ADVERTISEMENT

      ADVERTISEMENT

      ADVERTISEMENT

      Dionysia Lemonaki

      Learning something new everyday and writing about it

      If this article was helpful, tweet it.

      Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

      Which of the following is the opening and closing tag on of unordered list?

      An unordered list starts with the

      tag. Each list item starts with the
      • tag.

      What tag indicates the beginning of an unordered list?

      The opening list tag must be immediately followed by the first list element.

      Which tag is used for unordered list?

      : The Unordered List element. The
      HTML element represents an unordered list of items, typically rendered as a bulleted list.

      What HTML tag must be used to insert an item in an unordered or ordered list?

      The
   6. HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list [
      ], an unordered list [
      ], or a menu [ ].