g
Printer Friendly Version

editor  
BellaOnline's HTML Editor
 

Using HTML to create lists

Basic HTML gives you several great options to create lists. You can build both ordered and unordered list with a few simple lines; add CSS to the mix and you can really make your lists pop.

The first and simplest type of list is the unordered list. This is your basic bulleted list and uses the <ul> tag as the starting point and <li> tags for each bullet point. The code for an unordered list will look something like this...

Things you need to build a website
<ul>
<li>A computer (very important!)</li>
<li>A program that allows you to create HTML code, such as Notepad</li>
<li>Some basic HTML knowledge</li>
</ul>

... and would display on your website like this:

Things you need to build a website


The second type is the ordered list. Instead of using an <ul> tag to contain the list, you'll use the <ol> tag (you can easily remember which is which if you keep in mind that "ul" stands for "unordered list" and "ol" stands for "ordered list!"). Your ordered lists can use either ascending numbers, which is the default option, or ascending letters for each item.

Your code for an ordered list with numbers might look like this...

How to build and view HTML pages
<ol>
<li>Open Notepad</li>
<li>Type in desired HTML code</li>
<li>Save document as an HTML file</li>
<li>Open your file in a browser window</li>
</ol>

... while your browser will display this:

How to build and view HTML pages

  1. Open Notepad

  2. Type in desired HTML code

  3. Save document as an HTML file

  4. Open your file in a browser window



If you'd rather use letters than numbers to define your list items, simply add the "type" attribute to the <ol> tag. You can set type to "a" (for lowercase letters) or "A" (for uppercase ones). For even fancier lists, using "type='i'" will display lowercase roman numerals and "type='I'" displays uppercase roman numerals.

Here's an example of an ordered list with uppercase letters...

How to build and view HTML pages
<ol type="A">
<li>Open Notepad</li>
<li>Type in desired HTML code</li>
<li>Save document as an HTML file</li>
<li>Open your file in a browser window</li>
</ol>

... and in your browser window you'll see:

How to build and view HTML pages

  1. Open Notepad

  2. Type in desired HTML code

  3. Save document as an HTML file

  4. Open your file in a browser window


This site needs an editor - click to learn more!

HTML Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact Editor Wanted for details.



| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor