How to create Unorder List in HTML

share link

by vigneshchennai74 dot icon Updated: Mar 14, 2023

technology logo
technology logo

Guide Kit Guide Kit  

An unordered list is helpful for presenting a set of related items in a clear and easy-to-read format. It is often used for things like menus, navigation bars, and lists of options. By using an unordered list, you can make the content on your website or web page more organized and visually appealing.

To create an unordered list in HTML, follow these steps:

  1. Open a new HTML document in a code editor or text editor.
  2. In the body section of the document, add the <ul> tag to start the unordered list.
  3. Inside the <ul> tag, add one or more <li> tags to create the list items.
  4. Add the content for each list item between the opening and closing <li> tags.

Preview of the output that you will get on running this code from your IDE


In this solution we have used the <ul> tag is used to create an unordered list in HTML


  1. Download and install VS Code on your desktop.
  2. Open VS Code and create a new file in the editor.
  3. Copy the code snippet that you want to run, using the "Copy" button or by selecting the text and using the copy command (Ctrl+C on Windows/Linux or Cmd+C on Mac).
  4. Paste the code into your file in VS Code, and save the file with a meaningful name and the appropriate file extension (.html for HTML, .js for JavaScript, etc.).
  5. To run the code, open the file in VS Code and click the "Run" button in the top menu, or use the keyboard shortcut Ctrl+Alt+N (on Windows and Linux) or Cmd+Alt+N (on Mac). The output of your code will appear in the VS Code output console.

I hope you found this useful. I have added the version information in the following sections.

I found this code snippet by searching for " HTML & CSS Unordered list doesn't stay in its containing DIV" in kandi. You can try any such use case!

Environment Tested

Tested this solution in the following versions. Be mindful of changes when working with other versions.

  • Visual Studio Code Version 1.76.0

An unordered list is helpful for presenting a set of related items in a clear and easy-to-read format This process also facilities an easy to use, hassle free method to create a hands-on working version of code which would help us an create a Un-order list in Html


If you need to use the CSS in your project, you can simply copy and paste the code into a separate file and link to it in your HTML file using the <link> tag.


  1. For any support on kandi solution kits, please use the chat
  2. For further learning resources, visit the Open Weaver Community learning page