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.

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, and newer versions of Internet Explorer.

Still stuck? How can we help? How can we help?