Ordered and Unordered Lists

Ordered and unordered lists (ol and ul, respectively) are block-level elements comprised of list items (li).

ol
ordered list, a block-level element similar to ul with the difference being an emphasis on order, like numerical order or alphabetical order.
ul
unordered list, a block-level element similar to ol, but with no emphasis on order.
li
list item, a block-level element.

Unordered list

Here is a list of common fruit. Since there is no ranking or chronological order for the list items, it makes sense for this to be an unordered list.

  • watermelon
  • banana
  • apple
  • orange
  • strawberry
  • pear
  • grape
  • pineapple
  • fig
  • kiwi
  • mango
  • coconut
HTML Syntax
<ul>
	<li>watermelon</li>
	<li>banana</li>
	<li>apple</li>
	<li>orange</li>
	<li>strawberry</li>
	<li>pear</li>
	<li>grape</li>
	<li>pineapple</li>
	<li>fig</li>
	<li>kiwi</li>
	<li>mango</li>
	<li>coconut</li>
</ul>

Ordered list

Here is an ordered list of the most regressive state and local tax systems as reported by the Institute on Taxation and Economic Policy. Since the list items have been ranked, it makes sense for them to contained in an ordered list.

  1. Washington
  2. Florida
  3. Texas
  4. South Dakota
  5. Illinois
  6. Pennsylvania
  7. Tennessee
  8. Arizona
  9. Kansas
  10. Indiana
HTML Syntax
<ol>
	<li>Washington</li>
	<li>Florida</li>
	<li>Texas</li>
	<li>South Dakota</li>
	<li>Illinois</li>
	<li>Pennsylvania</li>
	<li>Tennessee</li>
	<li>Arizona</li>
	<li>Kansas</li>
	<li>Indiana</li>
</ol>

Example with longer text

I like to add a bit of spacing to separate list items, particularly if they contain a lot of text.

  • Washington: Where the poorest 20% of non-elderly residents pay 16.8% of their income in taxes and the richest 1% pay 2.4%. The capital is Olympia.
  • Florida: Where the poorest 20% of non-elderly residents pay 12.9% of their income in taxes and the richest 1% pay 1.9%. The capital is Tallahassee.
  • Texas: Where the poorest 20% of non-elderly residents pay 12.5% of their income in taxes and the richest 1% pay 2.9%. The capital is Austin.
  • South Dakota: Where the poorest 20% of non-elderly residents pay 11.3% of their income in taxes and the richest 1% pay 1.8%. The capital is Pierre.
  • Illinois: Where the poorest 20% of non-elderly residents pay 13.2% of their income in taxes and the richest 1% pay 4.6%. The capital is Springfield.
  • Pennsylvania: Where the poorest 20% of non-elderly residents pay 12.0% of their income in taxes and the richest 1% pay 4.2%. The capital is Harrisburg.
  • Tennessee: Where the poorest 20% of non-elderly residents pay 10.9% of their income in taxes and the richest 1% pay 3.0%. The capital is Nashville.
  • Arizona: Where the poorest 20% of non-elderly residents pay 12.5% of their income in taxes and the richest 1% pay 4.6%. The capital is Phoenix.
  • Kansas: Where the poorest 20% of non-elderly residents pay 11.1% of their income in taxes and the richest 1% pay 3.6%. The capital is Topeka.
  • Indiana: Where the poorest 20% of non-elderly residents pay 12.0% of their income in taxes and the richest 1% pay 5.2%. The capital is Indianapolis.
