Computer Programming 12 — HTML Lists

<New code>

block HTML <ol> - contains an ordered list — 1.
block HTML <ul> - contains an unordered list — •
block HTML <li> - contains a list item
block HTML <h2> - contains a sub heading

A survey of lists...

HTML offers a number of different ways to organize data. One kind of organization is called lists.

There are two kinds of lists:

Ordered lists

  1. Ordered
  2. Lists
  3. Have
  4. Numbers
  5. Automatically
  6. Inserted
  7. In
  8. Front
  9. For
  10. You

To make ordered lists, write code like this:

<ol>
	<li>Yup!</li>
	<li>I</li>
	<li>love</li>
	<li>ordinal</li>
	<li>numbers</li>
</ol>

Unordered lists

  • Unordered
  • Lists
  • Have
  • Bullets — •
  • Inserted
  • Instead

To make unordered lists, write code like this:

<ul>
	<li>Certainly!</li>
	<li>I</li>
	<li>am</li>
	<li>free of</li>
	<li>counting</li>
</ul>

There are also times when you will want to use more than one heading size. In the first exercise, you used the <h1> to make large headings. You can also make progressively smaller headings by using other codes: <h2>, <h3>, <h4>. Try it out and see what happens!

<h1>I am a large heading!</h1>
<h2>I am a smaller heading!</h2>
<h3>I am even smaller...</h3>
<h4>Really?</h4>

Learn more

Live example: Lists