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?

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

My CSS code:

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


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

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


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.

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

    <dd>Multi<br />Line</br Definition</dd>

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

    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
    dt {
        margin-top: 10px;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top