16: HTML lists

Forums » Dev.Opera » Archived Article Discussions

This topic has been closed. No new entries allowed.

Reason: You can now post comments on articles on Dev Opera

Forum rules and guidelines

You need to be logged in to post in the forums. If you do not have an account, please sign up first.

8. July 2008, 07:14:42

cheshrkat

Posts: 16

16: HTML lists

In this article, Ben Buchanan gives you the lowdown on the venerable HTML list, covering unordered lists, ordered lists, nested lists, and definition lists. It finished off with a nice complete recipe example.

( Read the article )

--- http://www.200ok.com.au/
--- The future has arrived, it's just not
--- evenly distributed. - William Gibson

22. July 2008, 16:20:35 (edited)

andresruiz

Posts: 43

On the Step by Step Example, point 3, you say: "...I’ll get you to link all of the recipes to one single recipe page..."
man, you use things like href="stepbystep-recipe.html" Plain Sponge which you've not explained yet, so how are we going to understand?

14. September 2008, 18:39:22

shanna2812

Posts: 1

The example on http://devfiles.myopera.com/articles/371/stepbystep-main.html does NOT show the image-bullet. There is an image in the tutorial on how it should look, but that is not what the example page shows.
This is a problem, I CANNOT solve either. I've been trying for months and googling everywhere...
So... can anyone at dev.opera.com please help?
I keep clashing with using lists, with default-bullets and lists with image bullets. I thought that I had found the answer here, but probably NOT?!

19. September 2008, 15:59:45

chrismills

Posts: 378

Originally posted by shanna2812:

...so how are we going to understand?

This is a good point. I have added a convenient link to article 18, for readers who are not sure what links are.

Originally posted by shanna2812:

The example on http://devfiles.myopera.com/articles/371/stepbystep-main.html does NOT show the image-bullet.

I have since fixed this - the reference to the image inside the CSS was incorrect - I have corrected it so that it finds the image sucessfully. On reflection, we probably shouldn't have included CSS background images in an example so early on in the course. You'll learn about CSS background images in the next part of the course, which is being published next week.

Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com

6. October 2008, 16:20:58

redcrew

Posts: 3

Recently I saw a definition list in which the markup had tags within the <dd> tags.
Example:
<dl>
<dt>Fruit</dt>
<dd>Apples</dd>
</dl>

I wasn't sure the purpose of enclosing the tag within the <dd>. Is this considered good practice?

6. October 2008, 21:08:36

chrismills

Posts: 378

Originally posted by redcrew:

I wasn't sure the purpose of enclosing the
tag within the
. Is this considered good practice?

Hi there Redcrew - there is certainly nothing wrong with nesting a element inside a <dd>. Indeed, if you wanted to put multiple paragraphs, or other content inside a <dd>, you would need to mark it up properly, just like any other content on the site. But you don't absolutely need to enclose your <dd> content in a element if it is just one paragraph. <dd> is itself a block level element, so it is ok for enclosing a single block of text, as long as you want it to be a list item definition, of course ;-)

Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com

6. October 2008, 21:14:43

redcrew

Posts: 3

Chris,

Thanks for the explanation. I've never seen a element inside a <dd> element in the past, and wondered what the reason could be for the markup. I had not thought of multiple paragraphs within a <dd> element.

A follow up question: I've seen definition lists used for FAQ sections on many websites. Some argue that a question with answer doesn't fit the intent of a definition list. What alternative markup do you recommend for FAQ sections, other than definition lists?

7. October 2008, 13:09:11

karaj

Opera fan

Posts: 1085

The subtitle "Unordered list markup" is missing from the table of contents in the introduction.

Magyar Opera

7. October 2008, 16:19:41

chrismills

Posts: 378

Originally posted by karaj:

The subtitle "Unordered list markup" is missing from the table of contents in the introduction.

Thanks for letting me know! I've added it now.

Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com

7. October 2008, 16:30:08

chrismills

Posts: 378

Originally posted by redcrew:

A follow up question: I've seen definition lists used for FAQ sections on many websites. Some argue that a question with answer doesn't fit the intent of a definition list. What alternative markup do you recommend for FAQ sections, other than definition lists?

I think it is reasonable to use a definition list for questions and answers - it isn't 100% semantically viable, but then again there are no "question" and "answer" elements available; this is a situation that the W3C spec doesn't specifically cover, and let's face it, it can't be expected to cover EVERY situation. If you are concerned about improving the semantics of your questions and answers and styling them consistently, you could use a class attribute on the dd and dt elements and give your questions and answers classes of "question" and "answer. You could also wrap the questions in q elements (or perhaps blockquote elements) if appropriate - a lot of questions are specifically asked by people, so can be considered quotes.

Check out the Opera FAQ page (http://www.opera.com/support/service/faq/) - this uses unordered lists for the questions, containing links to separate pages for each answer. There isn't one definitive correct way to do this, although there are good and bad ways ;-)

Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com

9. January 2009, 18:39:39