Home arrow Web Standards arrow Page 3 - Get Down With Markup
WEB STANDARDS

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Get Down With Markup - Method B: The bullet that bites
(Page 3 of 9 )

  <li>Apples<br />
  <li>Spaghetti<br />
  <li>Green Beans<br />
  <li>Milk<br />
 

Most competent browsers will insert a bullet to the left of a list item when the <li> element is used. One might use Method B to achieve those results, adding the <li> by itself when a bullet is desired. However, some of those same competent browsers wonít display the bullet when an <li> element isnít contained within one of its proper parent, the mighty <ul>. The <li>ís other parent is the <ol> element, for ďordered lists,Ē which Iíll discuss further on in the book.

The bullet does help the wrapping issue to a certain extent. A new grocery item would be signified by a bullet, to its left. If an item wraps to the next line, the absence of a bullet should be enough to distinguish itself from being a whole new item. But there is something else wrong with Method B, aside from its resulting display: Itís not valid.

Validation, please

According to the W3Cís XHTML 1.0 specification, all tags must eventually closeóand if we were to go ahead and open an <li> for each grocery item, without closing it at the other end as in the example, shame on us!

Weíve mimicked the automatic line-breaking that occurs when a proper unordered list is used by adding the <br /> tag at the end. But thereís a better way.

Itís valuable to get used to the idea of writing valid markup, consistently. By ensuring our markup is valid, weíll worry less about problems that may occur because of unclosed or improperly nested elements in the future. Not to mention that if anyone else is looking at our code, itís easier for everyone involved to dive in and understand exactly whatís going on.

Be sure to use the W3Cís online validation tool  (http://validator.w3.org/) to validate your files by URI or file upload. Youíll be happy you did in the long run.

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
WEB STANDARDS ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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