Unordered Lists:
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered Lists:
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Description (Data) Lists:
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
List as Navigaion:
ExampleA set of navigation links:
<nav>
<ul>
<li><a href="/html/">HTML</a> </li>
<li><a href="/css/">CSS</a> </li>
<li><a href="/js/">JavaScript</a> </li>
<li><a href="/python/">Python</a> </li>
</ul>
</nav>
<nav>
<ul>
<li><a href="/html/">HTML</a> </li>
<li><a href="/css/">CSS</a> </li>
<li><a href="/js/">JavaScript</a> </li>
<li><a href="/python/">Python</a> </li>
</ul>
</nav>
List in a List:
ExampleNest an unordered list inside an ordered list:
<ol>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ol>
<ol>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ol>
Create your own List!
"Lists Tutorial"
1. Create a new document on Liveweave.com
2. Set up a basic website using the following tags:
<!DOCTYPE html> <html> <head> <body> <footer> <header> <p>
3. Add a list of your choice to your page:
<ol> <ul> or <dl>
4. Add at least 5 <li> list items within your list of choice.
5. Add text inside your <li> tags!
6. Save your Liveweave (it should read as Liveweave.com/(letters and numbers) ).
7. Copy the Liveweave web address and submit it on Google Classroom under "Lists Tutorial."
2. Set up a basic website using the following tags:
<!DOCTYPE html> <html> <head> <body> <footer> <header> <p>
3. Add a list of your choice to your page:
<ol> <ul> or <dl>
4. Add at least 5 <li> list items within your list of choice.
5. Add text inside your <li> tags!
6. Save your Liveweave (it should read as Liveweave.com/(letters and numbers) ).
7. Copy the Liveweave web address and submit it on Google Classroom under "Lists Tutorial."
Example:
https://liveweave.com/bXzsQi
<!DOCTYPE html>
<html>
<head>
<!--
Author: Mrs. M
Date: Today
-->
<title>My List</title>
</head>
<body>
<header> <h1>Groceries This Week</h1> </header>
<p><h3>Jewel List</h3></p>
<ol>
<li>Apples</li>
<li>Cheese</li>
<li>Broccoli</li>
<li>Bread</li>
<li>Pasta Sauce</li>
</ol>
</body>
</html>
https://liveweave.com/bXzsQi
<!DOCTYPE html>
<html>
<head>
<!--
Author: Mrs. M
Date: Today
-->
<title>My List</title>
</head>
<body>
<header> <h1>Groceries This Week</h1> </header>
<p><h3>Jewel List</h3></p>
<ol>
<li>Apples</li>
<li>Cheese</li>
<li>Broccoli</li>
<li>Bread</li>
<li>Pasta Sauce</li>
</ol>
</body>
</html>