Dev.Opera - Follow the standards, break the rulesDev.Opera - Follow the standards, break the rules

Login

Lost password?

Forums » Article Discussions

Discuss the articles posted on Dev.Opera.

Note: You need to login to post in the forums. if you don't have an account you first need to sign up.

By cheshrkat anchor Tuesday, 8. July 2008, 07:14:42

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 )

By andresruiz anchor Tuesday, 22. July 2008, 02:21:43

avatarOn 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?

Post edited Tuesday, 22. July 2008, 16:20:35

By shanna2812 anchor Sunday, 14. September 2008, 18:39:22

avatarThe 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?!

By chrismills O anchor Friday, 19. September 2008, 15:59:45

avatar

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.

By redcrew anchor Monday, 6. October 2008, 16:20:58

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

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

By chrismills O anchor Monday, 6. October 2008, 21:08:36

avatar

Originally posted by redcrew:

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



Hi there Redcrew - there is certainly nothing wrong with nesting a <p> 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 <p> 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 ;-)

By redcrew anchor Monday, 6. October 2008, 21:14:43

avatarChris,

Thanks for the explanation. I've never seen a <p> 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?

By karaj anchor Tuesday, 7. October 2008, 13:09:11

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

By chrismills O anchor Tuesday, 7. October 2008, 16:19:41

avatar

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.

By chrismills O anchor Tuesday, 7. October 2008, 16:30:08

avatar

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 ;-)

By AndBre anchor Friday, 9. January 2009, 18:39:39

avatarSmall typo: "degress" (both in code and in rendered text).

Cheers.

By chrismills O anchor Sunday, 11. January 2009, 22:26:12

avatar

Originally posted by AndBre:

Small typo: "degress" (both in code and in rendered text).



Fixed - thanks!

By stelt anchor Monday, 2. February 2009, 15:44:44

avatarthe previous article, next article thing at the bottom seems to be missing the styling used for the same thing at the top

By karaj anchor Sunday, 26. July 2009, 20:05:08

avatarThe styling of the second navigation box (at the bottom) is missing.

Moderators: pepelsbey | dstorey | mcx | operadev | chrismills | shwetankdixit | brucelawson | iheni | andreasbovens | zibin | mollydotcom