Creating Lists in HTML

One of the challenges of designing good web pages is making sure that your text is easily readable. When you have lists of items, an HTML list can help you organize your content and make it easier for your site visitors to skim and find the information they need. There are two types of HTML lists, ordered lists and unordered lists. Ordered lists are numbered, while unordered lists use bullets to separate items, as shown below:


You’ll only need to learn three different HTML tags to start making your own lists on web pages. Let’s begin by walking through the steps for creating an unordered list.


Creating an Unordered List


Step 1: Type a

tag in your HTML file where you want the unordered list to begin.  


Step 2: Each item in your list will need to be enclosed in the

list item tag. Type the opening tag,

, then add the text that should appear for that bullet point, then end the item with the closing tag.

Step 3: Repeat Step 2 for each item in your list.

Step 4: When you’ve added each list item, close the unordered list with the

tag.


Here’s the complete code for the “Unordered List” screenshot above:

List items

Separated by

Bullets

Creating an Ordered List

The only difference you’ll need to remember to create an ordered list is that you will use the

ordered list tag instead of the  

1.tag in your HTML file where you want the ordered list to begin.  


Step 2: Each item in your list will need to be enclosed in the

1.list item tag. Type the opening tag,

2., then add the text that should appear for that numbered point, then end the item with the closing tag

Step 3: Repeat Step 2 for each item in your list.

Step 4: When you’ve added each list item, close the ordered list with the


1.Numbered

2.List

3.Items


or

tags where you’d like the embedded list to begin.  


Lists are a simple technique that can make a huge impact on the readability of your web pages. Adding lists to your HTML repertoire will help you do everything from simply organizing text to creating menus and other features on your web pages.


tag that tells the browser to display content as an unordered list.  


Step 1: Type a

tag.



Here’s the complete code for the “Ordered List” screenshot above:





More Complex Uses of HTML Lists

Once you understand the basic concepts of creating HTML lists, you can make them more sophisticated by adding some formatting via CSS (cascading style sheets). For example, you can change the spacing between items in a list, choose different icons instead of the default bullet shape, and even combine CSS with HTML lists to create menus and navigation for sites.

Lists can also be nested within one another, so you can create a list within a list. Just put the opening



If you've any question, problem, suggestion and feedback than please comment below.

Have a nice day!