Web Standards
  Home arrow Web Standards arrow Page 3 - Get Down With Markup
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
WEB STANDARDS

Get Down With Markup
By: Apress Publishing
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 3 stars3 stars3 stars3 stars3 stars / 9
    2005-02-15

    Table of Contents:
  • Get Down With Markup
  • Quiz time
  • Method B: The bullet that bites
  • Method C: Getting closer
  • Method D: Wrapper’s delight
  • Extra credit
  • Getting fancier with custom bullets
  • Lists that navigate
  • Mini-tab shapes

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    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.

    More Web Standards Articles
    More By Apress Publishing


     

    WEB STANDARDS ARTICLES

    - 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







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 6 Hosted by Hostway
    Stay green...Green IT