Web Development Documentation

Definition Lists (dd/dt)

Overview

Definition lists may be used to format text in a way that appears to be a table but is not.  Tables are useful for tabular data, like data stored in Excel.  If you find yourself using tables to control spacing, consider using definition lists instead.  This Sample Conference Schedule was formatted using a definition list format and applying styling:

Sample Conference Schedule

9:00 - 10:00
Coffee
10:00 - 10:15
Introduction
10:15 - 10:45
Talk #1: Your First Year at Rutgers
10:45 - 11:30
Talk #2: Navigating the Campuses without Driving
Where's my bus?
Can I bring my bike on the bus?
Where can I park my bike?
11:30 - 12:15
Talk #3: Using Computing Resources at Rutgers
12:15 - 1:15
Lunch
1:15 - 2:00
Talk #4: How do I Choose Classes?
2:00 - 3:15
Talk #5: What is the Mugrat?
3:15 - 4:00
Talk #6: Where Can I Find Something to Eat?
This session will describe eateries on all three Rutgers campuses.
4:00 - 5:00
Discussion

Are Definition Lists enabled on my website?

If you don't see Definition Description and Definition Term under the list of Format elements, submit a workorder to request we activate "Description Lists"  and  def-list-tbl styling on your website.

Editor Tools screen shot - format styles dropdowns

Getting Started

If you do see Definition Description and Definition Term under the list of Format elements, use instructions below to style text as if it were in a table.

1) Add text for all items using hard returns (<p>) to separate the entries. Hard returns, which are achieved by pressing only the [Return] or [Enter] key, create new paragraph tags, while soft returns, which are achieved by holding down [Shift] when pressing the [Return] or [Enter] key, create a new line in the same paragraph tag.

2) Add a few hard returns (<p>) at the bottom.  This will help keep the list separate from the rest of the text during our next steps.

3) Highlight the intended title of the Definition List and select "Heading 3" under the Format dropdown to stylize the title.

4) Highlight the list of entries and choose Definition Term from the Format dropdown.

Screen shot highlighting list of items separated by paragraph tags

5) For every item that should be appear to the right (indented), highlight it and choose Definition Description from the Format dropdown.  In the Articles: Edit screen, it should appear something like the image below:

Screen shot of formatted list in the Joomla article editor

Below is sample code for this Sample Conference Schedule definition list.  This may be useful troubleshooting. 

 

<h3>Sample Conference Schedule</h3>
    <dl>
    <dt>9:00 - 10:00</dt>
    <dd>Coffee</dd>
    <dt>10:00 - 10:15</dt>
    <dd>Introduction</dd>
    <dt>10:15 - 10:45</dt>
    <dd>Talk #1: Your First Year at Rutgers</dd>
    <dt>10:45 - 11:30</dt>
    <dd>Talk #2: Navigating the Campuses without Driving</dd>
    <dd>Where's my bus?</dd>
    <dd>Can I bring my bike on the bus?</dd>
    <dd>Where can I park my bike?</dd>
    <dt>11:30 - 12:15</dt>
    <dd>Talk #2: Using Computing Resources at Rutgers</dd>
    <dt>12:15 - 1:15</dt>
    <dd>Lunch</dd>
    <dt>1:15 - 2:00</dt>
    <dd>Talk #3: How do I Choose Classes?</dd>
    <dt>2:00 - 3:15</dt>
    <dd>Talk #4: What is the Mugrat?</dd>
    <dt>3:15 - 4:00</dt>
    <dd>Talk #5: Where Can I Find Something to Eat?</dd>
    <dd>This session will describe eateries on all three Rutgers campuses.</dd>
    <dt>4:00 - 5:00</dt>
    <dd>Discussion</dd>
</dl>

 

If you run into trouble, do not hesitate to submit a workorder for assistance.

Joomla-Workshops-Button-Hugo