Use Definition Lists for Detailed Steps
A definition list is a list of terms (or numbers) and corresponding definitions or descriptions. We like using definition lists in our articles to give readers a clear view of the steps required to complete a task, but just about anything fits in a list. This article will teach you how to use definition lists in Docs.
Note: If you signed up for Help Scout after December 6, 2022, your experience here will be a little different as we're rolling out an exciting new editor and some things have moved a bit. Please reach out to our team with any questions and we'll be happy to lend a hand!
In this article
Creating Lists in the HTML Editor
The definition list element ( <dl>) contains a term (<dt>) and a description (<dd>). To create your list, you can either:
- Write list content in the text editor, then hop over to the HTML editor by clicking the </> icon on the toolbar to markup the list.
- Write list content entirely in the HTML editor, enclosing text in the list as you go.
Check out the list below and take a look at how it's marked-up in HTML. The step number is our definition term <dt> and the corresponding instruction text is the definition description <dd>.
- 1
- I call it luck. I care. So, what do you think of her, Han? She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander.
- 2
- The Force is strong with this one. I have you now. Your eyes can deceive you. Don't trust them. I'm surprised you had the courage to take the responsibility yourself.
<dl> <dt>1</dt> <dd>I call it luck. I care. So, what do you think of her, Han? She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander.</dd> <dt>2</dt> <dd>The Force is strong with this one. I have you now. Your eyes can deceive you. Don't trust them. I'm surprised you had the courage to take the responsibility yourself.</dd> </dl>
Note: By default, the number background in a definition list is grey. We're using custom CSS to make our number background blue. If you're using your own stylesheet, you can change the term background color with:
#fullArticle dt { background: #3197D1; }
Common Questions
Will lists work in all browsers?
Definition lists are supported in Chrome, Firefox, Safari, Opera, Internet Explorer, and Edge.