InMotion Hosting Support Center

HTML has code you can use that allows you to make a "bulleted" or "numbered" list. There are two different types of list tags. The <ol> (ordered list) and <ul> (unordered list). Ordered lists are lists that order items by numbers or roman numerals. Unordered lists are bulleted points that can have circles or squares instead of numbers. Each ordered and unordered list has <li> elements within it. The <li> tags display each list item.

Code for the Ordered list

First, let's discuss "Ordered Lists". Ordered lists will be numbered and we will start with the <ol> tag.

<ol></ol>

This is the opening tag to tell the web browser the following content is to be contained in an ordered list. Now, we will need to add an <li> tag which stands for list item. After adding the list item tags and closing them our code will look like this. Don't forget to close the tags.

<ol>
  <li>first line in the list </li>
  <li>second line in the list </li>
</ol>

The above code will display the following results:

  1. first line in the list
  2. second line in the list

Code for the Unordered list

The process is the same for the unordered list. The only difference is the opening and closing tag of the actual list. Don't forget to close your tags or the lists will not display correctly. 

<ul>
  <li>first line in the list </li>
  <li>second line in the list </li>
</ul>

The above code will display the following results:

  • first line in the list
  • second line in the list

list styles in ordered and unordered lists

There are different style properties you can use for your lists. You can make the list style disc, square, circle etc.

<ul style="list-style: square">
  <li>first line in the list </li>
  <li>second line in the list </li>
</ul>

The above code will display the unordered list with squares:

  • first line in the list
  • second line in the list

The ordered list can have alpha, roman or other numeric style lists. The following in how the code works.

<ol style="list-style: upper-roman">
  <li>first line in the list </li>
  <li>second line in the list </li>
</ol>

The above code will display the ordered list with Upper case Roman numerals:

  1. first line in the list
  2. second line in the list

List of CSS list-style properties

Ordered CSS properties
lower-alpha
lower-roman
lower-latin
lower-greek
upper-alpha
upper-roman
upper-latin
upper-greek
CSS property to hide the list style
none
Unordered CSS properties
disc
square
circle

If you missed our previous article, please see the Basic Style using the Tag tutorial. For more information on this course please visit Website Design Basics

Continued Education in Course 101: Website Design Basics
You are viewing Section 5: Bullet Points and Numbered Lists Explained
Section 4: HTML Attributes: Using attributes in HTML tags
Section 6: How do I comment my HTML, CSS, JavaScript, and PHP code?

Support Center Login

Social Media Login

   
Social Login Joomla

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
n/a Points
2014-12-24 10:25 pm

It's always refreshing to see custom list buttons. And there's only way way to do this in perfect alignment with web standards. Using the :before pseudo element.

HTML<ol class="custom-counter"> <li>This is the first item</li> <li>This is the second item</li> <li>This is the third item</li></ol>CSS.custom-counter { margin-left: 0; padding-right: 0; list-style-type: none; }.custom-counter li { counter-increment: step-counter; }.custom-counter li::before { content: counter(step-counter); margin-right: 5px; font-size: 80%; background-color: rgb(200,200,200); color: white; font-weight: bold; padding: 3px 8px; border-radius: 3px; }

The really important part of custom list style is the selector values for psuedo selector li:before. Your values need to target a specific named value associated with the pseudo element. Our code above uses the value name 'step-counter', but 'li' also works. Value naming follows conventions (no spaces and only hyphens to separate letters). Specific names are also used, such as step-counter and li. If you want to complicate style and apply more than one custom attribute method to the counter, this cannot be done without script. For simple CSS styling, just use one pseudo element value name per list, per page, per style-sheet. If you use value-name 'data-title', it gets applied to the 'a' element, in the content of the list. This data-title style CSS code can be also applied to the li custom counter above, but is kept separate here in a link psudo style to avoid confusion.

HTML<li><a href="#" data-title="tootip">link</a></li>CSS.nav a[data-title]:hover:after { content: attr(data-title); color: #0099FF; font-size: 75%; left: 0; padding: 0; position: absolute; top: -3vmin; white-space: nowrap; z-index: -20px; /*and now, for even more style*/; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 4px #222; -webkit-box-shadow: 0px 0px 4px #222; box-shadow: 0px 0px 4px #222; background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(1, #cccccc)); background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); background-image: -o-linear-gradient(top, #eeeeee, #cccccc); }

To review...Pseudo-element li:before prepares the counter for styling, style will be applied before the list appears.Value content:counter(li) sets content to CSS generated counter (counter is technical term for lay term 'button').Value counter-increment:li assumes starting increment of 0, and increments the counter for each subsequent li. Once the li element is prepared with these three simple code items, you can style the list counters to do just about anything, including play music, display graphics, or simply use the kinds of numbers and bullets you want to use. Warning, unless you are on a VPS or dedicated server, attaching media to list counters should be limited to light-weight button graphics.

http://blog.teamtreehouse.com/customize-ordered-lists-pseudo-elementhttp://www.dynamicdrive.com/style/csslibrary/item/customizing_order_list_style_using_css/http://www.w3schools.com/Css/css_list.asp

Staff
3,885 Points
2014-12-26 10:11 am
Hello Mark,

Thank you for providing these helpful tips, we really appreciate feedback from our members.

Kindest Regards,
TJ Edens

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

6 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!