HTML Lists Tags

One easy way to start coding semantically is to use lists tags. For me personally, lists tend to organize my HTML code and make content more readable in general. Lets look at three basic tags that everyone can use, starting with the most common.

The Unordered List

This is probably the tag that we rely most often on. Many designers use it to create link menus as well as the occasional content list. In our example we are going to organize some audio tracks that I got from Apple’s iTunes Store.

<h4>My iTunes Music</h4>
<ul>
  <li>Man In the Box - Alice In Chains</li>
  <li>Cool - Gwen Stefani</li>
  <li>Killing Me Softly with His Song - Fugees</li>
  <li>Not Gonna Get Us - t.A.T.u.</li>
  <li>Born Under a Bad Sign - Jimmy Hendrix</li>
</ul>

The above code will render with a bullet for each item, and automatically indent. It should look something like this:

My iTunes Music

  • Man In the Box – Alice In Chains
  • Cool – Gwen Stefani
  • Killing Me Softly with His Song – Fugees
  • Not Gonna Get Us – t.A.T.u.
  • Born Under a Bad Sign – Jimmy Hendrix

But how about if I wanted to organize each of my iTunes tracks? Perhaps I had many of them and I wanted to have them all numbered. In this case, the standard unordered list tag is not what I really need.

The Ordered List

Enter the ordered list tag which can automatically number all my items for me.

<h4>My iTunes Music</h4>
<ol>
  <li>Man In the Box - Alice In Chains</li>
  <li>Cool - Gwen Stefani</li>
  <li>Killing Me Softly with His Song - Fugees</li>
  <li>Not Gonna Get Us - t.A.T.u.</li>
  <li>Born Under a Bad Sign - Jimmy Hendrix</li>
</ol>

Using CSS, I can also style the ordered list using the list-style-type property so that the default list style can be:

  • decimal: 1, 2, 3,…
  • upper-alpha: A, B, C,…
  • lower-alpha: a, b, c,…
  • upper-roman: I, II, III,…
  • lower-roman: i, ii, iii,…
  • none:

The standard decimal default, of the ordered list for my iTunes tracks automatically numbers each of the items for me, so that I do not have to worry about actually adding numbers between the li tags.

My iTunes Music

  1. Man In the Box – Alice In Chains
  2. Cool – Gwen Stefani
  3. Killing Me Softly with His Song – Fugees
  4. Not Gonna Get Us – t.A.T.u.
  5. Born Under a Bad Sign – Jimmy Hendrix

However, after ordering my iTunes tracks, I decide that I would rather organize my tunes according to artist, since my collection has grown and now includes multiple tracks from the same artist.

The Definition List

In this case, I am going to change my list and make things even more structured.

<h4>My iTunes Music by Artist</h4>
<dl>
  <dt>Alice In Chains</dt>
    <dd>Main In the Box</dd>
    <dd>Would? (Unplugged)</dd>
  <dt>Gwen Stefani</dt>
    <dd>Cool</dd>
  <dt>Fugees</dt>
    <dd>Killing Me Softly with His Song</dd>
  <dt>t.A.T.u.</dt>
    <dd>Not Gonna Get Us</dd>
  <dt>Jimmy Hendrix</dt>
    <dd>Born Under a Bad Sign</dd>
</dl>

By using the multiple dd tags, for the same dt tag, I have an easy way of organizing my songs by artist.

My iTunes Music by Artist

Alice In Chains
Main In the Box
Would? (Unplugged)
Gwen Stefani
Cool
Fugees
Killing Me Softly with His Song
t.A.T.u.
Not Gonna Get Us
Jimmy Hendrix
Born Under a Bad Sign

By using common list tags like the Unordered List, Ordered List, and Definition List you can quickly add structure to your HTML and at the same time use CSS more effectively to quickly add design elements to your page.

Your First Web Site

A while back I covered the subject of how to choose the right weblog CMS, but what I forgot to mention is that many people who start their first website do not even think about using a weblog or a content management system to begin with. They usually put together some sort of site using either a basic web site creator tool which usually relies on frames for navigation or use template that they found. The results usually are not very eye pleasing and barely functional. This is why for many first time web sites I recommend WordPress, because it does two things very well, the first being that it is feature loaded with almost everything a beginning site author needs to create content easily, and secondly because it adds structure to help make your site more pleasing to search engines and site visitors. For a long time I thought the Kurbick template which many blog systems use now, was boring, but then I realized that blogs do something which no Dreamweaver template does. It takes care of the layout and structure for you, so you can get on with writing your content. This has allowed the Personal Web Page to flourish with new content almost daily. The personal publishing revolution is in sense only possible because of tools like WordPress and Textpattern. So if you are considering your first web site, consider a blogging or content management system to drive your site.

