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.
Here are 5 easy, clear steps on…
Make a List 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!
14 Comments
Tonja Drecker
You explained that so well! At first, I cringed (at the sight), but now, it makes sense. Thanks 🙂
Cathy Kennedy
Tonja,
Thanks! Let me know if I can help. My experience and knowledge is limited but I love to learn and share!
Claudia Willison| ImagesByCW
Well, it has taken me a while, I know you have done it before, but today I am also going on a blogging break. So, I wanted to quickly stop by and say ‘hi’. Hope you’re enjoying summer and your trip into our coding world.
Cathy Kennedy
Claudia,
Thanks for stopping in for a quick visit. I hope you enjoy your summer and blogging break, too. This is a good time to step away from Blogosphere with traffic down. Have fun, my friend!
15andmeowing
Great post. I feel like I am reading another language the minute I see the word html code. 🙂
Cathy Kennedy
Ellen,
You’re not alone. Coding is a bit foreign to me even though I’ve had some exposure to it in school but I’m willing to learn and experiment. What’s the worse thing can happen? 😀
John Holton
I’ve gotten lazy: I write everything in Markdown (https://daringfireball.net/projects/markdown/) and either let WordPress turn it into HTML or run it throuh the Markdown Web Dingus (https://daringfireball.net/projects/markdown/dingus) to convert it into HTML. But that’s just me. Great lesson!
Cathy Kennedy
John,
I haven’t written code since college. Unfortunately, I couldn’t get a programming gig because I have an associate degree and everyone was looking for either college grads with a B.A. or experience. I don’t remember anything about the languages I studied but I think I would do better today relearning how to write the newer code than I did the first time around. I attribute this to being more confident now than I was in my teens and early 20s. It’s cool that you still write code, though. Also, it’s neat to know about this site that converts your code to HTML. 🙂 Have a good weekend!
Tamara Narayan
This was very clear. I haven’t needed to add a list to a sidebar item yet, but I know what to do in the future.
Cathy Kennedy
Tamara,
Thankfully doing little jobs like this is made easy with all the step-by-step guides available online. 🙂
Birgit
Organized list??..hahahaaaa I have a disorganized list if that makes sense. This gives me an idea how to do this but I’m too scared I will screw things up because I have been known to do this. I did once shut down the computers back in the 80’s when I was in University. Dance music?? Dancing Queen by ABBA, rock Lobster by the B52’s:)
Cathy Kennedy
Birgit,
You shut the computers down! What on earth did you do? lol Seriously this coding is really simple and I don’t you’d do any harm to your blog should you want to try it. “Dancing Queen” is an excellent dance song. I’m not sure if I know “Rock Lobster”, though. I will have to pop over to YouTube to have a listen. I’ll see ya soon. Have a good weekend and thanks for stopping by today. 🙂
Thomas Anderson
Hi, Cathy!
Happy Friday to you, dear friend! Most of this is Greek to me, but I enjoy learning. Over the years I have learned how to write and edit HTML and find it fun and satisfying. You have a very attractive and nicely laid out site. I especially like your a-mewsing header with the kitty cat. That meme rings true because I have never known a cat that didn’t like to jump up on the desk while I am working and take a stroll across my keyboard or sit down on it and wait for me to pet and scratch. 🙂
Have a safe and happy weekend, dear friend Cathy!
Cathy Kennedy
Tom,
I’m glad you feel confident and comfortable dabbling with HTML coding. It is rewarding to manipulate ones site to suit your needs. I’d love to learn more about how to use HTML to make bigger changes or to design sites from the ground up. That would involve a lot of time and determination to stick with it. I’m not sure how patient I’m willing to be to do this just now, though. I’m glad you like my blog layout. I get a lot help from WP plugins, widgets, & basic HTML coding such as in my example bringing CAAC together the way I like. Thanks for dropping by. I’ll be over for a visit soon! ?