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
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
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
- Open Notepad
- Type in desired HTML code
- Save document as an HTML file
- 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
- Open Notepad
- Type in desired HTML code
- Save document as an HTML file
- Open your file in a browser window
This site needs an editor - click to learn more!
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 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.