Need a little help with HTML list tags

HTML-CSS
1

I’ve been building the tribute page, and I’m using a ul for authors works.
Is ok to use the dd tag with in my ul tag or should I really use CSS to position the text. I had planned to link my CodePen but it won’t let me so I’ll just copy and paste part of the code.

                <li>Tomie</li><br>
                <dd>Tomie Kawakami is a femme fatale with long black hair and a beauty mark 
                         just under her left eye. She can seduce nearly any man, and drive them to 
                         murder as well, even though the victim is often Tomie  herself. 
                         While one lover seeks to keep her for himself, 
                         another grows terrified of the immortal  succubus.</dd><br>
2

No, you can’t do that. A <dd> tag is for use in a definiton list (a list of terms and their defintiions, like a dicitonary):

<dl>
  <dt>Som term</dt>
  <dd>The description for the term</dd>

  <dt>Another term</dt>
  <dd>The description for the second term</dd>
</dl>

A <ul> is just an unordered list of stuff

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

You can’t mix in the other. In your example, if you have a list of characters with descriptions, then you can use a <dl> anyway.

Another thing, the only direct children allowed in a <ul> or <ol> element are <li> items, and the only direct children allowed in <dd> elements are <dt> and <dd> elements, so you can’t do

<ul>
  <li>Item 1</li>
  <br>
  <li>Item 2</li>
</ul>

And as <li> (or dt/dl) elements are block level, so go to the full width anyway, the <br> is redundant anyway. (And <br> should be avoided as a rule, style should go in via CSS).

NOTE your markup will still generally work anywhere, because HTML parsers in browsers are designed to be very permissive: even if you write HTML that is wrong per the secifications, then the browser will try to render something sensible. This isn’t a great idea for a few reasons, but do bear it in mind._

2 Likes
3

I thought that was going to be the case but I wanted to check. I will also avoid using br from now on. Thank you.

I did use dl first of all but I wanted bullet points on the book titles, I tried using CSS to apply them but it wouldn’t work it.

1 Like
4

You can use CSS’ ::before property to add bullets, I’ll do a demo once I’ve got a sec

1 Like
5

Never seen the :: before so gave a quick Google and came across this

dt:before {
    content:"• ";
}

It doesn’t quite put the text in the position that I wanted but I will have a little fiddle with it later see what I can workout.

6

Yep: you can treat that as an element, so any styling goes. This should work:

dl {
  // Whatever value you want here,
  // Just keep it the same for the ::before
  padding-left: 40px;
}

dt {
  position: relative;
}

dt::before {
  content:"•";
  display: block;
  left: -40px;
  position: absolute;
  width: 40px;
}
1 Like