HTML Tips and Tricks: Bullet Time

html-bullet-points-header

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

  1. Facebook
  2. Twitter
  3. Instagram

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:

  • Facebook
  • Twitter
  • Instagram

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

  1. Facebook
  2. Twitter
    • Following
    • Followers
    • Direct Message
  3. Instagram

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?

Hayley Constantine

Hayley has been blogging since before most people knew what a blog was! She started Bonjour, Blogger! in May 2013 as a way to share her knowledge and experiences - if you ever have a question, get in touch!

  • Jennifer

    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!

    June 16, 2015 at 11:19 pm Reply

Leave a Reply

})(jQuery)