Brennan’s Blog

In the past year I have been learning how to better use modern techniques with CSS and HTML to produce semantic oriented web pages which are both small in size as well as tuned for search engines. I use tags like H1 for headings instead of the bold tag with the font size increased because it help search engines know what the content is about. For example, if I have a heading of "Alternative Music" and in the following paragraph it mention the Smashing Pumpkins the search engines could assume that Smashing Pumpkins refers to the band. If instead the heading was "Halloween Pranks" the text "smashing pumpkins" in the following paragraph would not implicitly refer to the band. A user searching with the keywords "pumpkins band" would find the first example closer to the top of the list than the latter.

Another generally unused tag is ADDRESS, which is meant to indicate the included text is a postal address. In light of new search resources like Google, Local it does help to tip off the search engines which parts of the page are addresses so they can be easily identified. If your company sells widgets to your local area it would make sense to place your address inside this tag on your web site.

Today a designer asked me to help put together the layout of a few columns listing addresses and related states. She knew how she could do it with a table but I have encouraged her to consider using CSS layouts lately. What she needed was a way to list a few cities with an address along with a list of states related to each city. She wanted each city to show up as a separate column across the page.

She wanted to try producing the multiple column display with a bulleted list, so I sketched the concept down on some paper along with the semantic structure. At first I was not sure exactly how I would do it so I created a crude sketch on paper of the various elements on the page. By using the Box Model I decided how the UL and LI tags would be manipulated with CSS to achieve the desired result...

Knowing that I would be able to use the bulleted lists to complete the effect I put together the markup. If you look at it without CSS you can see it is basically just a few lists with an embedded list for the states.

The lists have 2 levels. The top level has the city and address while an embedded list holds the states. I labelled them with class selectors, Level1 and Level2 and set the width of ul.Level1 to 200 pixels. In the CSS for the lists I used list-style: none; to remove the bullets and also set the margin and padding to 0 to eliminate the indentation which is the default for bulletted lists. When I reloaded the page in Firefox I was a little surprised that the lists were stacked down the page instead of lining up in a row across the page.

I realized that a DIV tag will display as a block which will break the content to the next line. I had to make the Level1 lists float to the left so they would stay on the same row. Now the end result shows the lists lining up as columns.

Once you view the code you will notice I also set the H1 tags inside the Level1 lists to knock down the font size and reduce the bottom margin so they fit as I want. This preserves the semantic value of the heading, but allows it to work with the visual design. I also placed the address inside an ADDRESS tag so that search engines know what to do with it.

After I thought I was done I ran into a of problem. Initially I had 5 states listed for each city. It was lining up perfectly and the paragraph after the lists was showing up as it should, but when I made one list longer than the others the trailing text wrapped differently. To solve it I placed a break tag (<br clear="left">) with a clear on the left to break the line on the blocks floating to the left. That problem was easily fixed.

Next I checked to see how flexible this layout was. I started with 4 cities, but added another. With a rough width of 200 pixels for the Level1 lists and a container with a width of 800px I could fit 4 lists, but the fifth list would wrap to the next line. I could manually change the width of the list to make it fit, but I could also set the width to a percentage of 20% so if the container width changes it will simply adapt. That is a useful feature for this layout because it is likely cities would be added to this list over time.

For navigations menus I have started to use bulleted list as described on A List Apart in Taming Lists. It is a great technique to simplify your markup and also enhance your search engine rankings.