How to add a line break <br/> in <dl> in HTML

Question

I am trying to add a break in the definition list but it says that it is not allowed as child element in dl. How do I put a break without using br in HTML?

<dl>
  <dt>Activities</dt>
  <dd>- Trekking</dd>
  <dd>- Rappelling</dd>
  <dd>- Kayaking</dd>
  <dd>- Rock Climbing</dd>
  <dd>- Cycling</dd>
  <dt>Hobbies</dt>
  <dd>- Dancing</dd>
  <dd>- Listening to Music</dd>
  <dd>- Reading Novels</dd>
  <dd>- Android Programming</dd>
</dl>

My CSS code:

dl {
  margin-top: 0;
  margin-bottom: 21px;
}
dt, dd {
  line-height: 1.42857143;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0;
}

Answer 1

You may not use br in dl, but you can use it in dt and dd. Like this:

<dl>
  <dt>Hot<br />Coffee</dt>
  <dd>Black hot<br />drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink<br /></dd>
</dl>

Answer 2

You could put it at the end of the last <dd> in the group under which you want a break.

Or, if you really want separate groups of definitions, maybe you just want to break your single list into several.

Answer 3

<br> is not a valid child of <dl>. You may add breaks in definition lists by putting it in the <dd>:

<dl>
    <dt>Term</dt>
    <dd>Multi<br />Line</br Definition</dd>
</dl>

Or if you are looking for a way to separate terms/list elements, you can add CSS margins to the definition terms:

<dl>
    <dt>Term1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
</dl>
<style>
    dt {
        margin-top: 10px;
    }
</style>