HTML Tip:
Defining Terms With HTML

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Most business or informational sites use a glossary page or a Frequently Asked Questions (FAQ) page to give customers more information about products, services, and company policies. This good, keyword-rich content helps both customers and search engines. Fortunately, HTML gives you an easy way to organize and code these pages quickly with definition lists.

Coding Your Definition List

You use just three HTML tags - DL, DD, and DT - for your lists. The DL tag tells the browser that you're starting a definition list. The DT is equivalent to the question portion or the term to be defined. The DD tag is either the answer or the definition. The DT tag displays on its own line, aligned with the left margin. The DD tag is indented on its own line (or lines) below the DT tag.

We use definition lists on our Accessibility Dictionary page. Here's a sample:

Screen Reader:

Software that reads the content of a computer screen aloud. Screen readers can only interpret text content, so all graphic and multimedia must have alternative text descriptions using ALT text, captions, transcripts, or other methods.

It's coded like this:

You can include many DT tags inside your definition list and also use multiple DD statements under each DT.

The closing DT and DD tags aren't required in HTML, but they help you stay oriented in the code. Closing tags are required in XHTML though. Get into the habit of closing every tag in HTML and your code will be easier to convert to XHTML later. You also need closing tags if you're going to apply style sheets to the tags.

Enhance Definitions With CSS

Now you may have noticed that we didn't include any attributes with any of these tags. That's because attributes like FONT, ALIGN, and BORDER aren't allowed by HTML. You'll need Cascading Style Sheets (CSS) to add custom colors or other special formatting to your definition lists.

Suppose we wanted all our accessibility terms to have the term to be defined in bold, red, 12 pt. Arial and the definitions to be in black, 10pt. Arial. We could create a STYLE specification that looks like this:

Then, the above definition would look like this:

Screen Reader:

Software that reads the content of a computer screen aloud. Screen readers can only interpret text content, so all graphic and multimedia must have alternative text descriptions using ALT text, captions, transcripts, or other methods.

Always be careful when you're setting multiple style specifications on a single page. Sometimes, style sheet inheritance can cause some unexpected formatting problems. Our Presenting Your Page With Style beginner tip discusses inheritance and other style sheet basics.

Definition Lists And Promotion

As we discussed in our promotion tip Give Visitors The FAQs, frequently asked questions pages and dictionary or glossary pages are a great way to create useful, keyword-rich content.

These types of pages are an easy way to increase your search engine visibility without resorting to spamming techniques. When well done, they help everyone involved.

Visitors use the information to find quick answers to questions, search engine spiders eagerly index all that great content, and webmasters use definitions lists to create pages that are easy to code and maintain.

Definition lists help you quickly code and organize pages, but some other HTML code techniques or coding errors may break your page layout or keep it from displaying properly in some browsers.

Always validate your HTML code before you post your pages. Since some simple coding errors can be very hard to find, save time by using a validation tool like NetMechanic's HTML Toolbox. It will validate your code, alert you to errors, and even correct the code for you.