logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance


dailyclick
All times in EST

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

Using HTML to create lists

Guest Author - Elizabeth Connick

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

  • A computer (very important!)

  • A program that allows you to create HTML code, such as Notepad

  • Some basic HTML knowledge



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!

Add Using+HTML+to+create+lists to Twitter Add Using+HTML+to+create+lists to Facebook Add Using+HTML+to+create+lists to MySpace Add Using+HTML+to+create+lists to Del.icio.us Digg Using+HTML+to+create+lists Add Using+HTML+to+create+lists to Yahoo My Web Add Using+HTML+to+create+lists to Google Bookmarks Add Using+HTML+to+create+lists to Stumbleupon Add Using+HTML+to+create+lists to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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 BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor