Lists

HTML lists are used to present list of information in well formed and semantic way. The most common forms of HTML lists are ordered and unordered lists.

Ordered List Types

Ordered List Types and Classes
Class	List Style	Source Code
Default Ordered	ordered (ol)	<ol>
Alphabet	ordered (ol)	<ol class="list-upper-alpha">
Roman Numerals	ordered (ol)	<ol class="list-upper-roman">
Nested Roman	ordered (ol)	<ol class="list-roman-nested">
Outline	ordered (ol)	<ol class="outline">

Default Ordered List (with nested unordered list)

Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at

Alphabet

Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
1. Phasellus iaculis neque
2. Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at

Roman Numerals

Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit

Phasellus iaculis neque
Purus sodales ultricies

Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at

Nested Roman

Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
1. Phasellus iaculis neque
2. Purus sodales ultricies
  1. Phasellus iaculis neque
  2. Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at

Outline

Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
1. Phasellus iaculis neque
2. Purus sodales ultricies
  1. Phasellus iaculis neque
  2. Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at

Unordered List Types

Unordered List Types and Classes
Class	List Style	Source Code
**The difference between default, "list-square", and "list-circle" is extremely minimal, so those list styles have been retired.
Default Unordered	unordered (ul)	<ul>
Ruled	unordered (ul)	<ul class="ruled">
Unstyled	unordered (ul)	<ul class="list-unstyled">
Inline	unordered (ul)	<ul class="list-inline">

Default Unordered List

Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies

Ruled List

Add class="h5" to strong or span to create the bold text. A line break may be needed after the bold text.

First Day for Students:
- Wednesday, August 4: Extended Learning Schools
- Wednesday, August 11: Traditional Calendar Schools
- Friday, August 13: Pre-K and Kindergarten
Board of Education Meeting:
Wednesday, August 18

Unstyled and Inline Lists

Note: These list styles were not developed with accessibility in mind. Improvements should be made to the CSS before using more often. Reference: Hiding List Style Type and Bullets between list items.

Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- This is a paragraph under the heading.
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at

Specialized List Styles

Specialized List Types and Classes
Class	List Style	Source Code
Default Definition Lists	definition (dl)	<dl> ... </dl>
Tile Lists	unordered (ul)	<ul class="tiles">

Definition List

Reference: W3School Tutorial – Creating Definition Lists

Academic achievement: Generally refers to a child’s performance in academic areas (e.g., reading or language arts, math, science, and history)
ACCESS: Adult centered community education and support services

Tiles

Source Code:

<ul class="tiles">
<li><a class="tile button button-md button-mdblue" href="https://amazon.com"> Vision Statement & Who We Are</a></li>
<li><a class="tile button button-md button-mdblue" href="https://amazon.com"> Services & Resources</a></li>
<li><a class="tile button button-md button-mdblue" href="https://amazon.com"> Compensation Guides</a></li>
</ul>