Friday, August 12, 2011

HTML5 Tutorial 5: Making lists

Making lists in HTML is very easy, we will be using the tags <ol>, <ul>, <menu> and <li> today.

<ol>
To make a standard ordered list like this:

  1. Item 1
  2. Item 2
  3. Item 3
You would use the tag <ol> which stands for Ordered List, for any list you must also use the tag <li> which stands for List Item, You use the tags together like so:
<ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
</ol>
This will show up like the above example.

<ul>
<ul> stands for Un-ordered list which is bullet points, like so:
  • Item 1
  • Item 2
  • Item 3
To use them you simply change <ol> to <ul> like this:
<ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
</ul>
<menu>
This is probably the most used form of lists, Checkboxes, They look like this:

  • Item 1


  • Item 2


  • Item 3

  • To use them you simply use the following code:

    <menu>
    <li><input type="checkbox" />Item 1</li>
    <li><input type="checkbox" />Item 2</li>
            <li><input type="checkbox" />Item 3</li>
    </menu>

    Catch'ya later guys.

    21 comments:

    1. I really like these tutorials.

      ReplyDelete
    2. Huh, this might come in handy for my blog. Thanks.

      ReplyDelete
    3. brilliant, always really simple to follow and understand :) will use to further my blog (y)

      ReplyDelete
    4. Had no idea how to do this! Nice tutorials.

      ReplyDelete
    5. Thank you! Been looking on how to do that lately.

      ReplyDelete
    6. i really have to check out more it seems perfect to learn from here

      ty

      ReplyDelete
    7. Nice, learn something new here every day.

      ReplyDelete
    8. I want to use the check boxes for something on my blog lol

      ReplyDelete
    9. that is very helpful and easy thanks

      ReplyDelete
    10. I once made it my goal to learn HTML...then I just kinda gave up but this makes me wanna start it up again. Definitely worth it i think. Love your blog def gonna follow and keep updated with it :)

      ReplyDelete
    11. Followed! I've been looking for a place to learn HTML for a long time now. Keep up the posts, it's a great idea!

      ReplyDelete
    12. Seems useful, I've been considering learning some coding for my website, and this might help me out. Great blog, +1 following!

      ReplyDelete
    13. I think my uni course next year is gonna cover html, so i hope this will give me an edge! :)

      ReplyDelete
    14. I've always wanted to learn a code language. Great information!

      ReplyDelete
    15. cool I always considered learning HTML

      ReplyDelete
    16. Sweet tutorial dude! I've been meaning to learn HTML 5 for a while now!

      ReplyDelete
    17. lol! to me html is harder than taking blood from a rock!

      anyway, +following and supporting! ;)

      ReplyDelete
    18. HTML5 is the future.

      ReplyDelete
    19. I love this guide, can't wait for more!

      ReplyDelete
    20. This comment has been removed by the author.

      ReplyDelete