Home arrow Web Standards arrow Page 5 - Get Down With Markup

Get Down With Markup

Lists may seem to be mundane items, but many pages on the Web include at least one. The way you choose to mark up these lists can make a big difference. This article explores several the advantages and disadvantages of several common markup methods. It is taken from chapter one of Dan Cederholm's book Web Standards Solutions: The Markup and Style Handbook (Apress, 2004; ISBN: 1590593812).

Author Info:
By: Apress Publishing
Rating: 3 stars3 stars3 stars3 stars3 stars / 11
February 15, 2005
  1. · Get Down With Markup
  2. · Quiz time
  3. · Method B: The bullet that bites
  4. · Method C: Getting closer
  5. · Method D: Wrapper’s delight
  6. · Extra credit
  7. · Getting fancier with custom bullets
  8. · Lists that navigate
  9. · Mini-tab shapes

print this article

Get Down With Markup - Method D: Wrapper’s delight
(Page 5 of 9 )

  <li>Green Beans</li>

So what makes Method D so special? First and foremost, it’s completely valid. A proper unordered list has a containing <ul>
element, with each item within wrapped in opening and closing <li> elements. Now just when you think all we’re going for here is demonstrating how to be valid for valid’s sake, we’ll take a look at it in action.

Because we’ve properly marked up our grocery list, each item will be on a separate line (due to the block-level nature of the <li> and most visual browsers will render a bullet next to each item, as well as indent any wrapping lines that may occur (see Figure 1-3).


Figure 1-3.  Default rendering of an unordered list

Users of PDAs, phones, or other small-screened devices will also be able to view the list in a similar, clearly organized fashion. Because we’ve told the device what the data is (a list in this case), it can best decide how to display it according to its capabilities.

If a long line wraps due to increased text size or a narrow browsing window, the wrapped line will appear indented to line up with the text above it. It’ll be darn clear to distinguish between items no matter what the browsing circumstances.


Now that I’ve picked each possible method apart, let’s quickly review what I’ve covered about each:

Method A:

  • Leaves out the possibility for styling the list uniquely
  • Could create confusion when longer lines wrap in a narrow column or small-screened device
  • Lacks semantic meaning

Method B: 's ch

  • Adding a bullet helps for signifying a new item, but some browsers may choose not to show it, without its parent <ul> element.
  • No containing <ul> element or closing <li> elements means difficult to style.

Invalid.Method C:

  • Closing the </li> element eliminates the need for <br />
  • Omitting the <ul> element makes it difficult to style this particular list differently.
  • Invalid.

Method D:

  • Valid!
  • Provides semantic meaning and structure.
  • Bullets will render to the left of each item on most browsers.
  • Wrapping lines will indent on most browsers.
  • It can be easily styled uniquely with CSS.

As you can see, you can learn a lot from a seemingly innocent little question. Even if you’re already using Method D exclusively on all of your pages, it’s nice to know why you do things the way you do. We’ll continue to explore such “why” questions throughout the book, giving you more ammunition to make the best choice at the right time.

This chapter is from Web Standards Solutions: The Markup and Style Handbook by Dan Cederhold (Apress, 2004, ISBN:  1590593812). Check it out at your favorite bookstore today. Buy this book now.

blog comments powered by Disqus

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials