Definition Lists


<dl>

   <dt> First Term

   <dd> First Term Definition

   <dt> Second Term

   <dd> Second Term Definition

</dl>

This is a generic form of a bulleted list with the difference being that it is displayed without the 'bullets' and is typically used to render a list of terms and definitions. The definition list uses the dl element of which both the start and end tags are required. In between these are placed at least one <dt> tag and one <dd> tag which render the definition term and the definition data respectively. The end tags for dt element and dd elements are optional.

The following example will illustrate:

Example 1 - SOURCE CODE

<dl>

   <dt>Text Editor

   <dd>Program that comes with the default installation of most computer operating systems that permits the user to save text to a file stripped of any formatting. Often used by web page authors, beginner and hardcore alike.

   <dt>HTML Editor

   <dd>Basically a text editor on steroids facilitating the writing of HTML source code by providing a graphical user interface containing buttons and drop-down menus that allow one to insert commonly used snippets of code.

   <dt>WYSIWYG Editor

   <dd>A program which permits the user to create a web page by working 'on top' with the finished product as opposed to working underneath with the HTML source code (WYSIWYG = What You See Is What You Get). Although the easiest to use, WYSIWYG editors quite often produce bloated and junky source code.

</dl>

Example 1 - RESULT

Text Editor: Program that comes with the default installation of most computer operating systems that permits the user to save text to a file stripped of any formatting. Often used by web page authors, beginner and hardcore alike.
HTML Editor: Basically a text editor on steroids facilitating the writing of HTML source code by providing a graphical user interface containing buttons and drop-down menus that allow one to insert commonly used snippets of code.
WYSIWYG Editor: A program which permits the user to create a web page by working 'on top' with the finished product as opposed to working underneath with the HTML source code (WYSIWYG = What You See Is What You Get). Although the easiest to use, WYSIWYG editors quite often produce bloated and junky source code.

However, just because the dl element was originally meant to define lists of terms and definitions does not bind you to always use it in this capacity. You could essentially use it to render any text that would be suited to this particular formatting style such as listing commands and functions in a program help file:

Example 2 - SOURCE CODE

<dl>

   <dt>File

   <dd>Opens a drop-down button menu containing a list of commands used to manipulate files, including saving work in progress, opening previously saved files or creating new ones.

   <dt>Edit

   <dd>Opens a drop-down button menu containing a list of commands used to edit works in progress including copying, cutting and pasting selections from the work area.

   <dt>View

   <dd>Opens a drop-down button menu containing a list of commands used to control the appearance of the graphical user interface.

</dl>

Example 2 - RESULT

File: Opens a drop-down button menu containing a list of commands used to manipulate files, including saving work in progress, opening previously saved files or creating new ones.
Edit: Opens a drop-down button menu containing a list of commands used to edit works in progress including copying, cutting and pasting selections from the work area.
View: Opens a drop-down button menu containing a list of commands used to control the appearance of the graphical user interface.

Alright then, so let's say you've got the whole basic HTML thing down and now you're ready to actually start laying out several web pages in order to create an actual website. Assuming that you're a beginner and that you would prefer putting off learning CSS until some later date, you have essentially two ways to create a sophisticated web page layout:

<~ BACK

TOP

HOME