Lists
Simply your webpage with lists. Lists make it easier for your users to view web page information. They can easily be added to or deleted from.
But we can not mix headings and lists! This will confuse a browser.
Item Lists
Ordered list <ol>
- usually numbered
- start each item in the list with the tag "list item" <li>
- start & end tags should be on separate lines
Unordered list <ul>
- usually bulleted
- start each item in the list with the tag "list item" <li>
- start & end tags should be on separate lines
Ordered and unordered lists can easily be converted from one format to the other by changing the beginning and ending tag.
Nested Lists
- lists can be inserted within each other - similar to an outline
- most browsers will vary the <ul> bullet when an unordered list is nested inside an unordered list
- use sparingly since it is difficult to follow the coding
| Ordered List | Unordered List | ||
|---|---|---|---|
HTML Coding <h3>Attractions</h3> <ol> |
Browser Display Attractions
|
HTML Coding <h3>Attractions</h3> <ul> |
Browser Display Attractions
|
| Nested List | |||
| <h4>El Centro College</h4> <ul> <li>Health Occupations Division</li> <li>Business Division <ul> <li>Computer Science Dept.</li> <li>Accounting Dept.</li> </ul> </li> <li>Communications & Math Division</li> <li>Arts & Sciences Division</li> </ul> |
El Centro College
|
||
Definition list <dl>
Involves two additional codes:
<dt> definition term
<dd> definition definition
| HTML Coding | Browser Display |
|---|---|
| <h4>Web Authoring Terminology</h4> <dl> <dt>HTML</dt> <dd>Hypertext Markup Language</dd> <dt>Firefox</dt> <dd>Web Browser</dd> </dl> |
Web Authoring Terminology
|