HTML Lists

 

HTML Lists

HTML lists are used to display your text in an organized fashion. There are basically three types of lists:

Unordered lists – Display list items with bullets
Ordered lists – Display list items with numbers or letters
Definition lists – Display definition terms and descriptions

Unordered List

An unordered list is created using the <ul> tag followed by list items, which are enclosed with the <li> tags. List items will be displayed with a disc.

HTML Code

HTML code viewed within an HTML document:
html-line

<ul>
<li>List Item one</li>
<li>List Item two</li>
<li>List Item three</li>
</ul>

Browser View

HTML coding viewed through a web browser:
html-line

unordered_list

Ordered Lists

An ordered list is created using the <ol> tag followed by list items, which are enclosed with the <li> tags. List items will be displayed with numbers.

HTML Code

HTML code viewed within an HTML document:
html-line

<ol>
<li>List Item one</li>
<li>List Item two</li>
<li>List Item three</li>
</ol>

Browser View

HTML coding viewed through a web browser:
html-line

  1. List Item one
  2. List Item two
  3. List Item three

Definition Lists

A definition list is created using the <dl> tag followed by definition terms and definition descriptions, which are enclosed with the <dt> tags and <dd> tags. Definition terms are displayed aligned left and definition descriptions are indented.

HTML Code

HTML code viewed within an HTML document:
html-line

<dl>
<dt>ASCII</dt>
<dd>American Standard Code for Information Interchange</dd>
<dt>Attribute</dt>
<dd>Words following the element within the opening tags of HTML</dd>
</dl>

Browser View

HTML coding viewed through a web browser:
html-line

definition_list

 
This concludes the HTML lists tutorial. In the next section, we will focus on HTML forms.