Home arrow Web Standards arrow Page 4 - 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 C: Getting closer
(Page 4 of 9 )

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

Method C brings us closer to a preferable solution, but fails miserably in one potentially obvious way: It’s still not valid markup.

We’ve closed each <li> tag properly, and since they are block-level elements, using them eliminates the need for a <br /> tag, putting each list item on its own line. But, we’re missing an outer layer of structure, lacking a containing element that denotes “This group of items is a list!”

It’s also important to view this from a semantic angle as well—that the list is a group of items that belong together, therefore they should be denoted as such. Furthermore, using proper list tags says very clearly to the browser, software, or device, “This group of items is a list!” A good example of how semantic markup is about structuring items for what they are.

Block level vs. inline: HTML elements can inherently be either block level or inline. Block-level elements begin on their own line, followed by a line break, while inline elements are rendered on the same line as other inline elements. Block-level elements can contain other block-level or inline elements, while inline elements can't contain block-level elements.

Some examples of block-level elements include <div>, <hl>-<h6>, <form>. some examples of inline elements include <span>, <strong>, <em>, <q>.

If we were to look at our grocery list in purely an XML sort of way, we might choose to mark it up as shown in this example:

  <grocerylist>
    <item>Apples</item>
  <item>Spaghetti</item>
  <item>Green Beans</item>
    <item>Milk</item>
  </grocerylist>

The entire list has a containing element, <grocerylist> that all of the grocery items belong to. Grouping the items in this manner will make life easier for XML-based applications that may want to extract the items from the list.

For instance, a developer could author an XSLT style sheet that would transform this list of items into XHTML, plain text, or even a PDF document. Because of the predictable nature of a group of list items, software will have an easy time taking the information and doing something useful with it.

While I’m not dealing with XML in this book directly, the principles are carried over to the world of XHTML. Providing a meaningful structure to our markup gains flexibility later on. Whether it be the increased ease of adding CSS to properly structured documents or the improved manageability of making changes to markup that is easy to understand— providing that structure will make for less work later on down the road.

Let’s take a close look at Method D and see how this all fits together—providing a structure that the most browsers and devices can read, while also allowing us to style our list in several different ways.

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