HTML Syntax
<ul class="longer-text">
<li><strong>Washington:</strong> Where the poorest 20% of non-elderly residents pay 16.8% of their income in taxes and the richest 1% pay 2.4%. The capital is Olympia.</li>
<li><strong>Florida:</strong> Where the poorest 20% of non-elderly residents pay 12.9% of their income in taxes and the richest 1% pay 1.9%. The capital is Tallahassee.</li>
<li><strong>Texas:</strong> Where the poorest 20% of non-elderly residents pay 12.5% of their income in taxes and the richest 1% pay 2.9%. The capital is Austin.</li>
<li><strong>South Dakota:</strong> Where the poorest 20% of non-elderly residents pay 11.3% of their income in taxes and the richest 1% pay 1.8%. The capital is Pierre.</li>
<li><strong>Illinois:</strong> Where the poorest 20% of non-elderly residents pay 13.2% of their income in taxes and the richest 1% pay 4.6%. The capital is Springfield.</li>
<li><strong>Pennsylvania:</strong> Where the poorest 20% of non-elderly residents pay 12.0% of their income in taxes and the richest 1% pay 4.2%. The capital is Harrisburg.</li>
<li><strong>Tennessee:</strong> Where the poorest 20% of non-elderly residents pay 10.9% of their income in taxes and the richest 1% pay 3.0%. The capital is Nashville.</li>
<li><strong>Arizona:</strong> Where the poorest 20% of non-elderly residents pay 12.5% of their income in taxes and the richest 1% pay 4.6%. The capital is Phoenix.</li>
<li><strong>Kansas:</strong> Where the poorest 20% of non-elderly residents pay 11.1% of their income in taxes and the richest 1% pay 3.6%. The capital is Topeka.</li>
<li><strong>Indiana:</strong> Where the poorest 20% of non-elderly residents pay 12.0% of their income in taxes and the richest 1% pay 5.2%. The capital is Indianapolis.</li>
</ul>
CSS Syntax
.longer-text li + li { margin-top: 0.5em; }

List with columns

  • Washington
  • Florida
  • Texas
  • South Dakota
  • Illinois
  • Pennsylvania
  • Tennessee
  • Arizona
  • Kansas
  • Indiana
HTML Syntax
<ul class="column">
	<li>Washington</li>
	<li>Florida</li>
	<li>Texas</li>
	<li>South Dakota</li>
	<li>Illinois</li>
	<li>Pennsylvania</li>
	<li>Tennessee</li>
	<li>Arizona</li>
	<li>Kansas</li>
	<li>Indiana</li>
</ul>
CSS Syntax
#post-796 ol.column,
#post-796 ul.column {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;	
}

Multi-level lists

I added margins to space out each level and specified each list-style-type.

Unordered Multi-leveled list

  • Washington
    • Olympia
    • Seattle
      • Capital Hill
        • Cal Anderson Park
        • Roanoke Park
      • Ballard
        • Loyal Heights
        • North Beach
  • Florida
    • Tallahassee
    • Miami
  • Texas
  • South Dakota
  • Illinois
  • Pennsylvania
  • Tennessee
  • Arizona
  • Kansas
  • Indiana

Ordered multi-level list

  1. Washington
    1. Olympia
    2. Seattle
      1. Capital Hill
        1. Cal Anderson Park
        2. Roanoke Park
      2. Ballard
        1. Loyal Heights
        2. North Beach
  2. Florida
    1. Tallahassee
    2. Miami
  3. Texas
  4. South Dakota
  5. Illinois
  6. Pennsylvania
  7. Tennessee
  8. Arizona
  9. Kansas
  10. Indiana
HTML Syntax
<ul class="multilevel">
	<li>Washington
		<ul>
			<li>Olympia</li>
			<li>Seattle
				<ul>
					<li>Capital Hill
						<ul>
							<li>Cal Anderson Park</li>
							<li>Roanoke Park</li>
						</ul>
					</li>
					<li>Ballard
						<ul>
							<li>Loyal Heights</li>
							<li>North Beach</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>Florida
		<ul>
			<li>Tallahassee</li>
			<li>Miami</li>
		</ul>
	</li>
	<li>...</li>
	<li>Indiana</li>
</ul>

<ol class="multilevel">
	<li>Washington
		<ol>
			<li>Olympia</li>
			<li>Seattle
				<ol>
					<li>Capital Hill
						<ol>
							<li>Cal Anderson Park</li>
							<li>Roanoke Park</li>
						</ol>
					</li>
					<li>Ballard
						<ol>
							<li>Loyal Heights</li>
							<li>North Beach</li>
						</ol>
					</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>Florida
		<ol>
			<li>Tallahassee</li>
			<li>Miami</li>
		</ol>
	</li>
	<li>...</li>
	<li>Indiana</li>
</ol>
CSS Syntax
#post-796 .multilevel ul,
#post-796 .multilevel ol {
	margin-top: 0.375em;
	margin-bottom: 0.375em;
}

#post-796 .multilevel ul { list-style-type: circle; }
#post-796 .multilevel ul ul { list-style-type: square; }
#post-796 .multilevel ul ul ul { list-style-type: circle; }
#post-796 .multilevel ol { list-style-type: upper-alpha; }
#post-796 .multilevel ol ol { list-style-type: upper-roman; }
#post-796 .multilevel ol ol ol { list-style-type: lower-alpha; }

Leave a Reply

Your email address will not be published. Required fields are marked *