Lists

Three types of lists:

  • Ordered defined by the <ol> element
  • Unordered defined by the <ul> element
  • Definition, defined by the <dl> element

 

Ordered and unordered lists contain list items, defined by the <li> element.

 

Definition lists contain terms defined by the <dt> element and definitions defined by the <dd> element.

 

Use of the type attribute in an ordered list allows the bullet point to be set as:

 

<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.

 

 

The type attribute allows the bullet point for unordered lists to be defined as "square", "disc" or "circle":

 

<ul type="square">
<ul type="disc">
<ul type="circle">

 

 

The start attribute can also be used to define the start of a list, e.g.:

 

<ol start="17">

 

<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
	</head>
	<body>
		<ol start="42">
			<li>My first list item</li>
			<li>My second list item</li>
			<li>My third list item</li>
			<li>My fourth list item</li>
		</ol>
		<ul type="square">
			<li>Example using square bullets</li>
			<li>More interesting information</li>
			<li>Appropriate data</li>
			<li>Perhaps you include other elements, like images!</li>
		</ul>
		<dl>
			<dt>Term</dt>
			<dd>Term Definition</dd>
			<dt>HTML</dt>
			<dd>Hyper Text Markup Language</dd>
		</dl>
	</body>
</html>

Save & refresh browser:

  1. My first list item
  2. My second list item
  3. My third list item
  4. My fourth list item
  • Example using square bullets
  • Here's some more interesting information
  • Appropriate data
  • Perhaps you include other elements, like images!
Term
Term Definition
HTML
Hyper Text Markup Language

Leave a Reply