Tutorials - HTML - Lists

HTML has three types of lists built into it, ordered lists, unordered lists and definition lists. These can be used seperatley, or in combination to create nested lists. The tag for items within ordered and unordered lists is <li>.

Ordered Lists

<h3>Things To Learn</h3>
<ol>
	<li>HTML</li>
	<li>JavaScript</li>
	<li>CSS</li>
	<li>PHP</li>
</ol>

Things To Learn

HTML
JavaScript
CSS
PHP

You can use the "start" attribute in an ordered list to begin counting from a different number:

<h3>Things To Learn</h3>
<ol start="3">
	<li>CSS</li>
	<li>PHP</li>
	<li>MySQL</li>
</ol>

Things To Learn

CSS
PHP
MySQL

You can also use the type attribute to change the type of numbering used in an ordered lists: a for lowercase letters, A for uppercase letters, i for lowercase roman numerals and I for uppercase roman numerals.

<h3>Things To Learn</h3>
<ol type="I">
	<li>HTML</li>
	<li>JavaScript</li>
	<li>CSS</li>
	<li>PHP</li>
</ol>

Things To Learn

HTML
JavaScript
CSS
PHP

Unordered Lists

Unordered lists work in the same way as ordered lists, however they use a bullet-point (by default a filled circle) instead of numbering the items. You can also use the type attribute to change the type of bullet point used. Later we'll show you some tricks with CSS to make an unordered list a very useful tool in your web development as well.

<h3>Things To Do (in no particular order)</h3>
<ul>
	<li>Party</li>
	<li>Study</li>
	<li>Sleep</li>
</ul>

Things To Do (in no particular order)

Party
Study
Sleep

You can use <ul type="square"> to get square bullet-points, or <ul type="circle"> to get outline circles as the bullet-points.

Definition Lists

Definition lists (<dl>) are similar to list styles used in dictionaries and glossaries, and provide distinction on the term element (<dt>) with an explanation following (<dd>). These are less commonly used, but can still be useful.

<dl>
	<dt>HTML</dt>
	<dd>HyperText Markup Language</dd>
	<dt>CSS</dt>
	<dd>Cascading Style Sheets</dd>
	<dt>PHP</d>
	<dd>PHP Hypertext Preprocessor</dt>
</dl>

HTML: HyperText Markup Language
CSS: Cascading Style Sheets
PHP: PHP Hypertext Preprocessor

Page Responses

Currently there have been no responses to this page...

Post Response

If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.