by Alan | 3:18 PM

3 Ways to Make a List in HTML

make a list in HTML

So, you want to make a list in HTML? It’s not hard. Other facets of HTML, the “3 Things I Know You Need for HTML in WordPress” are not difficult. You won’t find it hard to make a list in HTML by the end of this post. That is the goal.

Let’s start with 1’s and 2’s
The Ordered List.

make a list in HTML

    Anytime you have a list that you want to put in order, this is the way to go. The ordered list uses the symbols in this picture.

  1. “ol” inside angle brackets to open the list
  2. “li” inside angle brackets to add a line item
  3. “/li” inside angle brackets to close the single line item
  4. “/ol” inside angle brackets to close the list

Now, you see that I used an ordered list to explain the image. There are some things about this list and when you make a list in HTML in general that you should know.

  • You can place text next to the opening tag to use as an intro for the list.
  • Place anything inside a list that you want between the “li” tags, like links or images.
  • Any text not added with the list tags will be formatted like regular text.
  • In between the list tags, add paragraphs for extra information you want to give.

We can move on to bullets,
The “Un-ordered” List

make a list in html

You see above that I already created an un-ordered list for your viewing pleasure. The creation of this list is very similar to the ordered list. The only real difference is the letter “u” inside the tag and how the list looks when you’re done.

One thing I haven’t mentioned that you may have figured out. Every item in your list has to have the list tags, opened and closed. It may seem obvious, but some might not see it at first.

Okay, now we can finish this with something new to me,
The Description List

make a list in html

When I thought to explain how to make a list in HTML, I honestly only knew about ordered and un-ordered lists. But I did a little checking and much to my surprise, I get to tell you about something else that I certainly plan to use in my future posts.

The Description List

Sometimes, you don’t want any numbers or bullets. I can understand wanting a list that doesn’t get indented either. When you have a term that you want to define, the description list is perfect as well. Let me give you an example.

A “Make a List in HTML Benefit” –

Knowing the different ways to make a list in HTML can help you to organize your content on the website you build. Organization assists with easy reading and the efficient knowledge dissemination.

You can see how the “dl” replaces the “ol” and “ul.” The “dt” replaces the “li” (list tag) and stands for “description term.” Coincidentally, the boldness of the text above happened as a result of the “dt” tags.

A little plug for affiliate marketing:

Check out my review of Wealthy Affiliate.

Comments

Bailey

I have been struggling with making lists on wordpress and this post really helped me! Thank you so much. I had no idea about “The Description List.” I’m excited to try it out!

May 31.2017 | 03:35 pm

    Alan

    Glad to help. Check back for more. I want to dispel the idea that HTML is difficult. It’s just one stepping stone on the way to creating your dream. Thanks and blessings.

    May 31.2017 | 04:14 pm

Helen Vella

Easy to understand if you want to use HTML which is not always easy to understand and you did a great job here.

May 31.2017 | 04:01 pm

    Alan

    Thank you very much! Stop back for more if you need it. I welcome your visits. Blessings.

    May 31.2017 | 04:12 pm

Rick Caldwell

As a fellow Wealthy Affiliate member and front-end web designer/developer, I can appreciate a site like this, because it addresses the quick solution of varied lists that are used quite extensively on both regular websites and blogs. Thanks for sharing this info. It’s nice, because it is simple and straight to the point. No fluff, just easy how-to’s.

Thanks,
Rick C.

May 31.2017 | 04:15 pm

    Alan

    I really appreciate your opinion, Rick. I am glad to be a fellow WAer with you. I will have to check out your site as well. Blessings.

    May 31.2017 | 07:04 pm

Shirley

Nice, this is exactly what I’ve been looking for. Would love to see more html guides like this, it’s something I’m interested in learning but a lot of other tutorials I’ve seen have just left me confused. Definitely bookmarking this for future reference, thank you!

May 31.2017 | 07:23 pm

    Alan

    Thank you so much. I will be adding more as I go. There’s a whole lot of HTML that isn’t even necessary for most people. It’s really simple, but it’s nice to expand your knowledge as well. Thanks again, and I hope to see you back!

    May 31.2017 | 08:18 pm

Furkan

I really wanted to organize my content for a month and I think this might just help me. It seems clear enough. I thnik I will start doing it topday and if I have any question I will probably come back here.

May 31.2017 | 07:31 pm

    Alan

    Fantastic Brother! I am glad to be here for you! Any requests, you can go to the Contact Page and let me know what you need. I may not know how, but I will figure it out and put it in a post. Thanks again. Have a great day!

    May 31.2017 | 08:24 pm

Maun

Hi Alen,
Wow, loved how you simplify the html. I am glad I come across your site and see what I am looking for. The HTML always make me confused so hardly use them. Your article definitely will me more efficient using this WordPress stuff.
Thanks for the tips.

May 31.2017 | 09:14 pm

    Alan

    It is pretty simple, but when you first look at it, it’s a different language. Thanks for stopping by. Hope to see you again.

    Jun 01.2017 | 12:23 am

Bea

Html list well explained here. Thanks so much! I am pretty new to website development so I have bookmarked this post so that I can apply these steps to my site. This is going to be very useful. Thanks again for the explanation. Very educative post.

May 31.2017 | 10:49 pm

    Alan

    You are so welcome. Feel free to look around the blog. You just made me think of looking if I had a category for WordPress posts. Thanks. You may be my muse for the day.

    Jun 01.2017 | 12:21 am

Leave a Reply

Your email address will not be published. Required fields are marked *