5-Easy Steps: How to Make a List in HTML

Howdy, Kittens and Dawgs! I’m still on my summer break schedule but I’m prone to blogging on a whim during my hiatus which brings me to, do you know how to create lists in HTML?   My aim was to create a list of dates and themes without any line breaks and here’s how I did it.  You don’t need a programming degree to create this short code. If I can do it, than anyone can! It’s that easy.

Make a list in 5 easy clear steps in HTML

Step 1: <p> (This starts a new paragraph)

Step 2: <ul> (This begins unordered list)

Step 3: <li> (Defines the list item and must be closed with </li>

<li> (1st Date + Theme)</li>

<li> (2nd Date + Theme)</li>

<li> (3rd Date + Theme)</li>

Step 4: </ul> (This closes or ends unordered list)

Step 5: </p> (This closes or ends new paragraph)

Now, that you see how to do it you can condense the code format to read:

<p><ul><li> (1st Date + Theme)</li><li> (2nd Date + Theme)</li><li> (3rd Date + Theme)</li></ul></p>

This is how it will look (you’ll find this example in my side menu)….

 

If you’re not new to blogging then you probably know how to add images, texts, and widgets to your site. However, if not this is how I created my Mewsic Moves Me banner. I added a blank image widget to my side menu and added an image.  Once it uploaded, I selected “Edit Image”. In the “Captions” block, I added the coding to make my list. This is how it looks behind the scenes.

Click image to enlarge

How did I do explaining how the code works?

What do you think, do you want to try this next time you want to create a list outside your post content?

Still not sure? You can practice your coding skills at W3Schools!

 

 

All this talk about Monday’s Mewsic Moves Me then I gotta pitch our 7th Anniversary #giveaway going on right now and if you haven’t entered then you may want to check it out. I’m outta here until Monday but I hope you’ll hit the dance floor with “your choice” song picks!

Have geektastic day! Save

error: Please contact me for permission to download. Thank-you!!