List Tags

When writing any document, lists provide quick bursts of information in the most efficient manner. HTML Lists are no different when used in an HTML document. In a browser, there are only two types of lists, ordered and unordered. Ordered lists obviously have a predictable layout such as numbers or roman numerals. The standard for ordered lists is numbers, but you can always modify that in the CSS. Unordered lists are generally small black dots that can also be changed in the CSS. Lists require two sets of tags. The encapsulating tag is <ol> for ordered lists and <ul> for unordered lists. The element inside that tag is the <li> where your content will go in between the opening and closing tags of the that li element.

HTML Ordered Lists

Example

Result
  1. List Item 1
  2. List Item 2

HTML Unordered Lists

Example

Result
  • List Item 1
  • List Item 2

Pretty easy to understand there, but what if we wanted to have another level in the list? You can create lists inside lists. You would simply just start putting <ul> with internal <li> inside the previous <li> elements. Alright, maybe that is somewhat complicated… example please!

HTML Multiple Level Lists

Example

Result
  • List Item 1
    • List Item 1 Sub 1
    • List Item 1 Sub 2

References

If you enjoyed this resource, support me by sharing this page with others.
Share on Facebook
Facebook
Share on Google+
Google+
Share on StumbleUpon
StumbleUpon
Digg this
Digg
Tweet about this on Twitter
Twitter
Share on Reddit
Reddit

Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.