How To Define Content

When it comes to new websites, less is really more. What that means is that you need to cater to your audience and you need to add content and less features. Many first time web site owners feel the urge to visit sites like HotScripts.com, and install every script and web application they can find for their site. The result is usually a site that has multiple areas, many of these areas go unused and are seldom updated. The gallery, the forum, the chat area, guestbooks which are so 1990-ish, are all examples of additional areas that you see on many personal sites. The more options you add to to your site, the more confusing your site will be to your visitors. The idea is to focus on two or three main areas of your site, typically your blog and one more area is enough. This is especially important if you will be the only person updating the site with content. Eventually you might find a forum to be very popular with visitors, that this area will eventually take care of itself, but this is not always the case. What matters most is content, not content areas. The number of pages, blog entries, forum posts are what matter most, and not how many different directions site visitors can take on your site. So if you are thinking of adding a forum, a gallery, a second blog, think about how often these additional areas can be maintained and if you really need them at all.

Color Schemes

Another topic which is hard to understand for first time webmasters is color scheme. Although a good CMS or blog script can give you layout, most of the time you will want to change the color scheme and this is where perhaps not taking art in school really does become a weakness. Color schemes are not exactly easy to come by for many people, and after so many hours of watching Trading Places, you can still not know much about picking the right ones. This when looking at other sites and asking for opinions help. What I mean by color scheme is your overall design colors, graphics, and of course your link colors. For me personally, computer operating systems tend to use shades of gray and blue on purpose, mostly because gray is neutral, and blue is the one color which is pleasing and not harsh on the eyes. Even Apple’s Mac OS X, which started out as white with pinstripes, has started to change back to a more subdued gray white and forget some of its original white and rainbow gel colors. Windows98 is an even better example of gray and blue design. Choosing something besides white or gray is really very hard to do, but some web design actually manages to pull it off, usually its a white and red or a green nowadays. However for me, blue and red are still the defaults for links and it is hard to choose anything else.

The Web Is Not Suppose To Be Boring

One of the more annoying things that I find nowadays with web sites is the growing number of garbage sites, many of which are nothing more than just random collections of RSS feeds or scrapper sites, which copy their content from other sites via scripts. It is not that I have strong feelings on republishing content, it is that these sites are in fact pretty boring and really not useful at all. If you can’t entertain or have a legitimate use, then yes, I would say your site is boring. The harsh reality is that many of these sites are being indexed more and more, and end up coming up on most search engines as being relevant, but in fact are not even close. If you really are going to do a web site, make it either useful (informative in some manner) or at least interesting by making it personal (adding your opinion or views). Scrapper sites really do suck and they really serve no purpose to real web surfers. Perhaps I am being harsh, but after doing so many searches on Google and ending up at so many scrapper sites, its bound to dawn on anyone that scrapper sites are boring.

Safari Bookmark Exporter

One of the major problems with the Digital Lifestyle, that Steve Jobs ushered in with such software suites as iLife and the iPod, is that you have to constantly synch between different applications and hardware. Most people end up giving up on a synched lifestyle. One of my major peeves is with Safari, and the lack of an Export option for bookmarks. This is no longer such a big problem, as Mac OS X 10.4 includes an export option for Safari finally, but in case you are using Safari on 10.3, you might consider Ellipsos Productions’s free Safari Bookmark Exporter. This handy little utility allows you to export your Safari bookmarks to any of these support browsers:

  • Firefox
  • Camino
  • OmniWeb
  • Mozilla
  • Internet Explorer
  • iCab
  • Opera
  • Simple HTML
  • XBEL

I use Safari Bookmark Explorer to synch up Firefox to my Safari bookmarks on both my Macintosh and PC workstations. Just arrange Safari’s bookmarks the way you want them and when you are done run SBE and it will even save your bookmarks to the correct directory for the browser you specify. To synch up to a different machine, you have to copy the file it creates and manually overwrite your other bookmarks.html file on your other computer.