Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Learning to use lists in HTML

Thursday, December 6th, 2012 by Servage

Creating content in HTML is much about choosing the right tags for any type of content. In this article we’ll introduce you to the list. Lists are basically used for exactly what the name says: Listing any kind of content – the looks can be set with CSS. Obviously you could always abuse some of the other general tags like “p” or “div” to create the same result visially, but it would be semantically incorrect, since the proper tag for lists is either “ul” (unordered list) or “ol” (ordered list) with “li” (list item) tags inside, containing the individual content.

Unordered list

  <li>List Item 1</li>
  <li>List Item 1</li>
  <li>List Item 3</li>

Ordered list

  <li>List Item 1</li>
  <li>List Item 1</li>
  <li>List Item 3</li>

List style type and position

Two of the unique CSS properties for lists are the style type and position. The style type is which kind of symbol to show for each list item. The style position is if it should be “inside” or “outside” the list item. This is only relevant for lists where items can have multiple lines – where the style position has an influence of placement of the icon in relation to item padding and margin.

ul {
  list-style-type: circle;
  list-style-position: inside;

Have fun with lists :-)

Learning to use lists in HTML, 4.3 out of 5 based on 3 ratings
Categories: Guides & Tutorials


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.