Lists are such a popular thing in blogging at the moment. Whether you’re listing some daily blog post ideas or a top 10 nail varnishes, knowing a little bit of HTML will make the list stand out. You can of course just use the toolbar in your blogging platform, but it’s fun to learn HTML for these things!
There are three types of list in HTML, ordered lists, unordered lists and definition lists. Ordered lists are when they are numbered (1, 2, 3… a, b, c… etc), unordered lists use bullet points, and definition lists allow you to have a title and definition for each item. Definition lists are used to define terminology usually, but they aren’t used very much in blogs, so we won’t be covering those in this post, but you can find out more about how they work over on W3Schools.com.
Ordered Lists
At the start of where you want the list to start, you would put the tag
<ol>
To close the list (so to stop everything else being numbered!), you’ll need to put the tag
</ol>
For each point, you would put the tag
<li>
at the start, and at the end of each item, you would put the tag
</li>
For example, the code to create a list of three items would look as follows:
<ol> <li>Facebook</li> <li>Twitter</li> <li>Instagram</li> </ol>
This will give the following result
You can add as many items to the list as you like, and the webpage will automatically number them for you.
Unordered Lists
At the start of where you want the list to start, you would put the tag
<ul>
To close the list (so to stop everything else on the page being bulleted), you’ll need to put the tag
</ul>
For each point, you would put the tag
<li>
at the start, and at the end of each item, you would put the tag
</li>
For example, the code to create a list of three items would look as follows:
<ul> <li>Facebook</li> <li>Twitter</li> <li>Instagram</li> </ul>
This will give the result as follows:
Nesting
Sometimes, you might want to nest a list within a list. It’s pretty easy to do, you would just insert another <ul> or <ol> tag into the bit you want nesting.
So, using the same sort of example as before, here’s an unordered list within a numbered list
- Twitter
- Following
- Followers
- Direct Message
The code for this looks as follows. The unordered list is coloured differently to show the difference. The list item should be closed after the nested list so it doesn’t mess up the rest of the page!
<ol> <li>Facebook</li> <li>Twitter <ul> <li>Following</li> <li>Followers</li> <li>Direct Message</li> </ul> </li> <li>Instagram</li> </ol>
If you need to edit a list item, then it’s really easy to do – you just need to remember to include the opening and closing <li> tags – you can edit them, add new ones, move them around into different orders, or delete them.
What sort of thing would you use lists for?
I know absolutely nothing about code but this looks manageable. I’m going to try it because I don’t find my wordpress toolbar very user-friendly for lists. Thanks!